如何让你的网页符合W3C标准？

最新推荐文章于 2024-09-15 14:25:12 发布

原创最新推荐文章于 2024-09-15 14:25:12 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#W3C标准 #如何使你的网页符合W3C标准

Web前端专栏收录该内容

18 篇文章

订阅专栏

W3C标准是由万维网联盟制定的一系列用于规范网页结构、表现和行为的标准集合。包括XHTML、XML、CSS及ECMAScript等，旨在提高网页的兼容性和可访问性。

什么是W3C标准？

     W3C，World Wide Web Consortium，万维网联盟，一个负责制定并维护着我们所熟悉的万维网的诸多标准和协议的组织。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

     目前W3C标准已经成为高端客户设计网站的首选，我们知道国内上网者中，用IE浏览器的比较多，但从国内或全世界的上网客户来看，有些客户并不是用IE来上网的，比如一些其他的浏览工具：Netscape、Mozilla、FireFox、Opera等，如果你的网站不是采用的W3C标准，使用其他浏览器的用户，就无法看到你的网站。即，此标准是国际上通用的标准，符合此标准的网站，能用任何浏览器来浏览你的网站。

如何符合W3C标准？

确保所有的标签都是用小写字母
确保所有的属性都放在引号里
确保所有成对标签出现的顺序、不成对的标签都用/>结束，“/”和“>”之间不要有空格

如何让你的站点标准起来，怎么改善现有网站？

1、为页面添加正确的DOCTYPE

DOCTYPE是document type的简写，主要用来说明你用的XHTML或HTML是什么版本，浏览器根据你DOCTYPE定义的DTD（文档类型定义）来解释页面代码。

XHTML 1.0 提供了三种DTD声明可供选择：
1) 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如 。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3) 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

注：DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

2、设定一个名字空间（Namespace）

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？

这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。

3、用小写字母书写所有的标签

与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body>。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"

4、为图片添加alt属性

例如：<img src="logo.gif" width="100" height="100" align="middle" boder="0" alt="w3cschool" />
尽可能的让作为内容的图片都带有属于自己的alt属性。
同理：添加文字链接的title属性。

<a href="#" target="_blank" title="新闻新闻新闻新闻">新闻新闻…</a>，在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大。

5、给所有的属性值加引号

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例如：<height=80>必须修改为：<height="80">。

特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">

6、声明你的编码语言

注：如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面，第二次打开时所有的中文变成了乱码。

7、关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭，就像这样：

每一个打开的标签都必须关闭。HTML可以接受不关闭的标签，XHTML就不可以。这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是，空标签也要关闭，在标签尾部使用一个正斜杠“/"来关闭。如： <img src="123.gif" />

经过上述七个规则处理后，页面就基本符合XHTML1.0的要求，还可以使用W3C提供的免费校验服务，如下：