1. 聲明文檔類型：
XHTML 1.0 提供了三種DTD聲明可供選擇：
a.?? 過渡的 (Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
b.?? 嚴格的 (Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
?c.?? 框架的 (Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
?2. 指定命名空間
<html xmlns="http://www.w3.org/1999/xhtml" lang="GB2312">
?3. 定義語言編碼
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<!--
<?xml version="1.0" encoding="gb2312"?>
有個別瀏覽器不支持這個寫法
-->
?4. 調用樣式表文件
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
?5. 其它head區設置
收藏夾小圖標
如果你將本站加入收藏夾，可以看到在收藏夾網址之前的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" />?
6. XHTML代碼規范
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注釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:
<!--這里是注釋-----------這里是注釋-->
用等號或者空格替換內部的虛線。
<!--這里是注釋============這里是注釋-->
以上這些規范有的看上去比較奇怪，但這一切都是為了使我們的代碼有一個統一、唯一的標準，便于以后的數據再利用。
7. CSS入門
1.基本語法規范
分析一個典型CSS的語句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；
樣式聲明寫在一對大括號"{}"中；
COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號";"分隔；
"#FF0000"和"#FFFFFF"是屬性的值(value)。
2.顏色值
顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子color:#FF0000?！ ∪绻M制值是成對重復的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復就不可以簡寫，例 如#FC1A1B必須寫滿六位。
3.定義字體
web標準推薦如下字體定義方法：
字體按照所列出的順序選用。如果用戶的計算機含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，；
Lucida Grande字體適合Mac OS X；
Verdana字體適合所有的Windows系統；
Lucida適合UNIX用戶
"宋體"適合中文簡體用戶;
如果所列出的字體都不能用，則默認的sans-serif字體能保證調用;
4.群選擇器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，： p, td, li { font-size : 12px ; }
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
?
5.派生選擇器
可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：
li strong { font-style : italic; font-weight : normal；}
就是給li下面的子元素strong定義一個斜體不加粗的樣式。
6.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 ;}
以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。
8. CSS布局入門
1. ?
2.輔助圖片一律用背景處理?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
