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