怎样理解 HTML 语义化？怎样理解内容与样式分离的原则？

怎样理解 HTML 语义化？

什么是HTML的语义，直观的说就是HTML的含义，从HTML代码本身就可以判断包含内容的作用。HTML标签语义化是Web网页标准化的重要一环，也是标准制定时重要的设计原则。HTML5中新增加的很多标签（如：

、

、

和

等）就是基于这样的设计原则。页面标签语义化的优点明显，标签语义化使得诸如搜索引擎以及第三方内容抓取工具等更容易读懂页面代码。机器不会关注页面实际渲染的外观，只会关注页面内容本身，页面渲染的漂亮与否对机器识别毫无帮助。那么具体什么样的页面设计才是语义化的页面？浏览器会对语义化的标签设计默认的样式，所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。

语义化的优点？

1、有利于搜索引擎以及爬虫工具等更容易读懂页面代码。因为机器不会关注页面实际渲染的外观，爬虫是依赖于标签来确定上下文和各个关键字的权重，只会关注页面内容本身，页面渲染的漂亮与否对机器识别毫无帮助。
2、语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。HTML标签是页面内容的载体，语义化的标签相对于是对所包含内容的一个整体声明，也使得页面整体结构清晰。
3、便于团队开发和维护
4、便于开发者阅读和写出更优雅的代码。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

如何做到html语义化？

A、代码中使用的标签

和是在所有的HTML标签中最没有语义的。所以要做到标签语义化，首先要尽量少用

和这两个标签，在使用这两个标签时尽量能找到更有语义的标签代替。
　　网页的开发者应该熟悉所有规范的HTML标签的使用场景，在合适的地方使用合适的标签。
　　例如，标签Hx系列则表示标题，在网页中展示各层级的标题时使用；ul和ol标签表示列表，在展现各种数据列表或者菜单时使用；其它使用率较高的语义标签有：p、em、strong、table、site、blockquote等，以及HTML5新加入的标签：

等。
B、熟悉各标签规范的属性，给HTML标签设置必要的属性。
　　和标签语义化的重要性一样，某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性，这两个属性设置的也是为了提高HTML的语义。

在img标签中，alt是必须要设置的属性，因为img是自闭合标签，并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替；title属性是可选属性，当标签包含的内容不足以说明语义时，可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。

还有一个重要的属性是标签中的for属性。标签是元素定义的标注。标签的for属性值指代一个表单元素，属性值为此表单元素的id值。for属性的作用不仅把标签上的触发事件指向了for属性指代的表单元素，也从语义上绑定了和此表单元素。

怎样理解内容与样式分离的原则？

1）网页分离

一个网页分为三个部分：Html——结构，css——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。

2）如何实现

内容与样式分离的原则的实现，一个是要依靠意识，另一个是依靠经验。
　　举例而言，面对一个分块明显的网页设计图时：

初级的开发人员思路及制作方法：div 层层嵌套；
中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；
高级的开发人员思路及制造方法：最大化的简化 html 的结构，然后用 css 进行设置，减少 html 与 css 的契合度。
正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

3）分离原则的优点

浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。