W3C標準學習心得

quguiliang 13年前發布 | 750 次閱讀

1、頁面中不應該出現如，而應該用來替代之。

2、DOCTYPE是document type（文檔類型）的簡寫，用來說明你用的XHTML或者HTML是說明版本。要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。

3、有三種DTD可以選擇：Transitional，Strict，Frameset。

第一種是非常寬松的DTD，允許使用HTML4.01的標識，但必須符合xhtml的語法。

第二種是要求嚴格的DTD，不能使用任何表現層的的標識和屬性，如 。

第三種是專門針對框架設置的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、定義語言編碼

為了被瀏覽器正確解釋和通過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規定所有屬性都必須有一個值，沒有值的就重復本身。例如：

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

<td nowrap> <input type="checkbox" name="shirt" value="medium" checked></TD></TR></TBODY></TABLE>

 必須修改為：

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /></TD></TR></TBODY></TABLE>

12、所有的標記都必須要有一個相應的結束標記

以前在HTML中，你可以打開許多標簽，例如和<li>而不一定寫對應的和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標簽必須關閉。如果是單獨不成對的標簽，在標簽最后加一個"/"來關閉它。



例如：

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

 

<img height="80" alt="網頁" title=”網頁” src="logo.gif" width="200" /> </TD></TR></TBODY></TABLE>





錯誤：

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

Document.write(“<td width=\“300\”><a href=\“1.html\”>ok</a></td>”);</TD></TR></TBODY></TABLE>

 

正確：

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

Document.write(“<td width=\“300\”><a href=\“1.html\”>ok<\/a><\/td>”);</TD></TR></TBODY></TABLE>

 

13、所有的標記都必須嚴格嵌套

同樣因為XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：

 必須修改為：

 就是說，一層一層的嵌套必須是嚴格對稱。

 

14、圖片添加有意義的alt屬性

例如：

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

<img src=“logo.gif” width=“100” height=“100” align=“middle” boder=“0” alt=“阿里巴巴” /></TD></TR></TBODY></TABLE>

 

盡可能的讓作為內容的圖片都帶有屬于自己的alt屬性

同理：

添加文字鏈接的title屬性

<a hrehf=”#” target=”_blank” title=”新聞新聞新聞新聞”>新聞新聞…</a>,在一些限定字數的內容展示尤為重要，幫助顯示不完成的內容顯示完整，而不用考慮頁面會因此而撐大

 

15、在form表單中增加label，以增加用戶友好度

例如：

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BACKGROUND: #f3f3f3; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=MsoTableGrid border=1 cellSpacing=0 cellPadding=0>

<TD style="PADDING-BOTTOM: 0cm; BACKGROUND-COLOR: transparent; PADDING-LEFT: 5.4pt; WIDTH: 426.1pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0cm" vAlign=top width=568>

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

 </TD></TR></TBODY></TABLE>



 

轉載：http://www.javaeye.com/topic/953537

本文由用戶 quguiliang 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/blog/5035946054942996662.html

W3C標準學習心得

博客分類

目錄

推薦閱讀

W3C標準學習心得

nginx標準配置文件

標準c基礎知識三

標準作息時間表