网页如何能通过w3c验证

网络博客 郑永 4376℃ 2评论 单栏模式

这两天为了博客能通过w3c验证,可以说是受尽折磨(主要时间花在找主题和修改主题),没想到w3c的验证,会让我到快要放弃这个已经非常满意的主题,想想重新搞还不如找出具体通不过w3c验证的原因,原来主题我都修改过好多次了,一直都让它通过w3c验证,期间还发布了让框架iframe通过w3c验证,一段时间后,主题总是会有小修改,但是忘记了w3c验证,结果错误一大堆,经过一番折腾,果然搞定了,以下是我在修改过程中提供了重要帮助的参考资料。

以下我列出幾點比較常見會發生的錯誤供參考:

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.XHTML 1.0要求所有的標籤必須關閉

所有沒有成對的空標籤必須以 />結尾
<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"
不過最好的方式還是以js來做調用(解決_blank開新視窗不符合標準)

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">

非標籤一部分的符號以編碼表示

表單內包含以下符號也必須用編碼表示
< 以 &lt; 表示
> 以 &gt; 表示
& 以 &amp; 表示
程式中的連結 & 也要改用 &amp;
錯誤 <a href="foo.cgi?chapter=1&section=2">
正確 <a href="foo.cgi?chapter=1&amp;section=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 瀏覽器版本會出現問題。想要符合標準又能在任何瀏覽器下正常顯示,以下幾個連結點提供參考:

<embed>標籤因為廣大的受到運用,不再標準範圍引起很大的爭議,想要解決這個問題,只能等 IE 瀏覽器對<object>有更好的支持或者W3C願意收錄<embed>標籤。 16.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 的網頁,

過度標準(Transitional)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
框架標準(Frameset)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
嚴格標準(Strict) 包含以上須注意的問題,還有其他更嚴格的標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 標準規格 : The Extensible HyperText Markup Language

W3C標準測試網址 http://validator.w3.org/

網頁自動測試網址 http://validator.w3.org/check?uri=referer

測試時一定要有「16.文件類別宣告」還有指定文件編碼
<meta http-equiv="Content-Type" content="text/html; charset=big5" />才能順利進行測試動作 開始打造一個萬維標準的網站吧!

以上内容原文地址

怎么样,你的网站是否通过了w3c验证呢?如果还没有,赶紧去试一下吧,只要认真的找一下原因,一定会通过的!

转载请注明:郑永博客 » 网页如何能通过w3c验证

历史上的今天:

(2)个小伙伴在吐槽
Loading...
  1. 林木木2011-11-10 06:32 Google Chrome 12 Windows XP 回复

    找到原因解决很重要啊。

    沙发!
  2. 西门2012-01-12 07:58 Google Chrome 10 Windows XP 回复

    呵呵 代码蛮复杂的。

    板凳!
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址