Web标准详解

WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

结构标准：相当于人的身体。html就是用来制作网页的。

表现标准：相当于人的衣服。css就是对网页进行美化的。

行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的。

1、Web标准的三个规范

(1)结构(Structure)

①HTML
HTML英语意思是：Hypertext Marked Language，即超文本标记语言,使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。是一种最为基础的语言。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字属性>”来表示。

②XHTML
XHTML是HTML向XML的过渡语言，删除了部分表现层的标签，标准要求提高，有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。

③XML
XML（eXtensible Markup Language）即可扩展标记语言，最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。

(2)表现(Behaivor)

表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以使页面的结构标签更具美感、网页外观更加美观。

(3)行为(Presentation)

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

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

②ECMAScript
ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

2、Web标准示例

<P> 我写的不是HTML代码，是寂寞。<br><br> 我说：<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标准要求的结构与表现分离，而考题当中运用了控制缩进，是错误的，我们应该应用Css来控制文本的缩进，所以应该删掉。

考点2.结构与表现分离

最后，还有一处错误，题目当中连续使用两个<br>来制造了两个段落，<br>是强制折行标签，这样做确实达到了两个段落的效果，但是后期段间距不易控制，我们应该合理运用标签。所以正确的做法是我们应该应用两个<p>标签来表示两个段落。

考点3.合理运用标签

所以，在XHTML标准下，正确的修改应该是：

<p>我写的不是HTML代码，是寂寞。</p><p>我说：<br/>不要迷恋哥，哥只是一个传说</p>

这样就完美了吗？不是，还有加分点，为了更符合Web标准，我们应该适当的的运用标签语义化。也就是“我"说的话，可以用<q>标签标注。

<p>我写的不是HTML代码，是寂寞。</p><p>我说：<br/><q>不要迷恋哥，哥只是一个传说</q></p>

这样就足够了，标签语义化也应该合理的运用，过分使用也会显得太画蛇添足。当然，如果还要添加，“我”字可以用<cite>（<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。）标注，“HTML”可以用<abbr>（缩写，属性为title全称）标注：

<p><cite>我</cite>写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>代码，是寂寞。</p><p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是一个传说</q></p>

加分点：标签语义化

综上，我们使用Web标准去编写代码，就像我前面说的，目的是write less，do more。我们的代码更加规范，更加合乎标准，我们的页面就更容易被搜索引擎抓取收录。

web标准有关XHTML代码规范:

1.所有的标记都必须要有一个相应的结束标记；

以前在HTML中，你可以打开许多标签，但在XHTML中这是不合法的。XHTML要求有
严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。

2.所有标签的元素和属性的名字都必须使用小写；

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示 :
　　任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
　　任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
　　任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
6.给所有属性赋一个值，XHTML规定所有属性都必须有一个值，没有值的就重复本身。

7.不要在注释内容中使“--”，“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。

3、对W3C的认识

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构的要求

1）标签字母要小写

2）标签要闭合

3）标签不允许随意嵌套

2.对于css和js的要求

1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

4、Web标准之可访问性、可用性、可维护性

1)可用性：

产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。

2)可维护性：

一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码，对企业的长期发展非常重要。

3)可访问性：

在《Web Content Accessibility Guidelines 1.0（Web内容可访问性指南）》里，对可访问性的描述是：Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明：提高可访问性也能让普通用户更容易理解Web内容。具体而言，要考虑以下两方面：

无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。在Google, 专门聘请了一些残障雇员，来帮助提高产品的可访问性。
还得考虑用户访问Web内容时的环境限制。比如：嘈杂的环境、过暗或过亮的房间、或者是免提等各种情况。这是更高一层次的可访问性要求，做到了，能造就产品在特定领域的核心竞争力。

实现可用性、可访问性的方法

逐步强化你的网站功能，同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。
允许用户关闭有问题的增强功能。
提供相同内容或功能的替代版本。
就客户端需要支持的技术向你的客户提出建议，并举例说明哪些公司的产品支持这些技术。

四个可访问性标准（WCAG 2.0）

可感知：人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如，图像应该有文本对应体。
可操作：人们可以与 web 应用程序或内容进行交互。例如，用户应该可以不用鼠标也能与某个网站进行交互，并且可以通过屏幕阅读器来进行导航。
可理解：使用者可以弄懂页面内容和用户界面。例如，正文不应该比它需要的更加复杂，且网站应以可预测的方式来运行。
健壮性：所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务，这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如，不同设备上的浏览器能够一起使用网站，且导航应该是一致的。

web标准的优点：

代码的效率：
在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小，下载文件需要的时间就越短。
易于维护：
页面的样式和布局信息保存在单独的CSS文件中，如果你想改变站点的外观时，仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。
可访问性：
上网用户中那些视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让此类用户更容易导航，且网页文件中的重要信息也更有可能被这些用户找到。
设备兼容性：
纯HTML，无附加样式信息，可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要引用一套另外的样式表即可。同时，CSS本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。
*网络爬虫/搜索引擎：搜索引擎使用“爬虫”，解析你的网页。语义化的HTML能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响