前端之旅-Web语义化以及HTML元素简要介绍

从一份简历开始

一份简单的个人简历包括如下几个内容

“简历”两个字

姓名

联系方式

学历

项目经验

如何制作一份网页简历呢？回想起之前说过，前端的代码中内容和样式是分开的，分别用HTML和CSS描述。我们先写出一份网页简历的结构，至于简历中的每个部分应当以何种方式显示在电脑、手机还是纸张上则是下一篇文章要做的事。

最简单的写法应当是这样的

这样一份简历交给人阅读，费一番眼力后都是可以看得懂的（先不考虑显示样式的问题）。但是这样的代码发给浏览器，浏览器只会解读为一大段文字，结构上并没有更多有意义的信息。

事实上，现在的网页的读者不仅是有智慧的人，还有各类爬虫、自动化工具或者搜索引擎，而机器面对这样丝毫没有结构的东西自然完全没有办法处理。

如果我们在保持上述上述内容不变的前提下，加上一些标记，告诉机器这一句话的语义是什么，语义是说 指的是一个人的名字等等这样的信息。那么机器就可以清楚那一大段文字中的每个信息到底指的是什么，从而可以自动的处理这些信息。

Web语义化通俗的讲，就是要求我们在发布内容时，用标记来指明我们发布的内容的语义。

HTML中指明语义的标记长成 这个样子，两个尖括号中间的内容就被指明了特定的语义。

简单的语义化

于是我们为那份机器看不懂的简历加上了语义

这样机器就能读懂每一句话到底指的是什么内容了。

但是这样依然不够， 那一项中的两个学历明显是并列关系，并且是从属于 的，但是上面写的语义中却没有包含这一重要的结构信息。

在机器看来上面所有的内容都是同样级别的条目，所以我们需要加上描述各个条目之间关系的标记。

注意在以上代码中，我的操作包括

将 放在了 里面，表示这句话描述了整个网页的标题

将 放在了 中，表示这些话描述了作者的个人信息

将 放在了 中，表示这段话是一个结构上的整体

将 的全部内容放在了 中，表示这些话成为了一个列表

标准的语义化

当然，你可以从上述的代码看出最大的问题所在，如果几万个人同时写简历，他们也许会创造出几万种不同的标记出来，这样的话机器就被迫去理解这些个人风格的标记是什么意思，还是做不到机器能够理解网页内容的目标。

于是W3C以及其他很多机构创立了各种规范，通过精心选取几种具有代表性的标记，规范大家的语义标记的用法。只要浏览器、操作引擎以及自动化机器人支持，这些规范都可以在HTML中使用。

我将着眼于介绍W3C提出的HTML5标准。

W3C的官方文档将是最好的参考资料

HTML 语义

HTML语义包括 三个部分，我目前只介绍HTML语义中的部分 ，即 。

注意以下的内容不完整，完整的请参考官方文档。

文档元素

文档元素(document element)只有一个 , 严格地说所有的内容都应当包含到 中。

元素包含 元素以及紧随其后的 元素。

文档元数据

文档元数据(document metadata)包含 元素，描述了这个网页的基本信息，包括标题、字符集、层叠样式表、脚本等等。

区块

区块(sections) 同样包含了很多元素，我只介绍几种将在简历中用到的元素。

body

元素是 元素包含的第二部分内容，指明了文档的内容。不出意外，所有要显示出来的内容全部要放在 中

section

元素表示了文档中的一个块的内容，其中的内容同属一个主题。每个 都应当有标题( - 元素)作为它的子元素。

一个sections的例子，就是一本书的章。 然而如果这部分内容本身是完备的，或者说不是作为更大的内容的一个部分，那么更应该使用 元素。

什么时候使用 有个简单的判据。若你希望元素中的内容包括在文档的提纲(outline)中时， 是合适的。

比如简历的例子中， 和 就适合单独作为 存在。

h1-h6

- 元素表示了六个级别的标题，没错，markdown语言中的 就是被转换为这个元素。

这些元素有自己的权重， 是最高级的标题, 是最低级的标题。

这些标题元素可以被用来创建文件的大纲(outline)。

header

元素描述了最近的父级区块的信息，通常包括了标题元素。

注意 元素并不影响文件大纲的算法，也就是说 不管框住了什么内容，最终生成的大纲都是不受影响的。

分组内容

p

元素表示了一个段落，但是如果有其他更合适的元素，则不应该使用 元素。

address

元素表示了个人或者组织的联系信息，包括联系方式、实际地址等等必要的信息。

在我们的简历中， 应当包含在 元素中，其中每一项用 元素表示。

dl,dt,dd

元素表示名称-值这样的对(term-description)的列表， 每一个名称-值对的列表都可能包含一个或者多个名称( 元素)，以及对应这个名称的多个值( 元素)。

名称-值可以是名称和定义、问题和答案、类别和主题，或任何其他类似的东西。

在简历中，我将所有 的经历放在了 元素中。

还有其他更多元素值得去思考，时间有限就不一一列举了。

最终

最终我给出的简历如下。

可以看到，Web语义化，或者HTML中的元素，很大程度是为了让不那么聪明的机器能够读懂我们写的内容。这在信息海量，而检索愈加重要的今天，这种努力可以说是非常及时且非常重要的。