W3C網頁設計代碼規范標準總結--優化網站代碼
2011-9-19 0:0:0 | 作者：sw996 | 0個評論 | 人瀏覽
- 本文來自: 成都百度快照優化|成都百度關鍵詞排名優化|成都SEO【思為網絡】，轉載請保留出處！歡迎發表您的評論
- 相關標簽：
1、頁面中不應該出現如<font color="red"></font>，而應該用<span class="red_text"></span>來替代之。
2、DOCTYPE是document type（文檔類型）的簡寫，用來說明你用的XHTML或者HTML是說明版本。要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
3、有三種DTD可以選擇：Transitional，Strict，Frameset。
第一種是非常寬松的DTD，允許使用HTML4.01的標識，但必須符合xhtml的語法。
第二種是要求嚴格的DTD，不能使用任何表現層的的標識和屬性，如<br>。
第三種是專門針對框架設置的DTD。
DOCTYPE聲明必須放在每一個XHTML文檔最頂部，在所有代碼和標識之上。
4、命名空間
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">這個“xmlns”是XHTML namespace的縮寫，叫做“名字空間”聲明。
XHTML是HTML向XML過渡的標識語言，它需要符合XML文檔規則，因此也需要定義名字空間。又因為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等，根據你的需要定義。
注：如果忘記了定義語言編碼,可能就會出現,你在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請都寫上數量單位，例如：
錯誤：.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規定所有屬性都必須有一個值，沒有值的就重復本身。例如：
|
<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要求有嚴謹的結構，所有標簽必須關閉。如果是單獨不成對的標簽，在標簽最后加一個"/"來關閉它。
例如：
|
<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要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：
<p><b></p></b> 必須修改為：
<p><b></b></p> 就是說，一層一層的嵌套必須是嚴格對稱。
14、圖片添加有意義的alt屬性
例如：
|
<img src=“logo.gif” width=“100” height=“100” align=“middle” boder=“0” alt=“阿里巴巴” /> |
盡可能的讓作為內容的圖片都帶有屬于自己的alt屬性
同理：
添加文字鏈接的title屬性
<a hrehf=”#” target=”_blank” title=”新聞新聞新聞新聞”>新聞新聞…</a>,在一些限定字數的內容展示尤為重要，幫助顯示不完成的內容顯示完整，而不用考慮頁面會因此而撐大
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的校驗，會出現如下錯誤提示：
"there is no attribute target for this element(in this HTML version)"
原來在HTML4.01/XHTML1.0/XHTML1.1嚴格DOCTYPE下，target="_blank"、target="_self"等等語法都是無效的，我們只能通過JavaScript來變通實現。
有朋友問為什么不允許使用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>
現在要寫成這樣：
<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)，然后通過外部聯接方法調用：
<script type="text/javascript" src="external.js" mce_src="external.js"></script>
相關推薦
- 網站分類
-
- 最近發表
-
- Tags列表
-
- 隨機文章
-