1、第3章 網(wǎng)頁結(jié)構(gòu)語言XHTML,3.1 標(biāo)記語言簡介,3.1.1 標(biāo)準(zhǔn)通用標(biāo)記語言SGML SGML有高穩(wěn)定性與完整性的優(yōu)點，這使得SGML可以適用在各類應(yīng)用領(lǐng)域。由于SGML的高度完整性與穩(wěn)定性，相對的其復(fù)雜性也高，造成其高費用。,3.1.2 超文本標(biāo)記語言HTML 在HTML中被制定的DTD有3種： Strict DTD。 Transitional DTD。 Frameset DTD。,3.1.3 可擴(kuò)展標(biāo)記語言XML XML（eXtensible Markup Language，可擴(kuò)展標(biāo)記語言）是W3C組織于1998年2月發(fā)布的標(biāo)準(zhǔn)，它的目的是定義一種互聯(lián)網(wǎng)上交換數(shù)據(jù)的標(biāo)準(zhǔn)。,3.1.4

2、 可擴(kuò)展超文本標(biāo)記語言XHTML XHTML（Extensible Hyper Text Markup Language，可擴(kuò)展超文本標(biāo)記語言）的XHTML 1.0規(guī)范也于2000年1月通過W3C的審核與推薦。,3.2 XHTML文檔基礎(chǔ),3.2.1 XHTML文檔的基本結(jié)構(gòu) 現(xiàn)在以一個XHTML文檔實例，來介紹XHTML文檔的基本結(jié)構(gòu)，并由基本結(jié)構(gòu)認(rèn)識、等控制標(biāo)記的使用。 【例3-1】,XHTML文檔是一種純文本格式的文件，XHTML文檔由被標(biāo)記的內(nèi)容和標(biāo)記組成，XHTML文檔的基本結(jié)構(gòu)為：,3.2.2 標(biāo)記及XHTML代碼規(guī)范,1標(biāo)記及其屬性 XHTML文檔由標(biāo)記和被標(biāo)記的內(nèi)容組成。標(biāo)記（

3、tag，在Dreamweaver中文版中，tag被翻譯為標(biāo)簽）能產(chǎn)生所需的各種效果。格式為： 受標(biāo)記影響的內(nèi)容 有些標(biāo)記不是成對的，稱為單標(biāo)記。其格式為： 例如，插入圖片標(biāo)記表示為： ,2XHTML代碼規(guī)范 (1) 所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記 (2) 所有標(biāo)記的名稱和屬性的名字都必須使用小寫 (3) 所有的標(biāo)記都必須合理嵌套 (4) 所有屬性必須用引號括起來 (5) 把所有“”和“&”特殊符號用編碼表示 (6) 給所有屬性賦一個值 (7) 不要在注釋內(nèi)容中使“-”,3.2.3 聲明文檔類型 其格式為： XHTML 1.0提供了三種DTD聲明可供選擇，這三種DTD的名稱分別是： 過渡

4、的（Transitional） 嚴(yán)格的（Strict） 框架的（Frameset）,3.2.4 XHTML文檔根標(biāo)記與聲明命名空間 XHTML文檔標(biāo)記的格式為： 文檔的內(nèi)容 ,3.2.5 XHTML文檔頭和文檔標(biāo)題標(biāo)記 XHTML文檔頭標(biāo)記的格式為： 網(wǎng)頁的標(biāo)題 【例3-2】,3.2.6 XHTML文檔主體標(biāo)記 XHTML文檔主體標(biāo)記的格式為： 網(wǎng)頁的內(nèi)容 主體位于頭部之后，以為開始標(biāo)記，為結(jié)束標(biāo)記。,3.3 網(wǎng)頁文件的創(chuàng)建,3.3.1 編輯和保存網(wǎng)頁文件 用任何網(wǎng)頁編輯器都能編輯制作XHTML文件。下面用最簡單的“記事本”來編輯網(wǎng)頁。 打開記事本。 創(chuàng)建新文件，并按XHTML語言規(guī)則編輯。

5、保存網(wǎng)頁。 網(wǎng)頁文件的擴(kuò)展名是.html或.htm。首頁（主頁）文件名設(shè)為index.html或index.htm。,3.3.2 預(yù)覽和修改網(wǎng)頁文件 打開.html網(wǎng)頁文件最簡單的方法是用“Windows資源管理器”或“我的電腦”。,3.4 文本標(biāo)記,3.4.1 注釋標(biāo)記 注釋標(biāo)記的格式為： 結(jié)束標(biāo)記與開始標(biāo)記可以不在一行上，長度不受限制。,3.4.2 強制換行和不換行標(biāo)記 強制換行標(biāo)記的格式為： 文字 不換行標(biāo)記格式為： 文字 【例3-3】,3.4.3 特殊字符 常用的特殊字符見表3-1。,3.4.4 段落標(biāo)記 段落標(biāo)記的格式為： 文字 【例3-4】,3.4.5 標(biāo)題文字標(biāo)記 標(biāo)題文字標(biāo)記的

6、格式為： 標(biāo)題文字 【例3-5】,3.4.6 水平線標(biāo)記 水平線標(biāo)記的格式為： color設(shè)定線條顏色，默認(rèn)為黑色。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個十六進(jìn)制數(shù)代碼來表示，見表3-2。,【例3-6】,3.4.7 特定文字樣式標(biāo)記 在顯示文字時，有時會對某些短語顯示一些特定的字形來產(chǎn)生一定的突出、區(qū)別、強調(diào)等效果。 .（emphasis）被用來強調(diào)文本，顯示為斜體字。 .（strong emphasis）是近一步強調(diào)，顯示為粗體字。 .作為上標(biāo)樣式顯示。 .作為下標(biāo)樣式顯示。 【例3-7】,3.4.8 原樣顯示文本標(biāo)記 其格式為： 文本 中不能包含、等標(biāo)記。 【例3-8】,3.4.9 設(shè)

7、置網(wǎng)頁背景和文字的顏色 標(biāo)記的格式為： 網(wǎng)頁的內(nèi)容 【例3-9】,3.4.10 字體標(biāo)記 字體標(biāo)記的格式為： 被設(shè)置的文字 【例3-10】,3.5 超鏈接,3.5.1 錨點標(biāo)記 標(biāo)記的格式為： 超鏈接顯示文本 中不能包含其他，即自己不能嵌套。 URL的格式為： 通信協(xié)議:/鏈接地址/文件位置/文件名稱,3.5.2 鏈接到其他網(wǎng)頁,1鏈接到同一目錄中的網(wǎng)頁文件 目標(biāo)文件名是鏈接所指向的文件。鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為： 超鏈接顯示文本 【例3-11】,2鏈接到下一級目錄中的網(wǎng)頁文件 鏈接到下一級目錄中網(wǎng)頁文件的格式為： 超鏈接顯示文本,3鏈接到上一級目錄中的網(wǎng)頁文件 鏈接到上一級目錄中網(wǎng)

8、頁文件的格式為： 超鏈接顯示文本 其中“./表示退到上一級目錄中。,4鏈接到同級目錄中的網(wǎng)頁文件 鏈接到同級目錄中網(wǎng)頁文件的格式為： 超鏈接顯示文本 表示先退到上一級目錄中，然后再進(jìn)入到目標(biāo)文件所在的目錄。,3.5.3 同一個網(wǎng)頁中的鏈接 同一個網(wǎng)頁中超鏈接標(biāo)記的格式為： 超鏈接顯示文本 即單擊源點超鏈接名稱，將跳轉(zhuǎn)到“錨點名稱”開始的位置。 書簽就是用標(biāo)記對該位置作一個記號。如果有多個鏈接，不同目標(biāo)位置要設(shè)置不同的記號。定義書簽的格式為： 目標(biāo)文本附近的文本 【例3-12】,如果要建立指向其他頁面某處的文本，格式為： 超鏈接顯示文本 要在跳轉(zhuǎn)到的位置處加上鏈接標(biāo)記： 目標(biāo)文本附近的文本,3.

9、5.4 鏈接到其他站點 使用http協(xié)議，可以建立鏈接到其他網(wǎng)站上網(wǎng)頁的超鏈接。其格式為： 超鏈接顯示文本 【例3-13】,3.5.5 鏈接到下載文件 如果鏈接到的文件不是HTML文件，而是作為下載的文件，其格式為： 超鏈接顯示文本 【例3-14】,3.5.6 鏈接到電子郵件 指向電子郵件鏈接的格式為： 超鏈接顯示文本 例如，E-mail地址是goodlook，郵件主題是“新年好”，則建立如下鏈接： goodlook,3.6 圖像,3.6.1 網(wǎng)頁的背景,1設(shè)置背景色 的bgcolor屬性用于設(shè)置網(wǎng)頁的背景色。格式為： 網(wǎng)頁內(nèi)容 “顏色值”可以為顏色的英文名或相應(yīng)十六進(jìn)制值。,2用圖片作為背景

10、 使用標(biāo)記的background屬性，可為網(wǎng)頁鋪上背景圖像。格式為： 網(wǎng)頁內(nèi)容 在瀏覽器中滾動網(wǎng)頁內(nèi)容時，如果希望背景圖像固定不動，可在中加入屬性bgproperties=fixed。 【例3-15】,3.6.2 圖像標(biāo)記 圖像標(biāo)記的格式為： 【例3-16】 【例3-17】 文本將不再環(huán)繞圖片。格式為： 其中clear的取值可為：left（取消在圖片左側(cè)放置的文本）、right（取消在圖片右側(cè)放置的文本）或all（取消在圖片左、右側(cè)放置的文本）。 【例3-18】,3.6.3 用圖像作為超鏈接 把標(biāo)記放在和之間，這個圖像就可作為超鏈接，圖像被加上藍(lán)色邊框，單擊圖像將跳轉(zhuǎn)到其他地址。格式為： 例如

11、，【例3-18】中的代碼： ,3.7 列表,3.7.1 無序列表標(biāo)記 無序列表中每一個表項的前面是項目符號（如、等符號）。建立無序列表可使用標(biāo)記和表項標(biāo)記。格式為： 第一個列表項 第二個列表項 【例3-19】,3.7.2 有序列表標(biāo)記 通過帶序號的列表可以更清楚地表達(dá)信息的順序。使用標(biāo)記可以建立有序列表，表項的標(biāo)記仍為。格式為： 表項1 表項2 【例3-20】 【例3-21】,3.8 表格,3.8.1 簡單表格 最簡單的表格僅包括行和列。格式為： 表頭1 表頭2 表頭n 表項1 表項2 表項n 表項1 表項2 表項n 【例3-22】 【例3-23】,3.8.2 表格內(nèi)文字的對齊方式,1水平對齊

12、 表項數(shù)據(jù)的水平對齊用標(biāo)記、和的align屬性。align的屬性值分別為：left（左對齊）、center（居中）、right（右對齊）或justify（左右調(diào)整）。 【例3-24】,2垂直對齊 表項數(shù)據(jù)的垂直對齊用標(biāo)記、和的valign屬性。valign的屬性值分別為：top（靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項位置一致）。 【例3-25】,3.8.3 表格在頁面中的對齊方式 使用標(biāo)記的align屬性，格式為： 當(dāng)表格位于頁面的左側(cè)或右側(cè)時，文本填充在另一側(cè)。當(dāng)表格居中時，表格兩邊沒有文本。默認(rèn)情況下，文本在表格的下面。 【例

13、3-26】,3.8.4 表格的顏色和圖片背景 bgcolor=顏色或顏色值設(shè)置背景顏色。 background=圖片文件名設(shè)置背景圖片。 bordercolor=顏色設(shè)置表格邊框的顏色。 bordercolorlight=顏色設(shè)置表格邊框亮部的顏色。 rules=row,cols或none 設(shè)置表內(nèi)線的顯示方法，none為無內(nèi)線。,2內(nèi)嵌音頻播放插件 通過內(nèi)嵌音頻播放插件可以在瀏覽器中出現(xiàn)控制面板，也可作為背景音樂。其格式為： 【例3-28】,3IE中的背景音樂 可以插入背景音樂，只有在IE瀏覽器中才可以聽到。其格式為： 播放次數(shù)取-1或infinte時，聲音將一直播放直到關(guān)閉該網(wǎng)頁為止。,3

14、.9.3 視頻標(biāo)記 用瀏覽器可以播放的格式有：MOV、AVI、WMV等格式。,1鏈接一個視頻文件. 與鏈接音頻文件一樣，可將視頻文件做成一個超鏈接。其格式為： 超鏈接顯示文本 例如：播放一段視頻： 歡迎光臨,2內(nèi)嵌視頻播放插件 與播放音頻文件一樣，通過內(nèi)嵌視頻播放插件可以在瀏覽器中出現(xiàn)控制面板。其格式為： 【例3-29】,3.9 字幕、音頻和視頻 3.9.1 字幕標(biāo)記 流動字幕標(biāo)記的格式為： 流動文字或（和）圖片 【例3-27】 3.9.2 音頻標(biāo)記 1點播音樂 將音樂做成一個超鏈接，只需單擊該鏈接，就可以聽到音樂了。其格式為： 超鏈接顯示文本 例如：播放一段MIDI音樂： 我們的愛,3.9.

15、3 視頻標(biāo)記 用瀏覽器可以播放的格式有：MOV、AVI、WMV等格式。,1鏈接一個視頻文件. 與鏈接音頻文件一樣，可將視頻文件做成一個超鏈接。其格式為： 超鏈接顯示文本 例如：播放一段視頻： 歡迎光臨,2內(nèi)嵌視頻播放插件 與播放音頻文件一樣，通過內(nèi)嵌視頻播放插件可以在瀏覽器中出現(xiàn)控制面板。其格式為： 【例3-29】,3.10 表單,3.10.1 表單標(biāo)記 表單的基本語法及格式為：,3.10.2 文字和密碼的輸入 使用標(biāo)記的type屬性，可以在表單中加入表項，并控制表項的風(fēng)格。type屬性值為text，則輸入的文本以標(biāo)準(zhǔn)的字符顯示；type屬性值為password，則輸入的文本顯示為“”。 【例

16、3-30】,3.10.3 重置和提交 格式為： 默認(rèn)情況下，重置和提交的按鈕分別顯示為“重置”和“提交查詢內(nèi)容”。,3.10.4 復(fù)選框和單選鈕 用標(biāo)記的type屬性可設(shè)置選擇鈕的類型 屬性value可設(shè)置該選擇鈕的控制初值，用以告訴表單制作者選擇結(jié)果。 用checked=checked表示是否為默認(rèn)選項。 name是該控件的惟一標(biāo)識，同一組復(fù)選框或單選鈕的名稱是一樣的。 【例3-31】,3.10.5 選擇欄 標(biāo)記的格式為： 選項說明 選項說明 【例3-32】,3.10.6 多行文本框 格式為： 多行文本 其中的行數(shù)和列數(shù)是指不用滾動條就可看到的部分。,3.11 框架（多窗口頁面）,3.11.

17、1 建立框架 框架的基本結(jié)構(gòu)為：,1標(biāo)記 ,2標(biāo)記 【例3-33】 【例3-34】,3.11.2 框架間的鏈接 超鏈接顯示文本 【例3-35】,3.12 XHTML文檔的驗證 登錄到/網(wǎng)站顯示如圖3-42所示。,如果不能通過驗證，則顯示如圖3-43所示，并顯示錯誤代碼的位置；如果通過驗證，則顯示如圖3-44所示。,3.13 習(xí)題3 1制作如圖3-45所示的網(wǎng)頁，要求章名為標(biāo)題h2、居中；節(jié)名為標(biāo)題h3、居左；小節(jié)為h4，居左等；整個網(wǎng)頁背景色為乳白色，正文為宋體、藍(lán)色。,2按如圖3-46所示制作指向其他頁面的鏈接，要求例題使用超鏈接，在網(wǎng)頁中單擊例題名，則在新的瀏覽器窗口顯示該例題。