HTML语义化&HTML5

HTML/CSS

1、什么是HTML语义化？

  就我自己理解来说，HTML是超文本标记语言。语义化就是让我们清楚整个页面的结构，不论是从代码还是文本内容，不仅要我们人清楚，也要让机器清楚。纯HTML不带样式的时候，我们也能通过代码知道标签标记的是什么内容。比如H标签，我们知道这是一个标题，p一个段落，table表格，form表单等等。HTML5更加注重语义化，新增了很多语义化的标签，如header、nav、footer、article等。关于语义化一些更多的内容可以看这个如何理解 Web 语义化？

2、为什么要语义化？

  在此之前，我写代码也基本上是全篇用div+css实现整个页面结构的，既然我们使用div+css就可以了，为什么还要使用语义化呢？

  从实现的效果上看，使用语义化的代码和div+css的代码并没有区别，但是代码不仅是给人看的，机器也要看。从维护上面来说，语义化标签比满篇div更好维护，在页面出问题时，语义化会更加的友好。

  语义化的好处在于建立起好的HTML结构，使搜索引擎更容易建立索引、抓取。另外就是结构清晰，便于开发人员维护。（大厂的做法，比如阿里的淘宝在div+css实现之余，也会用一些语义化的标签进行强调）

3、语义化代码应该注意些什么？

  • 尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

  • 不要使用纯样式标签，如：b、font、u等，改用css设置。需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、常用的一些HTML语义标签

  • <h1>~<h6> ，作为标题使用，并且依据重要性递减，<h1> 是最高的等级。

  • <p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。

  • <ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表不常用。在 Web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。

  • <dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用，它通常与dt和dd一起使用。dl开启一个定义列表，dt表示要定义的项目名称，dd表示对dt的项目的描述。

  • <em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。

  • <table>、<thead>、<tbody>、<td>、<th>、<caption>， 就是用来做表格不要用来布局

5、HTML5新增语义标签

  • header元素：header 元素代表“网页”或“section”的页眉。

  • footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

  • nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

  • aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

  • section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。

  • article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

6、关于HTML5

  HTML5对于用户来说，提高了用户体验，加强了视觉感受。HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。HTML5的视音频新技术解决了移动端苹果和安卓4.0+，对flash的支持问题。在视音频方面，性能表现比flash要更好。网页表现方面，HTML5中的CSS3特效样式、Canvas、webgl的介入，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。
  对于开发者来说，HTML5技术跨平台，适配多终端。传统移动终端上的Native App，开发者的研发工作必须针对不同的进行，成本相对较高。Native App对于用户还存在着管理成本、存储成本以及性能消耗成本。HTML/JavaScript/所开发的应用只要一次开发就能进入所有进行分发。即使是走传统的App Store应用商店渠道，只需要再将底层用HTML5开发的应用“封装”为App，从时间和上讲远小于跨系统移植。
  对于来说，HTML5新增的标签，使更加容易抓取和索引网页，从而驱动网站获得更多的点击流量。也就是上文提到的语义化。