如何理解html语义化

1.背景介绍

语义化的出现是大势所趋，来看看语义化的前世今生。

对于当前的 Web 而言，HTML 是联系大多数 Web 资源的纽带，也是内容的载体。 在 Web 被刚刚设计出来的时候，开发者可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单：用来发布

Web 内容和资源的索引，方便人们查看。但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂

Web 上发布的各种内容就变得越来越重要。

看一下最初yahoo的网站例子，就会明白为什么会出现HTML语义化了？那时候如果你做了一个网站，需要到各个的网站登陆页面专门登陆，等这些搜索引擎（例如Yahoo）的管理员通过后，他会给你确认放到哪个目录下面，以后人们就按照这个目录去查找！

不仅仅是新网站层出不穷，而且随着各行各业的数字化加之的出现：每个网站的网页数量也成指数的暴增，的那种手工录入的导航方式无法满足人们的需要：覆盖的全面性、及时性都较差，所以它出现了。

​所以史上最大也是最成功的搜索引擎公司诞生了

Google不按照网站而是按照关键词去发现内容，不需要你去登陆网站和网页，而通过蜘蛛主动去抓取。这个变化，成就了截止到现在的Google的辉煌！

以Google为代表的这类信息和知识发现方式无疑极大改变了人类对于信息和知识的获取，仿佛间世界就在你的键盘。但也有问题：内容太多了，我们不知道看什么；找到的内容参差不齐，我们花费了巨额的时间成本，但仍然找不到我们需要的内容。不是说我们的需要内容不存在，而是可能由于某种原因尘封在茫茫的网络大海中，如何更好更快的搜索到我们想要信息？

所以，才出现了HTML语义化。

2.知识剖析

什么是语义化？

字面意思就是说根据我们所说的话，就能了解其中的含义。我说水，你脑海就会出现水，我说长城，你脑海绝不会出现金字塔。 开发上的“语义化”指的是：机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。

什么是HTML语义化？

首先标签语义化是指HTML，不是CSS, 语义化标签只是HTML，CSS不存在语义化。HTML是标签，CSS是属性。

什么是标签语义化？ 来看看最初html里标签的语义，我们看到table,就会知道这是列表，看到p，就知道这是段落，看到img知道是图片，看到input就知道这是一个表单，h1~h6是标题。 机器和人类相比笨多了，但是只要我们设定好程序，上面的标签的意思机器也能读懂。

但是也有些是无语义化的如div---division并不能呢个表示div标签里面内容的属性和表现样式

HTML 标签语义化是让大家直观的通过标签(markup)和属性(attribute)来知道其用途和作用。

判断标签是否语义化

​去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

3.常见问题

实现HTML语义化好处有哪些？

4.解决方案

• 清晰的页面结构。去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
• 支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。
• 有利于SEO。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
• 便于团队开发和维护。在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

5.编码实战

demo

6.扩展思考

<b>、<strong>、<i>、<em>的区别

<b>、<i> 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用。

<em>、<strong>是表达要素(phrase elements)。<em> （emphasized text）表示一般的强调文本，而 <strong> （strong emphasized text）表示比< em > 语义更强的的强调文本。

在新的HTML5工作草案中：<em>和<strong>仍旧是表达要素(phrase elements)。但这时的<strong>表示html页面上的强调（emphasized text），<em> 表示句子中的强调（即强调语义）

7.参考文献

参考一：HTML5新标签

参考二：html语义化PPT

8.更多讨论

什么是网络爬虫？

网络爬虫其实是一种机器人程序，什么是机器人程序，就是替人类做重复性工作的程序，比如说:你得到了一份很无趣的工作，你的老板叫你每天把隔壁竞争对手公司网站主页内容复制下来保存到word给他（也没谁了），接下你会打开浏览器，输入隔壁公司的网址， 进入主页，鼠标一划，然后Ctrl+C 和 Ctrl + V, ，保存world，万事大吉。  突然有一天你公司强大了， 竞争对手范围上升到了50个， 还是重复之前的流程，还好CV大法练得比较纯熟，下班前就完成了，不过想想以后这要是几百个，几千个竞争对手，我的天啊，要累死朕啊！内心极度渴望一种程序可以摆脱这无聊的工作，幸好是个程序猿，所以要写个程序帮我完成这些工作。

 我们怎么设计这个程序呢， 首先我要将50个公司的网址保存起来，循环他每个网址，访问网站，找到内容，保存到本地。就是爬虫程序，名字听起来高大上，其实 爬虫就是帮你解决这些重复的操作 而已

三个问题：

1.<b>、<strong>、<i>、<em>的区别？

<b>、<i> 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用。

<em>、<strong>是表达要素(phrase elements)。<em> （emphasized text）表示一般的强调文本，而 <strong> （strong emphasized text）表示比< em > 语义更强的的强调文本。

在新的HTML5工作草案中：<em>和<strong>仍旧是表达要素(phrase elements)。但这时的<strong>表示html页面上的强调（emphasized text），<em> 表示句子中的强调（即强调语义）

2.语义化的HTML结构怎么写？

　HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不　　是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

3.标签语义化和class命名会产生冲突？ 

解答：这个问题只能这么说，当我们能切需要语义化的时候，我们就是用语义化的标签，当我们写不了或者不支持语义化的时候，只能使用class命名。冲突 应该不会，以为对于爬虫来说，叫它理解class命名很难。