W3C網頁設計代碼規(guī)范標準總結--優(yōu)化網站代碼
1、頁面中不應該出現(xiàn)如<font color="red"></font>,而應該用<span class="red_text"></span>來替代之。
2、DOCTYPE是document type(文檔類型)的簡寫,用來說明你用的XHTML或者HTML是說明版本。要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效。
3、有三種DTD可以選擇:Transitional,Strict,F(xiàn)rameset。
第一種是非常寬松的DTD,允許使用HTML4.01的標識,但必須符合xhtml的語法。
第二種是要求嚴格的DTD,不能使用任何表現(xiàn)層的的標識和屬性,如<br>。
第三種是專門針對框架設置的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等,根據你的需要定義。
注:如果忘記了定義語言編碼,可能就會出現(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>,也不建議直接寫在內容代碼里如:<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 是錯誤的,
應該改為http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true
11、給所有屬性賦一個值
XHTML規(guī)定所有屬性都必須有一個值,沒有值的就重復本身。例如:
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> |
必須修改為:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> |
12、所有的標記都必須要有一個相應的結束標記
以前在HTML中,你可以打開許多標簽,例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹?shù)慕Y構,所有標簽必須關閉。如果是單獨不成對的標簽,在標簽最后加一個"/"來關閉它。
例如:
<br /> <img height="80" alt="網頁" title=”網頁” 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構,因此所有的嵌套都必須按順序,以前我們這樣寫的代碼:
<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=“阿里巴巴” /> |
盡可能的讓作為內容的圖片都帶有屬于自己的alt屬性
同理:
添加文字鏈接的title屬性
<a hrehf=”#” target=”_blank” title=”新聞新聞新聞新聞”>新聞新聞…</a>,在一些限定字數(shù)的內容展示尤為重要,幫助顯示不完成的內容顯示完整,而不用考慮頁面會因此而撐大
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的專家們是怎么想的,據我所知,主要是“易用性、友好性”的問題,因為老外覺得不經過用戶同意,沒有明確提示就打開一個新窗口是不禮貌的。先不管這個取消是否合理,我們來看看解決辦法。
rel屬性
HTML4.0增加了一個新屬性:rel,這個屬性用來說明鏈接和包含此鏈接頁面的關系,以及鏈接打開的目標。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)接方法調用:
<script type="text/javascript" src="external.js" mce_src="external.js"></script>