學習內容

?????????XHTML 的發展歷程

?????????XHTML 和 HTML 的區別

?????????XHTML的DOCTYPE和基本標簽

?????????CSS 常用屬性

能力目標

?????????熟練掌握XHTML 和 HTML 的區別

?????????理解XHTML的DOCTYPE

?????????掌握創建簡單的XHTML頁面布局

本章簡介

在上一階段我們全面地學習了客戶端頁面技術的實現——HTML，內容包括：HTML 基本標簽、表單和框架的使用、模板的制作和應用以及常用的網頁布局特效等。通過學習，我們已經可以使用所學技術完成企業級門戶網站的靜態頁面設計。但在實際應用過程中，設計師設計的頁面在不同瀏覽器中的瀏覽效果不夠一致，將導致頁面不能兼容的問題，例如：在頁面中定義一個層，使用 width 和 height屬性設計層的大小，IE瀏覽器在解析 width 和 height 屬性時將包含邊框和內邊距的大小，而使用符合 W3C標準的瀏覽器FireFox 在解析時不包含邊框和內邊距的大小。為保證設計出符合 Web標準的頁面，兼容多種瀏覽器版本包括信息家電產品，如手機、PDA 、平板電腦等，我們將在本階段學習 XHTML 的相關知識，以及如何使用 XHTML + DIV + CSS 技術對客戶端頁面進行重構，從而保證瀏覽效果完全一致。

核心技能部分

1.1 .XHTML簡介

1.1.1????? . 為什么使用 XHTML

HTML發展到目前主要存在以下幾個缺點：

1.? 代碼簡單 隨著科技的發展，可以接入網絡的設備越來越多；智能手機、網絡電視等。HTML不能適應現在越多的網絡設備和應用的需要，智能手機、PDA、信息家電等都不能直接顯示HTML。

2.? 結構臃腫由于HTML代碼不規范、臃腫，瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然手機上裝一個IE8是不可能的，空間不夠，運算速度也跟不上。

3.? 可擴展性差可擴展標記語言允許應用程序開發者為具體的應用環境定義自定義的標記，但是在HTML環境中，開發人員被瀏覽器開發者和W3C組織定義的標簽集所限制。

4.? 數據與表現混雜網站要改變顯示樣式，就必須重新制作HTML。對不同的網絡設備顯示同樣的數據都需要制作不同的HTML。

HTML 只有不斷地發展才能解決這些問題，因此W3C制定了XHTML；XHTML是 HTML 向XML過渡的一個橋梁。

1.1.2????? 什么是 XHTML

XML是一種可擴展性標簽語言，用來描述數據，其中所有的內容都要被準確地定義，才能產生格式良好的文檔；而 HTML 則用來顯示數據的。由于運行在用戶機器上的瀏覽器種類繁多，在技術實現細節上難免存在差異。為了解決瀏覽器的兼容性，W3C 組織結合HTML 和 XML各自的長處，形成了一種新的 HTML語言規范——XHTML。

XHTML (Extensible HyperText Markup Language) 指可擴展超文本標簽語言，是 W3C 組織在HTML 4.0 的基礎上，利用XML 的規則對其進行重構，得到的 XHTML。 建立 XHTML 的目的是實現HTML 向XML的過渡。XHTML可以廣泛應用于各種平臺和終端，如圖1.1.1 所示。

圖 1.1.1? XHTML應用各種平臺和終端

1.2 XHTML特點及發展優勢

XHTML產生的原因，一方面是為了迎合未來的XML大量的應用，另一方面還要兼容目前的數以萬計的用HTML編寫的網頁以及他們的設計者，開發者相兼容；于是便出現了XHTML。在HTML編寫的網頁中，標記使用有些混亂。由于許多瀏覽器都有自己的私有標簽，而私有標簽的大規模應用，就導致了不同瀏覽器上訪問同一個網頁的結果不同。舉個例子iframe標簽，就是IE的私有標簽。

XHTML的產生正是為了統一這種標記使用混亂的局面，瀏覽器廠商將聯合采用“嚴格的錯誤防御標準”，如果XML代碼不兼容，瀏覽器將不再顯示。 這可以說也是對瀏覽器的一個改變，目前的瀏覽器，為了最大限度的容錯，把網頁中的內容，最大限度的顯示出來。而改變之后，變成只要不符合標準就不顯示。就像代碼編譯中的警告信息一樣，目前是忽略有可能導致問題的警告，而將來會把警告也作為錯誤來處理。

XHTML特點：

?????????標簽要配對出現；

?????????標簽名及其屬性名小寫；

?????????單獨標簽也要使用 /> 關閉，例如
變成
；

?????????屬性值用雙引號引起來，屬性縮寫被禁用；

?????????使用id代替name等。

1.3 如何過渡到 XHTML

制作 XHTML頁面，首先要聲明符合需求的DOCTYPE，瀏覽器會根據頁面聲明的DOCTYPE 規則顯示頁面效果，保證在任何類型的瀏覽器中頁面顯示風格的一致性，DOCTYPE是 document type (文檔類型)的簡寫，表明頁面所采用的是XHTML版本。XHTML的基本結構如下：

DTD (例如上例中的 xhtmll-transitional.dtd)稱作文檔類型定義，其中包含了頁面文檔的規則，瀏覽器會根據用戶聲明的DTD來解析頁面上的標簽，并顯示相應的效果。

XHTML 1.0提供 3種DTD聲明可供選擇：

?????????過渡類型 (Transitional)：要求非常寬松的 DTD，兼容HTML 4.01 的版本。

DOCTYPE代碼如下：

< html xmlns= "http://www.w3.org/1999/xhtml">

?????????嚴格類型 (Strict)：要求嚴格的 DTD，不能使用在新規范中已經廢除的標簽和屬性。

DOCTYPE代碼如下：

?????????框架類型 (Frameset)：包括過渡類型的所有內容及頁面框架部分。

DOCTYPE代碼如下：

過渡類型兼容以前版本定義，可以繼續使用在XHTML新規范中已經廢除的標簽和屬性；嚴格類型則不兼容已經廢除的標簽和屬性。在實際開發中建議使用過渡類型的 DTD。

1.4 XHTML與HTML區別

如何快速地將 HTML頁面轉換成XHTML頁面？它和HTML之間究竟有什么不同之處？需要再重新學習、記憶一些新標簽嗎？答案是否定的。XHTML是在HTML基礎上經過改進而制定的一套規范，即編寫XHTML頁面時，遵循 XHTML規范就可以輕松地制作出 XHTML 頁面。

以下是編寫XHTML時需要遵循的一些規范。主要包括：

?????????HTML元素必須正確地嵌套；

?????????XHTML元素必須被關閉；

?????????標簽名必須用小寫字母；

?????????XHTML文檔必須擁有根元素；

?????????屬性名稱必須小寫；

?????????屬性值必需加引號；

?????????屬性不能簡寫；

?????????用 id屬性代替name屬性；

?????????XHTML DTD 定義了強制使用的 HTML元素。

1.4.1??. 標簽必須嚴格嵌套

HTML：

XHTML：

1.4.2??. 標簽名稱必須小寫

HTML：

這是一個文本段落

XHTML：

這是一個文本段落

1.4.3??. 屬性名稱必須小寫

HTML：

test 頁面

XHTML：

test 頁面

1.4.4??. 標簽名稱必須封閉

HTML：

這是一個文本段落

XHTML：

這是一個文本段落

即使是空元素的標簽也必須封閉。

HTML：

這是一個文本段落

XHTML：

這是一個文本段落

1.4.5??. 屬性值用雙引號括起來

HTML：

NBA快訊

XHTML：

NBA快訊

1.4.6??. 屬性值必須使用完整形式

HTML :

XHTML：

1.4.7??. 用 id 屬性代替 name 屬性

在XHTML 中不建議使用 name屬性，應該使用 id取而代之。

HTML：

XHTML：

1.4.8??. 強制使用的 XHTML 元素

所有 XHTML 文檔必須進行文檔類型聲明? (DOCTYPE declaration)，文檔中必須存在 html、head、body元素，并且 title元素必須在 head元素中。

下面是一個完整的 XHTML文件結構：

1.4.9??. XHTML文檔必須擁有一個根元素

所有的 XHTML 的元素必須嵌套于 根元素中，其余所有的元素可以有子元素，子元素必須是成對的且被嵌套在其父元素之中，基本結構如下：

. . . . . .

1.5 XHTML基本標簽

從布局角度可以將標簽分成兩大類：block (塊狀)和 inline (行內)。本章列舉了標題、項目列表、水平線、段落、換行、超鏈接層、行級容器等標簽。

1.5.1??. 塊狀標簽

默認狀態下，塊狀元素的寬度為 100%，且后面隱藏附帶有換行符，所以塊狀元素始終占據一行。以下列舉一些常用的塊狀標簽：

1. 標題標簽 到

標題標簽用于分隔正文、總結正文內容，到

標簽可定義標題，定義最大的標題，

定義最小的標題。

1.1

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

在瀏覽器中預覽的效果如圖 1.1.2所示。

圖 1.1.2? 標題標簽

2. 段落標簽

標簽用于將長文本分段落顯示，其中可以加入文字、列表、表格等；該標簽需成對出現。

段落內容

3. 水平分割線標簽

---

---

標簽用于在網頁上插入一條水平分隔線。

< hr/>

1.2

歡迎學習XHTML頁面設計

---

默認狀態下，塊狀元素的寬度為 100%,

塊狀元素始終占據一行。

在瀏覽器中預覽的效果，如圖 1.1.3所示。

圖 1.1.3? 段落和水平線標簽

4. 項目列表

標簽用于列舉沒有先后順序的項目元素，故又稱無序列表。

• 項目元素

1.3

• 唐僧
• 豬八戒
• 孫悟空
• 沙悟凈

在瀏覽器中預覽的效果如圖 1.1.4所示。

圖 1.1.4? 無序列表

其中type還有 circle（圓圈）、disc（圓點）兩個常用選項。

5. 項目編號

標簽用于列舉有先后順序的項目元素，故又稱有序列表。

1. 項目元素

1.4

1. 唐僧
2. 豬八戒
3. 孫悟空
4. 沙悟凈

在瀏覽器中預覽的效果如圖 1.1. 5 所示。

圖 1.1.5? 有序列表

6. 層標簽

標簽用于在頁面上定義一個內容塊，其中可以存放任何內容，如文本、表格、圖像等。

文本內容

1.5

CSS樣式代碼：

HTML 代碼片段：

導航欄

在瀏覽器中預覽的效果如圖 1.1.6所示。

圖 1.1.6?

標簽

1.5.2??. 行內標簽

行內標簽在默認情況下沒有寬度和高度，其寬度和高度由行內標簽中的內容決定，所以定義它的 width和 height屬性無效，可以修改行內標簽的 CSS樣式屬性 display為 block來更改其顯示方式為塊狀顯示。

1. 換行標簽



標簽用于在同一個段落中換行。

< br/>

1.6

這是第一段落中的第一行，

這是第一段落中的第二行

這是第二段落中的第一行，


這是第二段落中的第二行

在瀏覽器中預覽的效果如圖 1.1.7所示。

圖 1.1.7?

標簽

2. 超鏈接標簽

（1） 超鏈接 通過使用 href屬性，可以創建指向另外一個文檔的鏈接。

鏈接文字

（2）錨點 通過使用 name 或 id屬性，創建一個文檔內部的書簽 (即可以創建指向文檔片段的鏈接)。

返回頂部

（3）發送電子郵件 鏈接到某個指定的電子郵件地址，此用法可以打開郵件客戶端程序，用于給指定帳戶發送郵件，但是在用戶機器上需要安裝郵件客戶端軟件才可以使用此功能。

聯系我們

1.7

網易

后臺管理

聯系我們

在瀏覽器中預覽的效果如圖 1.1.8所示。

圖 1.1.8? 標簽

3. 行級文本標簽

標簽一般被用在文本行中修飾特定文本的顯示屬性，或者局部輔助div標簽完善頁面布局。

行級文本內容

1.8

CSS樣式代碼：

HTML代碼片段：

CSS的概念

---

CSS（Cascading Style Sheet，可譯為"層疊樣式表"或"級聯樣式表"）是一組格式設置規則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可將頁面的內容與表現形式分離。

在瀏覽器中預覽的效果如圖 1.1.9所示。

圖 1.1.9span標簽

1.6 CSS常用樣式屬性

XHTML用來顯示頁面數據，CSS 則可以提供更多的網頁樣式，并控制頁面元素的外觀，使網頁元素更加豐富多彩。以下是一些常見的 CSS 布局屬性。

1.6.1????? 顯示屬性(display)

display屬性用于設定對象如何顯示。

display : value;

display取值說明：

?????????none：設置頁面元素不顯示

?????????block：設置頁面元素以塊狀方式顯示

?????????inline：設置頁面元素在一行顯示

1.9

CSS代碼：

HTML代碼：

使用了display:block;

沒有使用display:block;

在瀏覽器中預覽的效果如圖 1. 1. 10 所示。

圖 1. 1. 10display 屬性

1.6.2????? 漂浮屬性(float)

float屬性定義元素在某個方向上浮動。

float：value;

float取值說明：

?????????left：設置元素漂浮到父級容器的左側

?????????right：設置元素漂浮到父級容器的右側

?????????none：設置元素不使用漂浮

1.10

CSS代碼：

HTML代碼片段：

• 首頁
• 博客
• 日記

在瀏覽器中預覽的效果如圖 1. 1. 11 所示。

圖 1. 1. 11float 屬性

1.6.3????? 外邊距 (margin)和 內邊距(padding)

margin屬性用來定義塊狀容器四周的空白大小，padding屬性用來定義塊狀容器內部的內容距離四周邊框的空白大小 (圖 1.1.12)。

圖 1.1.12? margin 和 padding

margin：value ;

padding：value ;

margin和padding值使用計算機的相對單位或絕對單位。例如外邊距的值需要設置5個像素應寫為 margin：5px。其中：padding 不允許為負值，

padding: 2px; /* 定義元素四周內邊距為2px */

padding: 2px 4px; /* 定義元素上下內邊距為2px， 左右內邊距為4px */

padding: 2px 4px 6px; /* 定義元素上內邊距為2px， 左右內邊距為4px ，下內邊距為6px*/

padding: 2px 4px 6px 8px; /* 定義元素上內邊距為2px， 右內邊距為4px ，下內邊距為6px，左內邊距為8px*/

1.11

CSS代碼：

HTML代碼片段：

網頁banner部分

熱賣商品

在瀏覽器中預覽的效果如圖 1. 1. 13 所示。

圖 1.1.13?? 邊距應用

1.7 建立第一個XHTML布局頁面

建立一個簡單的上中下三行的XHML布局，請執行以下步驟：

?????????打開 Dreamweaver 網頁開發工具；

?????????選擇“文件”→“新建” →“文檔類型”，選擇“XHTML 1.0 Transitional”，如圖 1.1.14所示；

圖 1.1.14? 選擇 DOCTYPE

?????????編寫代碼；

導航欄部分