1、 前言

在学习html基础的时候，往往需要建立原则性的认识。其中就不乏常被提起或面试常见题目：html语义化的理解以及何为内容与样式分离的原则。在查阅资料的过程中，我发现对这两个问题的理解，对于培养良好的编码习惯和编码思维是非常重要的。于是记录于博客，以作记忆。

2、 问题

1）、怎样理解 HTML 语义化
2）、怎样理解内容与样式分离的原则

3、怎样理解 HTML 语义化

1） 何为语义化

语义化的含义就是用正确的标签做正确的事情，HTML语义化是指根据内容的结构选择合适的标签，也就是根据网页内容将代码语义化。
　　HTML标签语义化是Web网页标准化的重要一环，也是标准制定时重要的设计原则。HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于这样的设计原则。

2）检验标准

浏览器会对语义化的标签设计默认的样式，所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。

３）优点

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

4）如何做到html语义化

A、代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的。所以要做到标签语义化，首先要尽量少用<div>和<span>这两个标签，在使用这两个标签时尽量能找到更有语义的标签代替。
　　网页的开发者应该熟悉所有规范的HTML标签的使用场景，在合适的地方使用合适的标签。
　　例如，标签Hx系列则表示标题，在网页中展示各层级的标题时使用；ul和ol标签表示列表，在展现各种数据列表或者菜单时使用；其它使用率较高的语义标签有：p、em、strong、table、site、blockquote等，以及HTML5新加入的标签：<header><footer><article><section><nav><aside>等。
B、熟悉各标签规范的属性，给HTML标签设置必要的属性。
　　和标签语义化的重要性一样，某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性，这两个属性设置的也是为了提高HTML的语义。

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

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

<form>
    <label for="user_name">User Name：</label>
    <input type="text" name="user_name" id="user_name" />
</form>

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

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样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

参考：
https://segmentfault.com/a/1190000005626375#articleHeader4
http://www.cnblogs.com/lovefan/p/3855513.html
http://www.imooc.com/video/242