语义标记

什么是语义?

所谓语义，即此段内容与彼段内容之间的差异，或者此段内容在整篇文档中的角色，譬如标题、段落、列表、表格等

正确的使用语义标记，目的是刻画文档的内容结构，易于浏览器等读者正确的进行解析、处理和渲染网页的内容。

渲染：指普通浏览器将html源代码输出为可视化的屏幕显示；或者语音浏览器输出为一段语音

[] 举一个书页的例子

语义标记的分类

  • 块元素：是一个语义独立和完整的基本单元，譬如一个句子、一个段落等
  • 内联元素：语义不完整，需要和其它元素结合使用，才能构成一个完整的语义

块元素可以包含内联元素,但内联元素不可以包含块元素.

提示：有同学将块元素理解为有换行，而内联元素则是无换行，这种理解是不正确的。从语义的角度，块元素意味一个完整语义的终结。这种终结可以表现为一个换行(可视浏览器)，也可以表现为一个较长的语音停顿(语音浏览器)，也可以表现为一段文本分析程序的停止(搜索爬虫)。反过来，换行并不一定代表语义的终结，譬如你在手机等窄屏设备上浏览页面,一整段文字虽然被分成多行显示,而其语义显然是没有变化的.

块元素 Block Elements

h1-h6 : header 用于标记文档中6个层次的标题。当文档分为多节时，标题用于简要说明该节内容。 一般来说，一篇文档只能有一个h1即一级标题。

p : paragraph 用于标记一个段落。

blockquote 用于标记一段引文。

address 用于标记文档作者的联系信息

内联元素 Inline Elements

a : anchor 用于标记一个锚点或链接

abbr : abbreviation 用于标记文档内的短语缩写,如Dr. 表示 Doctor ;

acronym 用于标记文档内的单词缩略，首字母缩写等，如VIP,WWW

em : emphasis 用于标记某段文本在语义上相对重要

strong 用于标记某段文本在语义上强烈的重要

cite : citation 用于标记对外部资源的引用，比如参考书目等。

del : delete 用于标记某段文本已被删除

ins : insertion 用于标记某段文本为新近增加。与del的用法相反，多用于文档的版本管理

q : quotation 用于标记某段文本为引文。 注意与blockquote的区别

kbd : Keyboard text 用于标记某段文本为用户输入。很少使用，通常与code和samp结合使用。

var : Variable 用于标记变量或参数

code: 用于标记某段文本为特殊代码类型，如程序代码或数学公式等

samp : Sample 用于标记某段文本为程序语言的示例，与code类似

sup : Superscripting 上标,如脚注或眉批等

sub : subscripting 下标,如脚注或眉批等

List Elements 列表元素

具有一维数组特征的一组元素的集合

ul : unorder list ol : order list li : list 用于标记一组内容相关，呈列表结构的信息。依列表项之间的关系，分有序和无序。

dl : definition list dt : definition term dd : definition description 用于标记一组术语，包括术语列表，术语项，术语描述，如常见问题列表(FAQ)等

Table Elements 表格元素

具有二维数组特征的一组元素的集合。尽管浏览器通常将它渲染为表格形状，但实际上，如果你为浏览器编写一个插件，则完全可以做到把一个包含有数字的表格渲染为柱状图之类的图表(chart)

table : 表格 caption : 表格标题 thead : table header 表头 th : Table header of column 表列的标题 tfoot : 表足 tbody 表身 tr : table row 表行 td : table data cell 表格单元

通用标记

当没有合适的语义标记可用时，可以使用通用块标记<div>、 通用内联标记<span> 来进行定制

    <div class="toplist">
        <h2>热门下载</h2>
        <ul>
            <li>歌曲1<span class="rating">五星</span></li>
            <li>歌曲2<span class="rating">四星</span></li>
        </ul>
    </div>

完整示例

https://openxyz.github.com/web_front_code/resume/01-html/

参考

results matching ""

    No results matching ""