想看看演员卸妆后的模样吗？
Hi，您好，非常高兴认识你！
坐在电脑屏幕前的你或者是对着手机屏幕的你一定知道HTML，如果您并非计算机专业毕业并且也没有从事过计算机相关职业那么你极有可能一脸迷惑：What's the hell?简单来说，HTML就是网页文本，你现在在屏幕种看到的就是网页文本，当今互联网90%以上的数据传输都是HTML格式，可以说在当今所有主流电子通信设备中，HTML都是最主要的数据传输格式。你每天都喝水，你可能不知道水的化学式是H2O，但你每天上网，你不应该不知道HTML，因为你如果爱好上网，那你极有可能每天浏览HTML的次数比喝水的次数要多得多。
我假如你现在已经稍微有那么一点兴趣了。你可能就要想了，前文提到HTML就是网页文本，那我再熟悉不过了，各种网页，八卦，新闻，视频，音频，各种资源链接，限制级的，非限制级，打码的，不打码的。没错，这些都是HTML，不过你可能没有注意到你平时看到的HTML都是通过一个特殊的舞台呈现的，这个舞台叫做浏览器。演员们都各司其职，化妆浓浓的妆，按照事先策划好的剧本给你上演一场视听盛宴。可是这些就是它们的全部吗？演员们的真实面目又是怎样的？演员的职责是谁分配的？剧本又是谁策划的？你想了解他们吗？我鼓励你撤掉浏览器舞台，在记事本中打开一个网页，看看演员们卸妆后的模样。
本文讲述HTML语义化。不管对于初学者还是有这方面工作经验的人来说，都是一个不错的开始。
什么是HTML？
HTML全名为Hyper Text Marked Language，中文翻译为超文本标记语言。听起来非常专业非常复杂。你首先一定要知道什么是文本。你打开一个记事本在键盘随便打几个字，显示在屏幕上，那就是文本。文本就是有限的字符集合。那么超文本可以理解为文本的超集，它兼具文本的功能，同时它还具备比普通文本更强大的功能。超文本比普通文本多出的那部分功能我们称之为标记。具体到每一个单独的标记元素我们称之为标签。HTML有一个强大而丰富的标签库，这个标签库正是HTML的核心所在，也是HTML在前端网页中与JavaScript，CSS并称为世界上三大语言的底层基石。
什么是标签？
在HTML中，标签是运行时DOM树的静态描述，它定义了运行时DOM中每一个节点的基本信息，是HTML文档结构中最基本的组成单元。关于标签库中的每一个标签的具体用法可以去相关网站（如：MDN）进行查阅。
什么是语义化？
语义是指由文字承载的，向人们传达一些具体概念的信息。意在给一个混乱的系统建立清晰的秩序。比如世界上的所有东西都名字，没有名字的我们就不能理解它。在HTML中，语义化标签能够使我们从标签名所代表的语义上就能判断出文档整体的逻辑结构而不需要检查标签中的具体内容。
传统的语义化和现在的语义化
我们来看一些传统的标签：<div>,<span>,<img>,<input>,<form>，<body>。。。还有很多，就不一一列举。这些元素有没有语义化？当然是有的。比如div，它的语义表示它是一个层，‘层’就是它的语义。再比如input标签，它的语义表示这是一个输入项，它的值将通过form提交到服务器。可是为什么明明我们所有的标签元素都有它独特的语义，我们却还在强调语义化呢？
代码：
<div>
<div><H1>title</H1></div>
<div><p>content</p></div>
</div>
阅读上面的代码，我们不难发现，当我们通过DOM树逐层浏览各层级的DOM节点时，我们很难通过DOM节点本身名称所代表的语义来判断该网页在表现层的逻辑结构，直到我们浏览到内容，我们才知道，这是一篇文章，有标题，有内容。
我们再看下面的代码：
<article>
<header><h1>title</h1></header>
<section><p>content</p></section>
<footer><address>linker</address></footer>
</article>
我们可以试想下现在有一个爬虫程序在抓取网页内容，当它抓取第一段网页时，它不得不遍历所有div里的内容以找出与之匹配的关键字。而抓取第二段网页时它只需要get到header里的内容就可以了，因为标签的语义已经表明这是一篇文章，有头部，内容区和尾部，而通常一个文章的关键字就包含在它的头部。
一些偏见
关于语义化，我们需要纠正一些偏见。比如一般的认为传统的标签没有语义化，很明显这是不对的，任何标签都有语义化。不过传统的标签更多地是针对实现层的语义化，我们现在强调的语义化是针对表现层的语义化。两者的区别在于实现层语义化强调底层实现，比如div，它对于表现层的语义来说没有太多意义，就是一个层。一个层可以代表很多含义，可以表示文章的头部，中部和尾部，几乎可以代表任何含义。但是对于实现层来说，它意义重大，首先它是一个block区块，接下来还要判断它是不是一个BFC，是否需要独立渲染。你有没有发现，对于实现层来说，它完全不需要关心表现层的意义，它只需要把一个一个div渲染出来就好了，我管你表现层是啥呢？实际上一些传统的标签里也有一些表现层语义的标签，比如非常典型的h1~h6标签，它就具有很明显的表现层语义，表示的是标题。只不过呢，表现层语义化标签在传统标签中占比较少，没有形成一个独立的系列，不能产生具有表现层语义的文档结构，因此也就没有受到大家的重视。我们目前所强调的语义化就是表现层的语义化。这主要因为随着搜索技术优化和发展，人们发现语义化的网页能极大的加快搜索速度。这是非常容易理解的，语义化网页只需搜索引擎从关键节点中获得少量信息就能完成搜索，而非语义化网页需要对网页进行全文检索，这种速度的差距还会随着网页内容的增加而指数级增长。因此对于搜索引擎来说，这将节省巨大的网络带宽，对于整个互联网来说，意义也十分重大。至于网页语义化的另外的优点，我认为倒还是次要的。比如语义化增加了代码的可读性。个人认为如果语义化仅有这一点好处，实际上就没有必要做语义化，因为传统的div+css布局也能写出可读性很好的代码，可读性好坏更多取决于开发者的个人能力和编程习惯。实际上如果你个人的代码规范做得不太好，而且对于语义化的理解也还不够深入，那么你虽然用了语义化标签，但写出来的代码的可读性仍然非常差。这是极有可能的事。语义化在代码可读性上仅仅可以说做到锦上添花，而在节省带宽和提高搜索性能上绝对可以称得上雪中送炭。
关于语义化，你还有什么疑问呢？那么现在让我们看看目前流行的一些语义化方案吧！
1.文本语义化
ruby在日文中的含义为注解，在html中这就是它的语义。此为文本注解，可视为文本语义化方案。比如给生僻字添加读音标注。
例如：
<p>我要<ruby>暴打<rt>摸摸</rt></ruby>你</p>
2.标题摘要语义化
h1~h6
这是一种比较古老的表现层语义化标签，和HTML本身一样历史悠久。因为形单影只，没有形成体系，不能形成具有表现层语义化的文档结构。因此长久以来一直默默无闻。随着近年来一大波具有表现层语义化特性的新型标签的加入，h系列标签也终于找到了自己归属，重新焕发了新的活力。至于它的用法，就不用多说了。
3.结构语义化
如<article>,<section>,<nav>,<header>。。。等。随着这一系列结构语义化标签加入到HTML标签阵营中，表现层的语义化越来越得到人们的重视。在实现层，这一类标签和div标签几乎没什么两样，但是在表现层，他们有别于传统的div标签，它们通过自己的名称能够语义化地描述文档结构，从而在结构层面给浏览器或搜索引擎提供更多文档信息，而这对于浏览器和搜索引擎都是非常重要的。结构语义化标签是我们目前流行的语义化方案的核心所在。关于这些标签的用法以及如何通过这些标签构建具有语义结构的网页，我们可以参阅MDN等相关网站，里面有相当详尽的描述。
一些误解
有人认为HTML很简单，不就是写标签吗？多简单的事，不会的就去查阅文档就行。实际上网页的三大语言HTML，CSS,JavaScript都是典型的入门简单，精通困难的语言。这三种语言的一个共同特点是语法规则都很简单，尤其是HTML，CSS，基本上可以现学现做。JavaScript毕竟是一门编程语言，相对来说复杂一些，但和一些传统的高级语言来比，仍是非常简单且容易上手的。在编程语言中有一个很普遍的现象就是规则越简单越是难以精通。汇编简单吧，汇编语法你可以在一小时内掌握。SQL简单吧，SQL语法你花一天时间也能掌握。实际上敢拍着胸脯说自己精通汇编或SQL的人真的非常少，哪怕你工作10多年以上。为什么会规则越简单越难精通呢？一般来说，我们的程序总是需要实现各种各样的逻辑处理，规则简单意味着单条规则所需要承载的信息处理将更加复杂，它需要处理各种不一样的情况将更多，而这些情况通常都是不能明确定义的。这种不确定性就增加了程序的复杂性。因此不能简单地认为一门程序语言规则简单就认为它真的简单，更可能的是因为你仅仅停留在简单阶段。
关于知识的积累，有一个很好的说法，说是知识的累积就像一个不断扩张的圆，累积得越多，圆的面积越大，同时圆的外围所接触的未知领域也越多。因此高手总是越学越谦虚，因为他真的发现自己不懂的越来越来多，尽管他懂的也越来越多。
好了，就到这里吧，关于语义化，您可能有自己的真知灼见，给我留言吧！大家一起讨论，一起进步。那么下一篇文章见。。。
网友评论