1.背景介绍
看一下最初yahoo的网站例子,就会明白为什么会出现HTML语义化了?那时候如果你做了一个网站,需要到各个的网站登陆页面专门登陆,等这些搜索引擎(例如Yahoo)的管理员通过后,他会给你确认放到哪个目录下面,以后人们就按照这个目录去查找!
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.更多讨论
什么是网络爬虫?
三个问题:
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命名很难。