语义标记

元信息

目标：建立"语义标记刻画内容结构"的核心观念——按内容的角色（标题/段落/列表/表格）选标记而非按外观选标记；掌握块/内联元素的区别与通用标记 div/span 的定位
关键概念：语义、块元素、内联元素、渲染、div、span、列表元素、表格元素
关联阶段：cp1
常见误区：用"有没有换行"区分块与内联元素（块的本质是一段完整语义的终结，换行只是可视浏览器的表现）；没有语义标记可用时滥造标记（应用 div/span 加 class 定制）；只挑"长得像"的标记而不管语义（如 blockquote 当缩进用）

什么是语义?

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

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

渲染：指普通浏览器将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> 来进行定制

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

从OOP的角度理解，已有的语义标记类似于内置的数据类型，而通用标记则相当于自定义的class类，允许开发者创建定制的数据类型

完整示例

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

语义标记 ​

元信息 ​

什么是语义? ​

语义标记的分类 ​

块元素 Block Elements ​

内联元素 Inline Elements ​

List Elements 列表元素 ​

Table Elements 表格元素 ​

通用标记 ​

完整示例 ​

参考 ​