小伙伴们大家好，最近在看boss上的招聘信息，其中有一个要求是-对表现和数据分离、web语义化有深刻理解。这2个问题，看似平淡无奇。实际上对这2个问题认识和理解深度，正好体现出了你的前端架构思维和编码素质。
下面先让我们认识一下“表现与数据分离”
大家都知道网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。所以W3C对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
W3C这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。W3C的标准不是某一个标准，而是一系列标准的集合。
下面是w3c官网详细的介绍，让你更通俗易懂的了解w3c的标准：
结构标准语言
1.标签的书写，需要开始和结束。单便签除外；
2.块级元素不能放在p标签里面。li内可以包含div标签；
3.块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性；
4.内联里面要放内联，不要放块；
5.结构与表现分离；
6.命名一定要规范；
表现标准语言
css的书写，首先要尽可能使用外部引入的方式，因为结构层尽可能的减少表现层的代码过多出现。达到分离的目的。
css的选择器有哪些，那些属性可以继承，那些不可以继承。他们之间的优先级是怎么样的。怎么用最简洁的css代码表达设计者的想法，而不只是实现设计者的想法就没事了。我们要的是代码简洁，代码过多，反而让浏览器解析很多，浪费时间。
行为标准
主要是javascript中的知识。比如DOM、ECMAScript。使用javascript中的标准，即可。一般对于用户的行为，或者说页面上的动态效果的一些特殊实现，我们可以会考虑到使用javascript来进行书写，但是代码的可复用性，模块化。变量，作用域。
表现与数据分离：
表现：顾名思义，就是表达出来的现象，在前端来看，就是html+css，就是平常所看到的的网页的架子；
数据：一般是从后端数据库或从哪爬过来的数据，然后在前台显示出来，即是网页中各个结构上的内容；
说到这，你会有疑问了，其实就是MVC。
实现表现与数据分离的好处与代价是什么？
好处：模块化 –> 容易测试 –> 降低bug频率；
坏处：程序结构复杂，比较耗时，上手有学习曲线；
什么样的场景下需要用到这种思想？
需要：项目具有明显的数据需求，比如要与很多Service交互，业务流程复杂，表单很多；
不需要：项目是典型的静态信息展示型页面，或是微型的内部app，或是产品idea验证时期的MVP；
什么是Web语义化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。简单来说就是利于 SEO，便于阅读维护理解。
html 语义化标签
html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。
<article>
<header>
<h1>web 语义化</h1>
<p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
</header>
<p>文章内容..</p>
<article>
<h2>评论</h2>
<article>
<header>
<h3>评论者: 专业水军</h3>
<p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
</header>
<p>还行</p>
</article>
<article>
<header>
<h3>评论者: love</h3>
<p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
</header>
<p>楼上说的对</p>
</article>
</article>
</article>
总之，HTML语义化是反对大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。
CSS语义化
CSS语义就是class和ID命名的语义。class属性作为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减少沟通调试成本，易于理解。
CSS命名首先要满足W3C的命名规范和团队的命名规范。其次是高效和可重用性。
