html 样式功能相分离,怎样理解 HTML 语义化和样式分离

根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。简单来讲是让代码更方便理解，更简洁，脱离了CSS还能看懂页面。

随着互联网的发展，WEB承载越来越多的信息(图片，声音，视频等)，人们开始用机器来处理网络信息，就此诞生了搜索引擎。如此庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。

语义化可以带来的好处：

清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。

支持更多的设备：屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

内容与样式分离的原则

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