本文為摘抄
1.為頁面添加正確的 DOCTYPE
XHTML1.0 提供了三種 DOCTYPE 可選擇：
1.過渡型(Transitional)--普遍
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.嚴格型(Strict)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
3.架構型(Frameset)
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML
1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那麼這些代碼有什麼含義？一定要放置嗎？
什麼是DOCTYPE?
上面這些代碼我們稱做
DOCTYPE 聲明。DOCTYPE 是 document type(文件類型)的簡寫，用來說明你用的 XHTML 或者 HTML 是什麼版本;其中的
DTD(例如上例中的 xhtml1-transitional.dtd)叫文件類型定義，裡麵包含了文檔的規則，瀏覽器就根據你定義的
DTD來解釋你頁面的標識，並展現出來。
要建立符合標準的網頁，DOCTYPE 聲明是必不可少的關鍵組成部分；除非你的 XHTML 確定了一個正確的
DOCTYPE，否則你的標識和 CSS 都不會生效。
XHTML 1.0 提供了三種
DTD聲明可供選擇：過渡的(Transitional):要求非常寬鬆的 DTD，它允許你繼續使用 HTML4.01 的標識(但是要符合 xhtml
的寫法)。
我們選擇什麼樣的DOCTYPE?
理想情況當然是嚴格的 DTD，但對於我們大多數剛接觸 web 標準的設計師來說，過渡的 DTD(XHTML 1.0
Transitional)是目前理想選擇(包括本 DTD)。因為這種 DTD 還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C
的代碼校正。
註：上面說的"表現層的標識、屬性"是指那些純粹用來控製表現的 tag，例如用於排版的表格、背景顏色標識等。在
XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現資料和表現相分離。打個比方：人體模特換衣服。模特就好比資料，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來
HTML4
中，資料和表現是混雜在一起的，要一次性換個表現形式非常困難。呵呵，有點抽象了，這個概念需要我們在應用過程中逐步領會。
補充
DOCTYPE
聲明必須放在每一個 XHTML文檔最頂部，在所有代碼和標識之上。
2.設定一個名字空間(Namespace)
直接在 DOCTYPE 聲明後面添加如下代碼：
<html
XMLns="http://www.w3.org/1999/xhtml" >
一個 namespace
是收集元素類型和屬性名稱字的一個詳細的 DTD，namespace 聲明允許你通過一個線上地址指向來識別你的namespace。只要照樣輸入代碼就可以。
什麼是名字空間?
DOCTYPE
聲明好以後，接下來的代碼是：
<html xmlns="http://www.w3.org/1999/xhtml"
lang="gb2312">
通常我們 HTML4.0
的代碼只是<html>，這裡的"xmlns"是什麼呢？
這個"xmlns"是 XHTML namespace
的縮寫，叫做"名字空間"聲明。名字空間是什麼作用呢？自己的理解是：由於 xml
允許你自己定義自己的標識，你定義的標識和其他人定義的標識有可能相同，但表示不同的意義。當檔案交換或者共用的時候就容易產生錯誤。為了避免這種錯誤發生，XML
採用名字空間聲明，允許你通過一個網址指向來識別你的標識。
例如：
小王和小李都定義了一個<book>標識，如果小王的名字空間是"http://www.xiaowang.com"，小李的名字空間是"http://www.xiaoli.com"，那麼當兩個文檔交換資料時，也不會混淆<book>標識，因為它屬於不同的名字空間。
更通俗的解釋是：名字空間就是給文檔做一個標記，告訴別人，這個文檔是屬於誰的。只不過這個"誰"用了一個網址來代替。
XHTML
是 HTML 向 XML 過渡的標識語言，它需要符合 XML 文檔規則，因此也需要定義名字空間。又因為 XHTML1.0
不能自訂標識，所以它的名字空間都相同，就是"http://www.w3.org/1999/xhtml"。如果你還不太理解也不要緊，目前階段我們只要照抄代碼就可以了。後面的
lang="gb2312",指定你的文檔用簡體中文。
3.聲明你的編碼語言
為了被瀏覽器正確解釋和通過標識校正，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言。代碼如下：
<meta http-equiv="Content-Type"
content="text/html; charset=GB2312" />
這裡聲明的編碼語言是簡體中文GB2312，你如果需要製作繁體內容，可以定義為BIG5。
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
為了被瀏覽器正確解釋和通過 W3C
代碼校正，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言，我們一般 gb2312(簡體中文)，製作多國語言頁面也有可能用
Unicode、ISO-8859-1等，根據你的需要定義。通常這樣定義就可以了。但是要補充說明的是，XML 文檔並不是這樣定義語言編碼的，XML
的定義方式如下：
<?xml version="1.0" encoding="gb2312"?>
你在
Macromedia.com 的首頁代碼 W3C
推薦使用的定義方法。那為什麼我們不直接採用這種方法呢？原因是一些瀏覽器對標準的支援不完善，不能正確理解這樣的定義方法，比如
IE6/windows。所以在目前過渡方案下，我們依然推薦使用 meta 方式。當然，你可以兩種方法都寫。
看本
<meta http-equiv="Content-Language" content="gb2312" />
這是針對老版本
注意：在上面聲明語句的最後，你看到有一個斜杠"/"，這和我們以前的 HTML4.0
的代碼寫法不同。原因是 XHTML
文法規則要求所有的標識都必須有開始和結束。例如<body>和</body>、<p>和</p>等，對於不成對的標識，要求在標識最後加一個空格，然後跟一個"/"。例如<br>寫成<br
/>、<img>寫成<img />，加空格的原因是避免代碼連在一起瀏覽器不識別。
調用樣式表
用web 標準設計網站，過渡的方法主要是採用
XHTML+CSS，css樣式表是必不可少的。這就要求所有網頁設計師必須熟練掌握CSS，如果你以前不常用，那麼現在就開始學習吧。要製作符合
web標準的網站，不懂 CSS 是設計不出漂亮的頁面的。
事實上，所有表現的地方都需要用 CSS 來實現。我們以前都習慣用 table
來定位和布局，現在要改用 DIV
來定位和布局。這是思維方式的變化，一開始有些不習慣。呵呵，任何變革都會有阻力的，為了享受標準帶來的"益處"，放棄一些老的傳統做法是值得的。
外部調用樣式表
在以前，我們通常採用 2種方法使用樣式表：頁面內嵌法：就是將樣式表直接寫在頁面代碼的
head 區。類似這樣：
<style
type="text/css"> <!-- body { background : white ; color : black ; } -->
</style>
外部調用法：將樣式表寫在一個獨立的.css 檔案中，然後在頁面 head 區用類似以下代碼調用。
<link rel="stylesheet"
rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合 web 標準的設計中，我們使用外部調用法，好處不言而喻，你可以不修改頁面只修改.css
檔案而改變頁面的樣式。如果所有頁面都調用同一個樣式表檔案，那麼改一個樣式表檔案，可以改變所有檔案的樣式。
雙表法調用樣式表
查看某些符合標準網站的原代碼，你可能看到，在調用樣式表的地方有如下
2句：
<link rel="stylesheet"
rev="stylesheet" href="css/style.css"
type="text/css" media="all" />
<style type="text/css" media="all">@import url( zss/style01.css
);</style>
為什麼要寫兩次呢？
實際上一般 (就是第
)就足夠了。我這裡使用雙表調用只是一種樣本。其中的"@import"命令用於輸入樣式表。而"@import"命令在 netscape 4.0 版本
netscape 4.0 瀏覽器中隱藏，在 4.0
以上或其它瀏覽器中又顯示的時候，你可以採用"@import"命令方法調用樣式表。
4.為圖片添加 alt 屬性
為所有圖片添加 alt 屬性。alt
屬性指定了當圖片不能顯示的時候就顯示供替換文本純文字 alt 屬性，代碼才會被 W3C 正確性校正通過。注意的是我們要添加有意義的
alt屬性，象下面這樣的寫法毫無意義：
<img src="logo.gif"
alt="logo.gif">
正確的寫法：
<img src="logo.gif" alt="互動力工作室標誌，點擊返回首頁">
5.給所有屬性值加引號
在 HTML 中，你可以不需要給屬性值加引號，但是在 XHTML
中，它們必須被加引號。還必須用空格分開屬性。例：
<hr width="75%"size="7"/>
這也是不正確的
6.關閉所有的標籤
在 XHTML 中，每一個開啟的標籤都必須關閉。空標籤也要關閉，在標籤尾部使用一個正斜杠
"/"來關閉它們自己。例如：
<br />
7.收藏夾小表徵圖
例如：首先製作一個 16x16 的 icon 表徵圖，命名為
favicon.ico，放在根目錄下。然後將下面的代碼嵌入 head 區：
<link rel="icon" href="/favicon.ico"
type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico"
type="image/x-icon" />
如果你將本 加入收藏夾，可以看到在收藏夾網址之前的 IE 表徵圖變成了一個 16x16
的 icon 表徵圖，命名為 favicon.ico，放在根目錄下。然後將下面的代碼嵌入 head 區：
<link rel="icon" href="/favicon.ico"
type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico"
type="image/x-icon"
/>
為搜尋引擎準備的內容
代碼如下，替換成你自己網站的內容就可以：
允許搜尋機器人搜尋站內所有連結。如果你想某些頁面不被搜尋，推薦採用
robots.txt 方法
<meta content="all" name="robots"
/>
佈建網站作者資訊
<meta name="author" content="ajie@netease.com,阿捷"
/>
佈建網站著作權資訊
<meta name="Copyright" content="www.w3cn.org,自由著作權,任意轉載"
/>
網站的簡要介紹(推薦)
<meta name="description" content="新網頁設計師。web 標準的教程網站，推動 web
標準在中國的應用" />
網站的關鍵詞(推薦)
<meta
content="designing, with, web, standards, xhtml, css, graphic, design, layout,
usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />
先介紹這麼多。補充說明，前面花了 5 節都是講 head 區的代碼，實際頁面內容還一字未提，呵呵，不要急，其實 head
區是非常重要的，看一個頁面的 head
的代碼就可以知道設計師是否夠專業。
8.用 CSS 定義元素外觀
用 css
布局的一個好處是可以批量對頁面進行修改，它能將文檔結構和表現層分離開來，減輕工作量和伺服器的負荷，增加網站的擴充能力和應用。
css
是不區別空格和大小寫，下面是一些基礎的歸納
1.顏色值
顏色值可以用 RGB 值寫，例如：color :
rgb(255,0,0)，也可以用十六進位寫，就象上面例子 color:#FF0000。如果十六進位值是成對重複的可以簡寫，效果一樣。例如:#FF0000
可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B 必須寫滿六位。
2.定義字型
web 標準推薦如下字型定義方法：
body {
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;
}
字型按照所列出的順序選用。如果使用者的電腦含有 Lucida Grande 字型，文檔將被指定為 Lucida
Grande。沒有的話，就被指定為 Verdana 字型，如果也沒有 Verdana，就指定為
Lucida字型，依此類推。
Lucida Grande 字型適合 Mac OS X；
Verdana 字型適合所有的 Windows 系統；
Lucida 適合 UNIX 使用者
"宋體"適合中文簡體使用者;
如果所列出的字型都不能用，則預設的 sans-serif 字型能保證調用;
3.群選取器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，：
p, td, li { font-size : 12px ; }
4.派生選取器
可以使用派生選取器給一個元素裡的子項目定義樣式，例如這樣：
li strong {
font-style : italic; font-weight : normal；}
就是給 li 下面的子項目 strong
定義一個斜體不加粗的樣式。
5.id 選取器
用
CSS 布局主要用層"div"來實現，而 div 的樣式通過"id 選取器"來定義。例如我們首先定義一個層
<div
id="menubar"></div>
然後在樣式表裡這樣定義：
#menubar {MARGIN:
0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定義的 id
名稱。注意在前面加"#"號。
id 選取器也同樣支援派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
這個方法主要用來定義層和那些比較複雜，有多個派生的元素。
6.類別選取器
在CSS
裡用一個點開頭表示類別選取器定義，例如：
.14px {color : #f60 ;font-size:14px
;}
在頁面中，用 class=
"類別名"的方法調用：
<span class="14px">14px
大小的字型</span>
這個方法比較簡單靈活，可以隨時根據頁面需要建立和刪除。
7.定義連結的樣式
CSS
中用四個偽類來定義連結的樣式，
分別是：a:link、a:visited、a:hover 和 a : active，例如：
a:link{font-weight : bold ;text-decoration : none
;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color
: #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color :
#f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90
;}
以上語句分別定義了
"連結、已訪問過的連結、滑鼠停在上方時、點下滑鼠時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“
。
8.組合使用選取器創造精緻的設計效果
用漂亮的圖案代替普通無序列表前沉悶的黑點。網站
http://marine.happycog.com/
先用 css 規則告訴類別屬性 inventory 的無序列表。
ul.inventory{
list-style:disc
url(/images/common/lister2.gig) inside;}
它的調用標記:
<ul class="inventory">
<li><a
href="/angelfish">Angelfish</a>(67 items)</li>
<li><a
href="/angeld">Angels/Frogfish</a>(35
items)</li>
<li><a href="/anthias">Angelfish</a>(5526
items)</li>
<li><a href="/basslets">Angelfish</a>(15
items)</li>
<ul>
9.縮寫是按照順時針的順序
margin:25px 0 25px 0;
10.行高
line-height:150% 說明行距為正常的
150%
XHTML 程式碼規範
在開始正式內容製作之前，我們必須先瞭解一下
web標準有關代碼的規範。瞭解這些規範可以協助你少走彎路,儘快通過代碼校正。
1.所有的標記都必須要有一個相應的結束標記
以前在 HTML
中，你可以開啟許多標籤，例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在 XHTML
中這是不合法的。XHTML 要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。例如:
<br /><img height="80" alt="網頁設計師"
src="../images/logo_w3cn_200x80.gif" width="200" />
2.所有標籤的元素和屬性的名字都必須使用小寫與HTML 不一樣，XHTML
對大小寫是敏感的，<title>和<TITLE>是不同的標籤。XHTML
要求所有的標籤和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常
dreamweaver 自動產生的屬性名稱字"onMouseOver"也必須修改"onmouseover"。
3.所有的XML
標記都必須合理嵌套
同樣因為 XHTML
要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：
<p><b></p>/b>
必須修改為：
<p><b></b>/p>
就是說，一層一層的嵌套必須是嚴格對稱。
4.所有的屬性必須用引號""括起來
在HTML
中，你可以不需要給屬性值加引號，但是在 XHTML 中，它們必須被加引號。例如:
<height=80>
必須修改為：
<height="80">
特殊情況，你需要在屬性值裡使用雙引號，你可以用"，單引號可以使用'，例如：
<alt="say'hello'">
5.把所有<和&特殊符號用編碼錶示
任何小於符號（<），不是標籤的一部分，都必須被編碼為&
l t ;
任何大於符號（>），不是標籤的一部分，都必須被編碼為& g
t ;
任何與號（&），不是實體的一部分的，都必須被編碼為& a
m p;
註：以上字元之間無空格。
6.給所有屬性賦一個值
XHTML 規定所有屬性都必須有一個值，沒有值的就重複本
<td nowrap> <input type="checkbox" name="shirt"
value="medium" checked>
必須修改為：
<td nowrap="nowrap">
<input type="checkbox" name="shirt" value="medium" checked="checked">
7.不要在注釋內容中使“--”
“--”只能發生在
XHTML
注釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:
<!--這裡是注釋-----------這裡是注釋-->
用等號或者空格替換內部的虛線。
<!--這裡是注釋============這裡是注釋-->
以上這些規範有的看上去比較奇怪，但這一切都是為了使我們的代碼有一個統一、唯一的標準，便於以後的資料再利用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
