小菜鸟集各位高手指点及自学谈谈对WEB标准的理解

相信很多前端的初学者，和我一样对于WEB标准有很多的疑惑，由于知识水平的限制，找不到一条清晰的学习之路，实在是特别难受，今日我就收集整理网络上对于WEB标准的理解，欢迎各位友人指点！

前言

摘自《JavaScript DOM 编程艺术》

近几年来，网页设计工作已经从一种混乱无序和即兴发挥的状态逐渐发展成一种有着成熟的设计原则可供遵循的流水线作业，有越来越多的网页设计人员开始开始采用一种标准化的思路来建立网站，而实现这一标准的思路和方法称为web标准。

1.需要了解的几个概念：

首先要知道web标准是由一系列标准构成的，因为网页由3个部分构成：结构，表现，行为。而每个组成部分都有各自的标准。

结构化语言主要有：XML/XHTML。XML（the Extensible MarkUp language）最初的设计目的是为了弥补HTML语言的不足，以强大的可扩展性满足网络信息的发布，后逐渐用于数据交换和描述。XHTML是为了使HTML过渡到XML的一个手段。

表现语言：CSS ，CSS是Cascading Style Sheets层叠样式表的缩写。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。

行为标准：
   (1)DOM
   DOM是Document Object Model文档对象模型的缩写。DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
    (2) ECMAScript
  ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。

2.必知的web标准：

（1）书写标签必须闭合，标签小写，不要乱嵌套，这样可以提高搜索机器人的搜索几率；

（2）建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离，能提高页面的渲染效率，更快地显示网页内容；

（3）使用样式和标签的分离，使用更合理化的语义标签，使得内容能被更多的用户访问，内容能被更广泛的设备访问，同时也使用更少的代码和组件，从而降低维护成本，改版方便；

（4）不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

 遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

3.更深入的理解web标准：

如何实现Web标准？

结构化文档。行为，表现，内容，三者分离。
具有更好的适应性与扩展性。
并不是说，用CSS进行布局就是标准了。这只是其中一步。

谈到把DIV CSS说成Web标准的普遍说法，其实有些人硬找茬，大家都知道Web标准不只是这些，是思想，是内容和表现分离的主导思想，是结构化代码，而代码中的代表DIV就成了焦点了……
另外，我觉得DIV CSS已经类似于中国语言中的“约定俗称”，大家都知道这层意思了 

----------------------------------------------------------------------

引用脚本之家某位大神写的例子分析：

横导航链接为什么要用UL LI
为什么不直接在一行写上文本链接呢 
列表本身就有列表符号，同时列表项也要分行显示
做成横向的，既要使得不显示列表符号，又要将他们内嵌到一行。
----------------------------------------------------------------------
思维是这样的。什么才是标准。什么叫分离。什么叫结构。
标准是一系列标准。分离的是表现，内容和行为。而内容则决定了结构。
用合适的标签来组织文档，这是内容（结构）的基础。
导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV只是部分与分区。
导航实质上就是一个无序列表。
也就是说，用UL LI来组织导航的内容，更具有语义，具有更好的结构。
至于说，列表项预设标记，与垂直竖向的方式。是撇开不谈的。
只需要建立一个具有良好结构与富含语义的文档即可。
表现，交给CSS完成。
行为，交给JS完成。

4.小小体会
DIV CSS，实际上成为CSS网页布局的代名词。
而CSS网页布局就是WEB标准化构成的一个环节而已。
除了CSS，还要讲结构HTML，讲DOM，JAVASCRIPT等等。
最后就一个结果，要想符合标准，先DIV CSS再说~~~~~~~~~~~~
但并不是DIV CSS，就是标准了。

我们使用Web标准去编写代码，目的应该是让我们的代码效率更高更好，只有本着这个态度去理解Web标准才能体会其深入的内涵。。我们的代码更加规范，更加合乎标准，我们的页面就更容易被搜索引擎抓取收录。

5.附上一个笔试题

有这么一段html代码，请指出代码中的毛病。
 <P>&nbsp;&nbsp;我写的不是HTML代码，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
　      在这段代码当中，第一眼看上去没有明显的语法错误。是的，在html 4.01 strict下是完全正确的，但是在Web标准下，就是xhtml 1.0 strict下就是错误的，不合乎规范。xhtml有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。所以，代码中的<P>要匹配一个</p>,<br>要改成<br/>,其次所有标签必须小写，所以<P>也是错误的，要改成<p>;最后&nbsp;空格符必须包含在容器当中，也是错误的。
 
      （考点1.html 4.01与Web标准xhtml 1.0的差别）
 
        起初，我以为如果能回答到上面所说的错误基本能拿满分了，其实不然，回答完上面的只能及格。Web标准要求的结构与表现分离，而考题当中运用了&nbsp;控制缩进，是错误的，我们应该应用Css来控制文本的缩进，所以&nbsp;应该删掉。
 
      （考点2.结构与表现分离）
 
        最后，还有一处错误，题目当中连续使用两个<br>来制造了两个段落，<br>是强制折行标签，这样做确实达到了两个段落的效果，但是后期段间距不易控制，我们应该合理运用标签。所以正确的做法是我们应该应用两个<p>标签来表示两个段落。
 
      （考点3.合理运用标签）
 
        所以，在xhtml标准下，正确的修改应该是：
 
<p>我写的不是HTML代码，是寂寞。</p><p>我说：<br/>不要迷恋哥，哥只是一个传说</p> 
        这样就完美了吗？不是，还有加分点，为了更符合Web标准，我们应该适当的的运用标签语义化。也就是“我"说的话，可以用<q>标签标注。
 
<p>我写的不是HTML代码，是寂寞。</p><p>我说：<br/><q>不要迷恋哥，哥只是一个传说</q></p> 
　     这样就足够了，标签语义化也应该合理的运用，过分使用也会显得太画蛇添足。当然，如果还要添加，“我”字可以用<cite>标注，“HTML”可以用<abbr>标注：
 
<p><cite>我</cite>写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>代码，是寂寞。</p><p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是一个传说</q></p> 
　　   （加分点：标签语义化）