对W3C标准，对表现与数据分离、Web语义化等有深刻理解

看了好多微博总结了一下概念，首先先介绍一下W3C?

啥是W3C不是wc，这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能，指万维网联盟（World Wide Web Consortium）一个很牛x的组织。

代码标准 w3c官网也可以借鉴w3school对W3C的理解，W3C的标准不是某一个标准，而是一系列标准的集合。

因为网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。所以W3C对应的标准也分三方面：结构化标准语言主要包括Xhtml和XML，表现标准语言主要包括css，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。下面是w3c官网详细的介绍：让你更通俗易懂的了解w3c的标准

结构标准语言

1.标签的书写，需要开始和结束。单便签除外； 
2.块级元素不能放在p标签里面。li内可以包含div标签； 
3.块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性； 
4.内联里面要放内联，不要放块； 
5.结构与表现分离； 
6.命名一定要规范；

素材公社https://www.wode007.com/sites/73209.html 爱图网https://www.wode007.com/sites/73208.html

表现标准语言

css的书写，首先要尽可能使用外部引入的方式，因为结构层尽可能的减少表现层的代码过多出现。达到分离的目的。css的选择器有哪些，那些属性可以继承，那些不可以继承。他们之间的优先级是怎么样的。怎么用最简洁的css代码表达设计者的想法，而不只是实现设计者的想法就没事了。我们要的是代码简洁，代码过多，反而让浏览器解析很多，浪费时间。

行为标准

主要是JavaScript中的知识。比如DOM、ECMAScript。使用JavaScript中的标准，即可。一般对于用户的行为，或者说页面上的动态效果的一些特殊实现，我们可以会考虑到使用JavaScript来进行书写，但是代码的可复用性，模块化。变量，作用域。

表现与数据分离：

 

表现：顾名思义，就是表达出来的现象，在前端来看，就是html+css，就是平常所看到的的网页的架子； 

数据：一般是从后端数据库或从哪爬过来的数据，然后在前台显示出来，即是网页中各个结构上的内容；

 

说到这，你会有疑问了，其实就是MVC。0.0

实现表现与数据分离的好处与代价是什么？ 

好处：模块化 –> 容易测试 –> 降低bug频率； 
坏处：程序结构复杂，比较耗时，上手有学习曲线；

 

什么样的情况下需要用到这种思想？ 

需要：项目具有明显的数据需求，比如要与很多Service交互，业务流程复杂，表单很多； 

不需要：项目是典型的静态信息展示型页面，或是微型的内部app，或是产品idea验证时期的MVP；

 

如何有效的实践这种思想？ 

学习开发 –> 学习测试 –> 学习“测试驱动开发” –> 学习真正的开发； 

不会测试而夸夸其谈表现与数据分离的人，你离他们要远一点，哪天项目搞砸了，别连累到你；

　　

web语义化

在广义方面

对于当前的 Web 而言，html 是联系大多数 Web 资源的纽带，也是内容的载体。在 Web 被刚刚设计出来的时候，Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单：用来发布 Web 内容和资源的索引，方便人们查看。

但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。

其实 html 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地，机器也要借助 html 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 html 文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况，出现了两种观点：

1.我们可以让机器的理解能力越来越接近人类，人能看懂、听懂的东西，机器也能理解； 
2.我们应该在发布内容的时候，就用机器可读的、被广泛认可的语义信息来描述内容，来降低机器处理 Web 内容的难度（html 本身就已经是朝这个方向迈出的一小步了）。

 

在代码编译方面

最初的html中如h1~h6、thead、ul、ol等标签，通过标签的语义，最初设计的想法，来达到语义化的要求。如标题、表头、无序、有序列表，搜索引擎很好的利用了这些语义化标签抓取内容

后来，最初定义的html语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用html标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id=”footer”或者class=”footer”的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。

制定HTML5的W3C组织采用了诸如header、footer、section等语义化标签，来进行页面布局的设计想法，弥补了采用id=”header”或者class=”section”等。

更深层次的语义化，是自己在团队合作的过程中，对于需要声明的变量和class，id。尽可能使用彼此能理解的英文。这样减少合作的成本，加快合作的效率。

实现表现与数据分离的优点和缺点：
       优点是： 模块化 --> 容易测试 --> 降低bug频率
       缺点是：程序结构复杂，比较耗时，上手有学习曲线
应用场景：
       项目具有明显的数据需求，比如要与很多Service交互，业务流程复杂，表单很多
非应用场景：

      项目是典型的静态信息展示型页面，或是微型的内部app，或是产品idea验证时期的MVP。