LittleHZ [叶歆昊]

挑战W3C DTD xHTML 1.0 Strict标准与常见错误

[文章作者：叶歆昊   最后修改：2010-07-19   转载请注明原文链接：http://littz.com/challenges-w3c-dtd-xhtml-1-0-strict-standard-and-common-errors.html]

我的Blog网页在 Doctype 声明上一直使用的是//W3C//DTD XHTML 1.0 Transitional标准，当初在模板制作完成时是校验过的，可是随着后来无数次的修改、内容添加，现在已经不能通过W3C 的XHTML 1.0 Transitional语法校验了，现在一并解决Transitional标准，并尝试挑战Strict标准。

Transitional是兼容版本，一般来说是习惯table书写的设计者到div+css的过渡标准，而Strict是严格标准，是XHTML 1.0 Transitional的子集，符合strict标准的网页兼容性好，代码简洁，当然，这要试网页设计者的书写习惯而定。

经过一个下午的努力，终于基本上解决了所有 XHTML Transitional的语法问题，总结如下。

img标签必需 alt 属性；必须使用<img />关闭标签；img标签没有border属性，应用：<img src="abc.jpg" alt="图片替代文字" />，border写在css中。

id不能重复使用，多次使用需用class替代

载入Flash文件使用swfobject方式，内嵌javascript需用CDATA方式插入，如下：
<script type="text/javascript">
//<!--
   var flashvars = {}; var params = { menu: "false", wmode:"transparent", quality:"best", allowFullScreen:"true", allowscriptaccess:"always"}; var attributes = {};
   swfobject.embedSWF("http://www.youtube.com/v/5FyIKb5Iou0&hl=zh_CN&fs=1", "div_youtube", "300", "250", "9.0.0","expressInstall.swf", flashvars, params, attributes);
//-->
</script>
<div id="div_youtube">Youtube视频，请开启javascript支持，并安装最新版Flash插件</div>

<font></font>废弃，早已不使用，<b></b><i></i><strong></strong><em></em>不建议使用。用<span style="font-weight:bold;"></span>这样的CSS描述方法替代

未经编码的与符号&，<a href="foo.cgi?chapter=1&section=2">...</a> ，解决方法: 总是使用& amp ; 替代&

DOCTYPE，其它容器、属性全部小写，属性值全部需要引号。错误：<A HREF=a.htm>...</A>，正确：<a href="a.htm">...</a>

代码嵌套要正确，每个标签都必须关闭。ul与li必须层级嵌套，不能独立出现。

切记，网页设计时放弃表格，表格仅在输出类似Excel表格时使用。

以上是解决Transitional的常见错误，而Strict标准就严格很多了，粗略看了下有20个错误。

<a></a>标签没有 target 属性

在 Strict DTD 里面，超链接标签没有 target 属性，因此不能利用 target="_blank" 这样的代码来达到新开页面打开链接的目的。为了实现同样的功能，通常的办法是用 rel="external" 来替代 target="_blank"，然后用如下 JavaScript 代码来处理链接：

<a href="#" rel="external" onclick="window.open(this.href);return false" >弹出新窗口</a>

blockquote标签内必须使用 块状block标签，相对应的是inline

blockquote标签用来在页面上表示引用的内容，例如，最常见的，引用代码。我通常习惯将代码的内容放在 <code></code> 标签中，而这个标签是 inline 级的，不符合 Strict DTD 的要求。<strong></strong>、<b></b>等同样会导致问题。符合要求的 block 级标签包括：<address></address>, <blockquote></blockquote>, <del></del>, <div></div>, <dl></dl>, <fieldset></fieldset>, <form></form>, <h1></h1>, <h2></h2>, <h4></h4>, <h5></h5>, <h6></h6>, <hr></hr>, <ins></ins>, <noscript></noscript>, <ol></ol>, <p></p>, <pre></pre>, <script></script>, <table></table>, <ul></ul>。

问题原因找到了就容易解决，花了一晚上时间，现在休息，明天再来！