- <a> 标签没有 target 属性
-
在 Strict DTD 里面,超链接 <a> 标签 没有 target 属性,因此不能利用 target="_blank" 这样的代码来达到新开页面打开链接的目的。为了实现同样的功能,通常的办法是用 rel="external" 来替代 target="_blank",然后用如下 JavaScript 代码来处理链接:
function externalLinks() { var linkArray = document.getElementsByTagName('a'); for (var i = 0; i < linkArray.length; i++) { var link = linkArray[i]; if (link.getAttribute('rel') == 'external') { link.target = '_blank'; } }}然后将该 externalLinks() 函数添加到页面的 onLoad 事件中。如:
<body onload="externalLinks();"> - <img> 标签必须添加 alt 属性
-
对于 <img> 标签来讲,alt 属性是必须的。给图片添加 alt,一方面当图片因为各种原因无法显示的时候,能给访问者以提示;另一方面也便于搜索引擎判断图片的内容,以及更准确的建立索引。
- <img> 标签没有 border 属性
-
<img> 标签是没有 border 这个属性的。我们通常会加上 border="0",主要是因为把图片放在链接标签 <a> 里时,浏览器会加上一个链接默认颜色的边框,而这通常是多余的。在 Strict 标准中,不能用 border 属性来去掉边框,而只能使用 CSS 控制。同样 align 属性也是不存在的,要实现 absmiddle 这样的目的,也只能用 CSS 代替。
- <blockquote> 标签内必须使用 block 级别的标签
-
<blockquote> 标签用来在页面上表示引用的内容,例如,最常见的,引用代码。我通常习惯将代码的内容放在 <code> 标签中,而这个标签是 inline 级的,不符合 Strict DTD 的要求。<strong>、<b> 等同样会导致问题。符合要求的 block 级标签包括:<address>, <blockquote>, <del>, <div>, <dl>, <fieldset>, <form>, <h>, <h2>, <h4>, <h5>, <h6>, <hr>, <ins>, <noscript>, <ol>, <p>, <pre>, <script>, <table>, <ul>。
- 不能使用 <embed> 标签
-
这个问题最容易出现在引用外部媒体文件时,例如 MP3 音乐、视频等。很多资料推荐同时使用 <object> 和 <embed> 来增强媒体引用元素的浏览器兼容性,但是很不幸的,Strict DTD 并未定义 <embed>。其实我们完全可以不使用 <embed> 一样能够兼容浏览器。例如 Youtube 给的代码一般是这样的:
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/uhsjNTEJD3c"></param> <param name="allowFullScreen" value="true"></param> <embed src="http://www.youtube.com/v/uhsjNTEJD3c" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>这样无法通过校验。我们可以改成:
<object type="application/x-shockwave-flash" width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/uhsjNTEJD3c"/> <param name="allowFullScreen" value="true"/></object> - 实体用法问题
-
在 XML 中,实体的写法是 &entity;,以一个 & 符号开头,一个分号结束。因此,Strict 标准的 XHTML 里面不允许出现任何单独的 & 符号,即使是在 URL 中用来分隔查询参数。需要用到这个符号的时候,要用 & 来表示。通常一个实体用法的错误会同时导致 5 个校验时的错误,当解决以后,这 5 个错误会同时消失。由于 Blogger 在发布页面时 URL 直接使用了 & 符号,因此会直接导致 Strict 标准的 XHTML 校验失败。
- 重复的 id 值
-
对于 XHTML 标签来讲,id 属性的值必须唯一,如果一个文档中出项重复的 id 就会导致问题。出现这种问题,通常是把 id 属性放在了 Blogger 模板会循环输出的部分。
另外,Blogger 提供的模板中,backlinks 那一部分会导致 4 个不同类别的问题。凭心而论,Blogger 模板在 backlinks 这一块的代码实在写的很烂,用了三个不同的 js 文件,用 JavaScript 输出 CSS,不但使得不同模板之间难以更改这一部分显示的样式,也导致了很多 XHTML 的语法校验问题。例如 Blogger 自己的 Buzz,打开任一个文章的独立页面的源代码,Doctype 声明赫然是 XHTML 1.0 Strict,然而 backlink 那一块的代码不用校验也能看出漏洞百出。
Blogger 目前版本的网站出自著名设计师 Douglas Bowman 之手,其本人对 XHTML 以及 CSS 有着非常深刻的研究。在设计之初,Blogger 还没有 Backlinks 的功能,显然这个蹩脚的 Backlinks 是后来由其他人加上去的。不知道 Bowman 先生在看到这一幕后会做何感想。
Google 黑板报用的是同样的 backlink 代码,不过比 Buzz 知趣的是它的模板干脆去掉了 Doctype 声明。只不过作为 Google 旗下的网站,页面连 Doctype 声明都没有,也是一件汗颜的事情。
言归正传,以下列出 backlink 这部分代码导致的问题以及解决方法。
- <div> 和 <dl> 之间的嵌套问题
-
在 Blogger 给出的默认模板代码中,是用 <dl> 来实现反向链接列表的;可问题在于,他们将 <BlogItemBacklinks> 放在了 <dl> 之内,而在生成页面时,会将 <BlogItemBacklinks> 这一对模板标签替换成一对 <div> 标签,从而导致 <div> 被嵌套在 <dl> 内。在 Strict DTD 里,<dl> 标签内只允许出现 <dt> 和 <dd> 两个子标签。解决办法是把 <BlogItemBacklinks> 放到 <dl> 外面,当然这样虽然让 XHTML 语法通过校验,但实际的运行结果,会导致每个反向链接条目会占用一个 <dl> 块,而不是预期的放在循环的若干个 <dt> 和 <dd> 中。通过 CSS 可以解决条目之间间距的问题。如果要完美解决这个问题的话,就只有自己重写 Blogger 提供的 JavaScript 函数来改变这一行为了。
- <script> 标签的 defer 属性
-
在 Blogger 用模
打造W3C XHTML 1.0标准的网站
XHTML1.0是HTML4.0的重新组织,算是HTML4.01的修正版,发行命名为XHTML1.0。
XHTML1.0要求比较严格,跟HTML4.01有些差别,以XHTML1.0标准下列1-4项是绝对必要的也是不同于HTML4.01的地方。
网页制作使用Dreamweaver MX 2004,可以在
「编辑」-「偏好设定」-「新文件」-「将文件设为XHTML兼容」,然后新增HTML,就可以开始制作XHTML的网页。 以下我列出几点比较常见会发生的错误供参考:
1.所有卷标元素名称都使用小写
错误 <HTML> <TITLE> <HEAD> <BODY>
正确 <html> <title> <head> <body>
错误 <IMG src=”BG.GIF” BORDER=”0″ ALT=”说明文字”>
正确 <img src=”bg.gif” border=”0″ alt=”说明文字” />
错误 <UL><LI></LI></UL>
正确 <ul><li></li></ul>
以上只是举例,是”所有”卷标元素名称都必须是小写。
2.所有没有成对的空标签必须以 />结尾,<p></p>和<a href=”home.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=”bg.gif” border=”0″ alt=”说明文字”>
正确 <img src=”bg.gif” border=”0″ alt=”说明文字” /> 3.不允许使用target=”_blank”
在HTML4.01可以使用target=”_blank”,
但XHTML1.0是不被允许的,你可以改写为 target=”new”
4.所有属性都必须有值
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”>
5.非卷标一部分的符号以编码表示
窗体内包含以下符号也必须用编码表示
< 以 < 表示
> 以 > 表示
& 以 & 表示
程序中的连结 & 也要改用 &
错误 <a href=”foo.cgi?chapter=1§ion=2″>
正确 <a href=”foo.cgi?chapter=1§ion=2″>
6.使用表格常犯的错误
我们在做表格通常会指定宽与高,例如:
<table border=”1″ width=”300″ height=”55″>
<tr><td> 内容 </td></tr>
</table>
这样做是没有办法通过,W3C建议使用CSS来控制卷标元素的高度
.table{
height:55px;
}
<table class=”table”>
<tr><td> TEXT </td></tr>
</table>
但是若使用太多表格,在CSS一一指定不同高,也不是好方法
其实很简单将高度height属性指定在储存格就可以了通过测试
<table border=”0″ width=”300″>
<tr><td height=”55″> TEXT </td></tr>
</table>
但这不是w3c希望的标准,建议能够使用div代替不必要的table
7.正确使用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”>
建议全站的样式都写在.css文件中
8.同一个id选择器不可重复使用
一个网页中id=”xx”同一个选择器不能重复使用,若需要重复请用class=”xx”
9.绝对不可省略双引号或单引号
错误 style=font-size:9pt
正确 style=”font-size:9pt”
错误 <img src=bg.gif width=140 height=30 alt=text />
正确 <img src=”bg.gif” width=”140″ height=”30″ alt=”text” />
错误 <a href=home>text</a>
正确 <a href=”home”>text</a>
10.标签必须是一对
<p> </p>
<span></span>
<div></div>
11.图片卷标加上文字说明alt=”说明”
错误 <img src=”bg.gif” height=”50″ border=”0″ />
正确 <img src=”bg.gif” height=”50″ border=”0″ alt=”说明文字” />
12.正确的卷标顺序
错误 <b><i>文字</b></i>
正确 <b><i>文字</i></b>
13.批注文字不可包含–符号
错误 <!– OEC–SPACE –>
正确 <!– OECSPACE –>
14.JavaScript写法
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.js”></script>
15. <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浏览器版本会出现问题。想要符合标准又能在任何浏览器下正常显示,以下几个连结点提供参考:以下几个连结点提供参考:
torresburriel.com
A List Apart
<embed>标签因为广大的受到运用,不再标准范围引起很大的争议,想要解决这个问题,只能等IE浏览器对<object>有更好的支持或者W3C愿意收录<embed>标签。
16. XHTML 1.0文件类别宣告的正确写法 (不可小写)
用于一般网页
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
用于框架页
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
W3C标准测试网址 http://validator.w3.org/
网页自动测试网址 http://validator.w3.org/check?uri=referer
测试时一定要有「16.文件类别宣告」还有指定文件编码
<meta http-equiv=”Content-Type” content=”text/html; charset=big5″ />
才能顺利进行测试动作,开始打造一个万维标准的
网站吧!
首页