Web標準把網頁分成三個獨立組成部分:
* 結構:HTML，XHTML，XML
* 表現:CSS1，CSS2
* 行為:ECMAScript, DOM
Web標準至今漢有對外觀審美做任何指導方針和戒律，對網站的外觀和感覺沒有做任何限制，它們只不過使瀏覽器能夠正確地表現設計師建立的網站，協助客戶根據公司的市場需求和使用者分析來制定目標。
Web標準可以做到:
* 在圖形瀏覽器上更精確的控制、定位和排版
* 複雜的互動行為
* 可訪問性
* 支援多種瀏覽器
* 新、舊瀏覽器都可以工作
* 保證可以工作在將來的遊覽器上
* 重新設計網站時間縮短
* 支援非傳統裝置
* 易為任何網頁提供適合列印的版本
* 在發布流程中易重新設計文檔
* HTML轉換到XML基礎的置標語言
使用web標準的原因:
* 增強互動能力
* 增強可訪問性
* 減少維護工作量
* 減少頻寬
* 降低成本
XHTML是一個基於XML的置標語言，看起來與HTML有些想像，只有一些小的但重要的區別。可以這樣看，XHTML就是一個扮演著類似HTML的角色的XML。
本質上說，XHTML是一個橋接(過渡)技術，結合了XML(有幾分)的強大功能及HTML(大多數)的簡單特性。
----Jeffery Zeldman
切換到XHTML的10個理由:
* XHTML是當前替代HTML4標記語言的標準。
* XHTML是能與其它基於XML的標記語言、應用程式及協議進行良好的互動工作。
* XHTML比HTML有更好的一致性。
* XHTML1.0是通向XHTML未來版本的橋樑
* 老的瀏覽器能適應XHTML
* 新瀏覽器都優待XHTML而不是HTML
* XHTML能很好在無線裝置等其它使用者代理程式上。
* XHTML是Web標準家族的一部分
* XHTML可助你去掉表現層代碼的惡習
* XHTML可助你養成標記校正來測試頁面工作的習慣
XHTML規則:
* 以正確的DOCTYPE和名字空間開始
* 使用META內容元素宣告你的內容編碼語言
* 用小寫字母寫所有元素和屬性名稱
* 給所有的屬性值加引號,屬性間以空格分隔。
* 給所有的屬性賦一個值
* 關閉所有標籤
* 用空格和斜線關閉空標籤
* 不要在注釋內容中使用"――"
* 確保使用<和&表示< 和 & .
XHTML1提供的DTD有三種:
* Transitional,過渡的，最寬鬆的DTD，唯一容忍表現層的標記、垃圾元素和屬性的DTD
* Strict,嚴格的，
* Frameset,架構的，
XHTML聲明內容編碼的方法:
* XML prolog,即,但瀏覽器多不處理此
* 中插入Content-Type元素指定編碼語言，
* 通過web伺服器上返回的HTTP頭部設定編碼語言，w3c推薦這種方法。
增加結構的通用機制
* DIV和SPAN元素，聯合id和class屬性，提供了一個把結構添加到文檔的通用機制。
* 這些元素定義了內建的內容(SPAN)和者塊層級(DIV)，而沒有在內容中引入其它表現層的東西。
* ID屬性類似於代碼中的特殊地區的標籤，提示那個地區需要特殊的處理。當一個ID屬性值被用於一個特殊設定的CSS，它稱為CSS選取器，id是建立一個選取器的最容易和通用的方法。
* ID的命名須用字母和底線開頭，不能用數字進行開頭。
ID的功能
* 作為一個樣式表選取器，最小化XHTML分頁檔;
* 作為超鏈的錨(anchor)，替代過時的name屬性;
* DOM指令碼中引用元素的方法;
* 作為一個聲明的對象元素名字;
* 作為通常目的流程處理的工具。
# 一個樣式表，是一個集合，一個由一個或多個規則定義組成的集合，這些定義將決定被選中的元素如何被顯示。
# 一個CSS定義由兩部分組成:選取器和聲明。其中，聲明是也是一個集合，集合元素放在一對{｝內，每一元素以";"結束，每個元素由兩部分組成:屬性和值，屬性和值之間用": "分隔。
# 以#開頭的選取器，為id選取器，以.開頭的選取器為選取器。
# 多個選取器可以共用同一聲明，這時不同選擇之間以逗號分隔。
# 根據CSS，頁面的子項目從母元素繼承特性，但有些舊瀏覽器不支援(如Netscape 4)。如果不想讓子項目繼承母元素特性，則子項目可自由定義相關屬性。
# CSS不區分大小寫，但當與一個HTML檔案關聯時，類別和id名稱是區分大小寫。
# 為了便於編輯CSS,可以增加一些空格或分行符號。
# 樣式表可以通過三種方式作用於頁面的顯示
1. 外聯/匯入
<link rel="StyleSheet" href="/styles/mystylesheet.css" type="text/css" media="all />
或
<style type="text/css" media="all">
@import "/styles/mystylesheet.css";
</style>
或
<style type="text/css" media="all">
@import url("/styles/mystylesheet.css");
</style>
注:@Import 法只有5.0以上的瀏覽器支援
2. 嵌入(在XHTML頁面head位置嵌入)
| 以下是引用片段： <head> <style type="text/css"> <!- … --> </style> … </head> |
使用嵌入的原因:
* 該樣式表只用於本頁面
* 使用者還在使用IE3
* 設計師不斷修改樣式表，需要立即看到效果
3. 內聯(在元素上加上樣式屬性)
為整個網站指定字型:
* body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; }
* 由多個字母組成的字型名稱須用引號包括;
* 如果排在前面的字型不存在，則使用後面第一個存在的字型。
* "Lucida Grande"-Mac OS X ，Verdana-Windows ，Lucida---Unix ，Arial----舊windows ，Helvetica----舊Unix
* 利用冗餘解決瀏覽器不支援繼承的問題，如:
Body { font-family: Verdana, sans-serif; }P, td, ul, ol, ul, li, dl, dt,dd
{ font-family: Verdana, sans-serif; }
將無序列表前的黑點替換為一個圖片:
* ul.inventory{ list-style: disc url(/path/to/pic.gif) inside; }
對顏色的定義:
* P { color: red; }
* P { color: #ff0000; }
* P { color: #f00; }
* P { color: rgb(255,0,0); }
* P { color: rgb(100%,0%,0%); }
# 根據元素表現的內容來決定元素的樣式，避免過度的class，保持標記的簡潔整齊。
# 如:清單項目裡strong顯示為斜體而不是黑體。Li strong { Font-style: italic; Font-weight: normal; }
# 選取器的兩部分內容之間，以空格相隔，其中前一部分可以是一般選擇、id選取器、或類別選取器。
# 現代布局中，id選取器經常出現在內容選取器裡
如: #sidebar p {font-style:italic; text-align: right; margin-top: 0.5em; }
# 不能出現在或等標記的內嵌元素中。
# Id選取器標記的元素每個頁面只能出現一次，但一個id選取器可多次用於定義內容/派生選取器定義。
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
