W3C網(wǎng)頁(yè)設(shè)計(jì)代碼規(guī)范標(biāo)準(zhǔn)總結(jié)--優(yōu)化網(wǎng)站代碼
1、頁(yè)面中不應(yīng)該出現(xiàn)如<font color="red"></font>，而應(yīng)該用<span class="red_text"></span>來(lái)替代之。
2、DOCTYPE是document type（文檔類型）的簡(jiǎn)寫，用來(lái)說(shuō)明你用的XHTML或者HTML是說(shuō)明版本。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個(gè)正確的DOCTYPE，否則你的標(biāo)識(shí)和CSS都不會(huì)生效。
3、有三種DTD可以選擇：Transitional，Strict，F(xiàn)rameset。
第一種是非常寬松的DTD，允許使用HTML4.01的標(biāo)識(shí)，但必須符合x(chóng)html的語(yǔ)法。
第二種是要求嚴(yán)格的DTD，不能使用任何表現(xiàn)層的的標(biāo)識(shí)和屬性，如<br>。
第三種是專門針對(duì)框架設(shè)置的DTD。
DOCTYPE聲明必須放在每一個(gè)XHTML文檔最頂部，在所有代碼和標(biāo)識(shí)之上。
4、命名空間
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">這個(gè)“xmlns”是XHTML namespace的縮寫，叫做“名字空間”聲明。
XHTML是HTML向XML過(guò)渡的標(biāo)識(shí)語(yǔ)言，它需要符合XML文檔規(guī)則，因此也需要定義名字空間。又因?yàn)閄HTML1.0不能自定義標(biāo)識(shí)，所以它的名字空間都相同，就是http://www.w3.org/1999/xhtml。
目前階段我們只要照抄代碼就可以了。
5、定義語(yǔ)言編碼
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言，我們一般使用gb2312(簡(jiǎn)體中文)，制作多國(guó)語(yǔ)言頁(yè)面也有可能用Unicode、ISO-8859-1等，根據(jù)你的需要定義。
注：如果忘記了定義語(yǔ)言編碼,可能就會(huì)出現(xiàn),你在DW做完一個(gè)頁(yè)面,第二次打開(kāi)時(shí)所有的中文變成了亂碼
6、JavaScript定義
Js必須要用<script language="javascript" type="text/javascript">來(lái)開(kāi)頭定義,而不是原來(lái)的<script language=javascript>或干脆直接<script>,并且需要加個(gè)注釋符<!-- -->，以保證不在不支持js 的瀏覽器上直接顯示出代碼來(lái)。
7、CSS定義
CSS必須要用<style type=“text/css”>開(kāi)頭來(lái)定義,而不是原來(lái)的直接<style>，也不建議直接寫在內(nèi)容代碼里如：<div style=”padding-left:20px;”></div>,并需要加個(gè)注釋符<!-- -->
為保證各瀏覽器的兼容性，在寫CSS請(qǐng)都寫上數(shù)量單位，例如：
錯(cuò)誤：.space_10{padding-left:10}
正確：.space_10 {padding-left:10px}
8、所有標(biāo)簽的元素和屬性的名字都必須使用小寫
與HTML不一樣，XHTML對(duì)大小寫是敏感的，<title>和<TITLE>是不同的標(biāo)簽。XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認(rèn)可的，通常dreamweaver自動(dòng)生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
9、所有的屬性必須用引號(hào)""括起來(lái)
10、把所有<和&特殊符號(hào)用編碼表示
n 任何小于號(hào)（<），不是標(biāo)簽的一部分，都必須被編碼為 <
n 任何大于號(hào)（>），不是標(biāo)簽的一部分，都必須被編碼為 >
n 任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為 &
如：http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true 是錯(cuò)誤的，
應(yīng)該改為http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true
11、給所有屬性賦一個(gè)值
XHTML規(guī)定所有屬性都必須有一個(gè)值，沒(méi)有值的就重復(fù)本身。例如：
|
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> |
必須修改為：
|
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> |
12、所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
以前在HTML中，你可以打開(kāi)許多標(biāo)簽，例如<p>和<li>而不一定寫對(duì)應(yīng)的</p>和</li>來(lái)關(guān)閉它們。但在XHTML中這是不合法的。XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨(dú)不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè)"/"來(lái)關(guān)閉它。
例如：
|
<br /> <img height="80" alt="網(wǎng)頁(yè)" title=”網(wǎng)頁(yè)” src="logo.gif" width="200" /> |
錯(cuò)誤：
|
Document.write(“<td width=\“300\”><a href=\“1.html\”>ok</a></td>”); |
正確：
|
Document.write(“<td width=\“300\”><a href=\“1.html\”>ok<\/a><\/td>”); |
13、所有的標(biāo)記都必須嚴(yán)格嵌套
同樣因?yàn)閄HTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：
<p><b></p></b> 必須修改為：
<p><b></b></p> 就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。
14、圖片添加有意義的alt屬性
例如：
|
<img src=“l(fā)ogo.gif” width=“100” height=“100” align=“middle” boder=“0” alt=“阿里巴巴” /> |
盡可能的讓作為內(nèi)容的圖片都帶有屬于自己的alt屬性
同理：
添加文字鏈接的title屬性
<a hrehf=”#” target=”_blank” title=”新聞新聞新聞新聞”>新聞新聞…</a>,在一些限定字?jǐn)?shù)的內(nèi)容展示尤為重要，幫助顯示不完成的內(nèi)容顯示完整，而不用考慮頁(yè)面會(huì)因此而撐大
15、在form表單中增加label，以增加用戶友好度
例如：
|
<form action="http://somesite.com/prog/adduser" method="post"> <label for="firstname">first name: </label> <input type="text" id="firstname"> <label for="lastname">last name: </label> <input type="text" id="lastname"> </form> |
16. target="_blank"不符合W3C標(biāo)準(zhǔn)的解決方案?
我們要在新窗口中打開(kāi)鏈接通常的做法是在鏈接后面加target="_blank"，我們采用過(guò)渡型的DOCTYPE(xhtml1-transitional. dtd)時(shí)沒(méi)有問(wèn)題，但是當(dāng)我們使用嚴(yán)格的DOCTYPE(xhtml1-strict.dtd)時(shí)，這個(gè)方法將通不過(guò)W3C的校驗(yàn)，會(huì)出現(xiàn)如下錯(cuò)誤提示：
"there is no attribute target for this element(in this HTML version)"
原來(lái)在HTML4.01/XHTML1.0/XHTML1.1嚴(yán)格DOCTYPE下，target="_blank"、target="_self"等等語(yǔ)法都是無(wú)效的，我們只能通過(guò)JavaScript來(lái)變通實(shí)現(xiàn)。
有朋友問(wèn)為什么不允許使用target="_blank"？這個(gè)屬性很方便啊。呵呵，不知道W3C的專家們是怎么想的，據(jù)我所知，主要是“易用性、友好性”的問(wèn)題，因?yàn)槔贤庥X(jué)得不經(jīng)過(guò)用戶同意，沒(méi)有明確提示就打開(kāi)一個(gè)新窗口是不禮貌的。先不管這個(gè)取消是否合理，我們來(lái)看看解決辦法。
rel屬性
HTML4.0增加了一個(gè)新屬性：rel，這個(gè)屬性用來(lái)說(shuō)明鏈接和包含此鏈接頁(yè)面的關(guān)系，以及鏈接打開(kāi)的目標(biāo)。rel有許多的屬性值，比如next、previous,、chapter、section等等。我們要使用的就是rel="external"屬性。原來(lái)這樣寫的代碼：
<a href="document.html" mce_href="document.html" target="_blank">打開(kāi)一個(gè)新窗口</a>
現(xiàn)在要寫成這樣：
<a href="document.html" mce_href="document.html" rel="external">打開(kāi)一個(gè)新窗口</a>
這是符合strict標(biāo)準(zhǔn)的方法。當(dāng)然還必須配合一個(gè)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;
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;你可以把它保存成一個(gè).js文件(比如external.js)，然后通過(guò)外部聯(lián)接方法調(diào)用：
<script type="text/javascript" src="external.js" mce_src="external.js"></script>
