如何让你的网站符合W3C标准
2010-09-07 08:48
411 查看
网站要通过W3C标准，需要注意以下几个问题：
1.XHTML 1.0文件类别宣告的正确写法 (不可小写)
A:过度标准（Transitional）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
B:框架标准（Frameset）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
C:严格标准（Strict）
包含以上须注意的问题,还有其他更严格的标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
2.头文件问题
所有的网页头文件都一律都改为W3C标准形式，写法如下：
<head>
<meta http-equiv="content-type" c />
<meta http-equiv="content-language" c />
<meta name="keywords" c />
<meta name="description" c/>
<title>...</title>
</head>
3.不允许使用target="_blank"
在HTML4.01可以使用target="_blank",但XHTML1.0是不被允许的.
比如原来这样写的代码：<a href="document.html" target="_blank"> 打开一个新窗口</a>
现在需要写成这样：<a href="document.html" rel="external">打开一个新窗口</a>
这是符合strict标准的方法。
当然还必须配合一个javascript才有效。javascript完整的代码JS如下:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;
然后把它保存成一个.js文件(比如open.js)，再通过外部联接方法调用：
<script type="text/javascript" src=\'#\'" /script>
4.XHTML 1.0要求所有的标识必须关闭
所有没有成对的空标识必须以 /> 结尾
<p></p>和<a href="index.html"></a>这就是成对
错误 <br> <hr>
正确 <br /> <hr />
错误 <input type="text" name="name">
正确 <input type="text" name="name" />
错误 <meta ...>
正确 <meta ... />
错误 <link rel="stylesheet" type="text/css" href="style.css">
正确 <link rel="stylesheet" type="text/css" href="style.css" />
错误 <img src=\'#\'" border="0" alt="说明文字">
正确 <img src=\'#\'" border="0" alt="说明文字" />
5.所有标识元素名称都使用小写
错误 <HTML> <TITLE> <HEAD> <BODY>
正确 <html> <title> <head> <body>
错误 <IMG SRC=\'#\'" BORDER="0" ALT="说明文字">
正确 <img src=\'#\'" border="0" alt="说明文字" />
错误 <UL><LI></LI></UL>
正确 <ul><li></li></ul>
以上只是举例,是"所有"标签元素名称都必须是小写
6.同一个id选择器不可重复使用一个网页中id="xx"同一个选择器不能重复使用,若需要重复请用class="xx"
7.W3C标准标识必须是成对的
<p> </p> <span></span> <div></div>
8.正确的标识顺序
错误 <b><i>文字</b></i>
正确 <b><i>文字</i></b>
9.JS写法
Javascript我们通常会写为
错误 <script language="javascript">
W3C标准必须为程式指定类型type=text/javascript,所以要写为
正确 <script type="text/javascript">
或者 <script language="javascript" type="text/javascript">
载入外部.js：
正确 <script type="text/javascript" src=\'#\'" /script>
10.绝对不可省略双引号或单引号
错误 style=font-size:9pt
正确 style="font-size:9pt"
错误 <img src=bg.gif width=140 height=30 alt=text />
正确 <img src=\'#\'" width="140" height="30" alt="text" />
错误 <a href=home>text</a>
正确 <a href="home">text</a>
11.W3C标准规定图片标识加上文字说明alt="图片说明"
错误 <img src=\'#\'" height="50" border="0" />
正确 <img src=\'#\'" height="50" border="0" alt="说明文字" />
12.背景音乐不允许使用 bgsound 标签，不过我们依然可以用JavaScript来解决这个问题。js代码如下：
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=背景音乐地址 LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=背景音乐地址 AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// end -->然后保存成.js文件(比如background_music.js)，通过外部联接方法调用它
13. <embed>标识的争议
<embed>是Netscape的私有标识,W3C标准从HTML3.2 HTML 4.01 到 XHTML 1.0 中都没有这个标识,所以使用<embed>的页面是不能通过标准测试。
W3C标准推荐使用 <object> 标识,用<object>插入flash影片的代码可以写为:
<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
<param name="movie" value="index.swf" />
</object>
但这样的写法可能IE5/IE6 Win浏览器版本会出现问题.
<embed>标识因为广大的受到运用,不再标准范围引起很大的争议,想要解决这个问题,只能等IE浏览器对<object>有更好的支持或者W3C愿意收录<embed>标识。
14. W3C标准规定不允许使用框架标签<IFRAME>
用JavaScript解决问题了。javascript完整的代码如下：
function ifr(url,w,h){document.write(’<iframe id="ifr" name="ifr" width="’+w+’" height="’+h+’" border="0" frameborder="0" scrolling="no" src=\'#\'" /iframe>’);} 然后把它保存成一个.js文件(比如iframe.js)，然后通过外部联接方法调用：<script type="text/javascript" src=\'#\'" /script> 在你需要插入框架的地方写以下代码即可：<script type="text/javascript">ifr(’需插入的网页地址’,’567’,’485’);</script> 函数ifr()使用说明：ifr(’这里写地址’,’这里写宽度’,’这里写长度’,)
15.google广告问题
google广告的代码是不符合W3C标准的，只好又把它转成JS调用，但GOOGLE政策里是写着不允许修改代码的，
关于这点只能等待看看在以后会有什么修改了。JS文件(google.js)代码如下：document.writeln("<script type=\"text\/javascript-:special:1:-><!--");
document.writeln("google_ad_client = -:special:1:-pub-0538745384335317-:special:1:-;");
document.writeln("google_ad_width = 125;");
document.writeln("google_ad_height = 125;");
document.writeln("google_ad_format = -:special:1:-125x125_as-:special:1:-;");
document.writeln("google_ad_type = -:special:1:-text_image-:special:1:-;");
document.writeln("\/\/2007-06-29: http://www.100byte.com/");
document.writeln("google_ad_channel = -:special:1:-4751988107-:special:1:-;");
document.writeln("google_color_border = -:special:1:-1a1a1a-:special:1:-;");
document.writeln("google_color_bg = -:special:1:-1a1a1a-:special:1:-;");
document.writeln("google_color_link = -:special:1:-d0eb6a-:special:1:-;");
document.writeln("google_color_text = -:special:1:-ffffff-:special:1:-;");
document.writeln("google_color_url = -:special:1:-8ad459-:special:1:-;");
document.writeln("google_ui_features = -:special:1:-rc:6-:special:1:-;");
document.writeln("\/\/-->");
document.writeln("<\/script>");
document.writeln("<script type=-:special:1:-text\/javascript-:special:1:-");
document.writeln(" src=-:special:1:-http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js-:special:1:->");
document.writeln("<\/script>")
各位可以按照自己的情况修改，网上也有许多把HTML代码转为JS代码的地方。最后在需要挂广告的地方放入代码 <script type="text/javascript" src=\'#\'" /script>
16.W3C标准注解文字不可包含--符号
错误 <!-- index--box -->
正确 <!-- indexbox -->
小贴士：在样式表的注释中注意尽量避免用中文
17.正确使用CSS样式表
样式表放在文件本身的时候，一定要放在<head></head>之间
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
body{font-size:9pt;}
-->
</style>
注意：
错误 <style> 正确 <style type="text/css">
18.使用表格常犯的错误
在做表格通常会指定宽与高,例如:<table border="1" width="300" height="100">
<tr><td> 内容 </td></tr>
</table> 这样做是没有办法通过,可使用CSS来控制标识元素的高度.table{ height:100px; }<table class="table"><tr><td> TEXT </td></tr> </table> 但若使用太多表格,在CSS一一指定不同高,也不是好方法其实很简单将高度height属性指定在储存格就可以了通过测试
<table border="0" width="300"> <tr><td height="100"> TEXT </td></tr> </table> 但这不是W3C标准,建议多使用div代替不必要的table
19.非标识一部分的符号以编码表示(窗体内包含以下符号也必须用编码表示)
< 以 < 表示
> 以 > 表示
& 以 & 表示
程序中的连结 & 也要改用 &
错误 <a href="foo.cgi?chapter=1§ion=2">
正确 <a href="foo.cgi?chapter=1§ion=2">
20.所有属性都必须有值
XHTML1.0规定所有属性都必须有值, 若没有就必须重复属性作为值
错误 <input type="radio" value="v1" checked name="s1" />
正确 <input type="radio" value="v1" checked="checked" name="s1" />
错误 <option selected>S1</option>
正确 <option selected="selected">S1</option>
错误 <td nowrap>
正确 <td nowrap="nowrap">
1.XHTML校验
校验网址：http://validator.w3.org/
校验方式:网址校验、文件上传校验
校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!"。
校验失败，会显示更多校验选项和错误信息。
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
XHTML校验常见错误原因对照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写，要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个</li>其他<li>标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。
2.CSS2校验
校验网址：http://jigsaw.w3.org/css-validator/
校验方式:网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。
校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。
CSS2校验常见错误原因对照表
(错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090
(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px
(错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer
(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
(警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。
如何符合w3c规范？
1、 确保所有的标签都使用小写字母
2、 确保所有的属性值都放在引号里
3、 确保所有成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格
如何让你的站点标准起来,怎么改善现有网站
我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。
1．初级改善
* 为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：
(1)过渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。
Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。
* 设定一个名字空间（Namespace）
直接在DOCTYPE声明后面添加如下代码：
<html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
* 声明你的编码语言
为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。
* 用小写字母书写所有的标签
XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：
<TITLE>公司简介</TITLE>
正确的写法是：
<title>公司简介</title> 同样的，<P>改成<p>，<B>改成<b>等等。这步转换很简单。
* 为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：
<img src=\'#\'" alt="logo_unc_120x30.gif">
正确的写法：
<img src=\'#\'" alt="UNC公司标志，点击返回首页">
* 给所有属性值加引号
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例：height="100"，而不能是height=100。
* 关闭所有的标签
在XHTML中，每一个打开的标签都必须关闭。就象这样：
<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标，XHTML就不可以。</b>这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：<br /> <img src=\'#\'" />
1.XHTML 1.0文件类别宣告的正确写法 (不可小写)
A:过度标准（Transitional）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
B:框架标准（Frameset）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
C:严格标准（Strict）
包含以上须注意的问题,还有其他更严格的标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
2.头文件问题
所有的网页头文件都一律都改为W3C标准形式，写法如下：
<head>
<meta http-equiv="content-type" c />
<meta http-equiv="content-language" c />
<meta name="keywords" c />
<meta name="description" c/>
<title>...</title>
</head>
3.不允许使用target="_blank"
在HTML4.01可以使用target="_blank",但XHTML1.0是不被允许的.
比如原来这样写的代码：<a href="document.html" target="_blank"> 打开一个新窗口</a>
现在需要写成这样：<a href="document.html" rel="external">打开一个新窗口</a>
这是符合strict标准的方法。
当然还必须配合一个javascript才有效。javascript完整的代码JS如下:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;
然后把它保存成一个.js文件(比如open.js)，再通过外部联接方法调用：
<script type="text/javascript" src=\'#\'" /script>
4.XHTML 1.0要求所有的标识必须关闭
所有没有成对的空标识必须以 /> 结尾
<p></p>和<a href="index.html"></a>这就是成对
错误 <br> <hr>
正确 <br /> <hr />
错误 <input type="text" name="name">
正确 <input type="text" name="name" />
错误 <meta ...>
正确 <meta ... />
错误 <link rel="stylesheet" type="text/css" href="style.css">
正确 <link rel="stylesheet" type="text/css" href="style.css" />
错误 <img src=\'#\'" border="0" alt="说明文字">
正确 <img src=\'#\'" border="0" alt="说明文字" />
5.所有标识元素名称都使用小写
错误 <HTML> <TITLE> <HEAD> <BODY>
正确 <html> <title> <head> <body>
错误 <IMG SRC=\'#\'" BORDER="0" ALT="说明文字">
正确 <img src=\'#\'" border="0" alt="说明文字" />
错误 <UL><LI></LI></UL>
正确 <ul><li></li></ul>
以上只是举例,是"所有"标签元素名称都必须是小写
6.同一个id选择器不可重复使用一个网页中id="xx"同一个选择器不能重复使用,若需要重复请用class="xx"
7.W3C标准标识必须是成对的
<p> </p> <span></span> <div></div>
8.正确的标识顺序
错误 <b><i>文字</b></i>
正确 <b><i>文字</i></b>
9.JS写法
Javascript我们通常会写为
错误 <script language="javascript">
W3C标准必须为程式指定类型type=text/javascript,所以要写为
正确 <script type="text/javascript">
或者 <script language="javascript" type="text/javascript">
载入外部.js：
正确 <script type="text/javascript" src=\'#\'" /script>
10.绝对不可省略双引号或单引号
错误 style=font-size:9pt
正确 style="font-size:9pt"
错误 <img src=bg.gif width=140 height=30 alt=text />
正确 <img src=\'#\'" width="140" height="30" alt="text" />
错误 <a href=home>text</a>
正确 <a href="home">text</a>
11.W3C标准规定图片标识加上文字说明alt="图片说明"
错误 <img src=\'#\'" height="50" border="0" />
正确 <img src=\'#\'" height="50" border="0" alt="说明文字" />
12.背景音乐不允许使用 bgsound 标签，不过我们依然可以用JavaScript来解决这个问题。js代码如下：
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=背景音乐地址 LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=背景音乐地址 AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// end -->然后保存成.js文件(比如background_music.js)，通过外部联接方法调用它
13. <embed>标识的争议
<embed>是Netscape的私有标识,W3C标准从HTML3.2 HTML 4.01 到 XHTML 1.0 中都没有这个标识,所以使用<embed>的页面是不能通过标准测试。
W3C标准推荐使用 <object> 标识,用<object>插入flash影片的代码可以写为:
<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
<param name="movie" value="index.swf" />
</object>
但这样的写法可能IE5/IE6 Win浏览器版本会出现问题.
<embed>标识因为广大的受到运用,不再标准范围引起很大的争议,想要解决这个问题,只能等IE浏览器对<object>有更好的支持或者W3C愿意收录<embed>标识。
14. W3C标准规定不允许使用框架标签<IFRAME>
用JavaScript解决问题了。javascript完整的代码如下：
function ifr(url,w,h){document.write(’<iframe id="ifr" name="ifr" width="’+w+’" height="’+h+’" border="0" frameborder="0" scrolling="no" src=\'#\'" /iframe>’);} 然后把它保存成一个.js文件(比如iframe.js)，然后通过外部联接方法调用：<script type="text/javascript" src=\'#\'" /script> 在你需要插入框架的地方写以下代码即可：<script type="text/javascript">ifr(’需插入的网页地址’,’567’,’485’);</script> 函数ifr()使用说明：ifr(’这里写地址’,’这里写宽度’,’这里写长度’,)
15.google广告问题
google广告的代码是不符合W3C标准的，只好又把它转成JS调用，但GOOGLE政策里是写着不允许修改代码的，
关于这点只能等待看看在以后会有什么修改了。JS文件(google.js)代码如下：document.writeln("<script type=\"text\/javascript-:special:1:-><!--");
document.writeln("google_ad_client = -:special:1:-pub-0538745384335317-:special:1:-;");
document.writeln("google_ad_width = 125;");
document.writeln("google_ad_height = 125;");
document.writeln("google_ad_format = -:special:1:-125x125_as-:special:1:-;");
document.writeln("google_ad_type = -:special:1:-text_image-:special:1:-;");
document.writeln("\/\/2007-06-29: http://www.100byte.com/");
document.writeln("google_ad_channel = -:special:1:-4751988107-:special:1:-;");
document.writeln("google_color_border = -:special:1:-1a1a1a-:special:1:-;");
document.writeln("google_color_bg = -:special:1:-1a1a1a-:special:1:-;");
document.writeln("google_color_link = -:special:1:-d0eb6a-:special:1:-;");
document.writeln("google_color_text = -:special:1:-ffffff-:special:1:-;");
document.writeln("google_color_url = -:special:1:-8ad459-:special:1:-;");
document.writeln("google_ui_features = -:special:1:-rc:6-:special:1:-;");
document.writeln("\/\/-->");
document.writeln("<\/script>");
document.writeln("<script type=-:special:1:-text\/javascript-:special:1:-");
document.writeln(" src=-:special:1:-http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js-:special:1:->");
document.writeln("<\/script>")
各位可以按照自己的情况修改，网上也有许多把HTML代码转为JS代码的地方。最后在需要挂广告的地方放入代码 <script type="text/javascript" src=\'#\'" /script>
16.W3C标准注解文字不可包含--符号
错误 <!-- index--box -->
正确 <!-- indexbox -->
小贴士：在样式表的注释中注意尽量避免用中文
17.正确使用CSS样式表
样式表放在文件本身的时候，一定要放在<head></head>之间
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
body{font-size:9pt;}
-->
</style>
注意：
错误 <style> 正确 <style type="text/css">
18.使用表格常犯的错误
在做表格通常会指定宽与高,例如:<table border="1" width="300" height="100">
<tr><td> 内容 </td></tr>
</table> 这样做是没有办法通过,可使用CSS来控制标识元素的高度.table{ height:100px; }<table class="table"><tr><td> TEXT </td></tr> </table> 但若使用太多表格,在CSS一一指定不同高,也不是好方法其实很简单将高度height属性指定在储存格就可以了通过测试
<table border="0" width="300"> <tr><td height="100"> TEXT </td></tr> </table> 但这不是W3C标准,建议多使用div代替不必要的table
19.非标识一部分的符号以编码表示(窗体内包含以下符号也必须用编码表示)
< 以 < 表示
> 以 > 表示
& 以 & 表示
程序中的连结 & 也要改用 &
错误 <a href="foo.cgi?chapter=1§ion=2">
正确 <a href="foo.cgi?chapter=1§ion=2">
20.所有属性都必须有值
XHTML1.0规定所有属性都必须有值, 若没有就必须重复属性作为值
错误 <input type="radio" value="v1" checked name="s1" />
正确 <input type="radio" value="v1" checked="checked" name="s1" />
错误 <option selected>S1</option>
正确 <option selected="selected">S1</option>
错误 <td nowrap>
正确 <td nowrap="nowrap">
1.XHTML校验
校验网址：http://validator.w3.org/
校验方式:网址校验、文件上传校验
校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!"。
校验失败，会显示更多校验选项和错误信息。
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
XHTML校验常见错误原因对照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写，要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个</li>其他<li>标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。
2.CSS2校验
校验网址：http://jigsaw.w3.org/css-validator/
校验方式:网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。
校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。
CSS2校验常见错误原因对照表
(错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090
(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px
(错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer
(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
(警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。
如何符合w3c规范？
1、 确保所有的标签都使用小写字母
2、 确保所有的属性值都放在引号里
3、 确保所有成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格
如何让你的站点标准起来,怎么改善现有网站
我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。
1．初级改善
* 为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：
(1)过渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。
Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。
* 设定一个名字空间（Namespace）
直接在DOCTYPE声明后面添加如下代码：
<html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
* 声明你的编码语言
为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。
* 用小写字母书写所有的标签
XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：
<TITLE>公司简介</TITLE>
正确的写法是：
<title>公司简介</title> 同样的，<P>改成<p>，<B>改成<b>等等。这步转换很简单。
* 为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：
<img src=\'#\'" alt="logo_unc_120x30.gif">
正确的写法：
<img src=\'#\'" alt="UNC公司标志，点击返回首页">
* 给所有属性值加引号
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例：height="100"，而不能是height=100。
* 关闭所有的标签
在XHTML中，每一个打开的标签都必须关闭。就象这样：
<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标，XHTML就不可以。</b>这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：<br /> <img src=\'#\'" />
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何让您的网站符合W3C标准
- 如何让您的网站符合W3C标准
- 如何使我们的网站符合W3C网络标准，让IE8能够正常访问呢？
- 网站如何达到W3C标准？网页如何通过W3C验证？
- 关于XHTML 以及 如何让网站通过W3C 标准
- 网站如何达到W3C标准？网页如何通过W3C验证？
- 让您的网站符合W3C标准
- 编写页面时如何符合W3C标准
- 如何策划一个符合seo标准的网站（详细思路）
- 如何让你的网站符合搜索抓取习惯
- 爱煮饭：怎么写网站程序符合搜索引擎(SEO)标准
- 如何挑选企业网站cms系统符合SEO要求
- 如何符合w3c规范？
- HTML中几个Tag比较有用,平时大家用得比较少，而且是符合W3C XHTML标准的。
- js 实现页面两边广告, 可关闭对联广告 随滚动条滚动 符合w3c标准
- 如何知道自己的网站是否符合W3C标准
- 符合W3C的网站的开发模型和必要性的探讨(二)
- 使用 SWFObject.js 插入Flash且符合W3C标准
- 让文章中的视频flash代码符合w3c标准
- 符合W3C的网站的开发模型和必要性的探讨(二)