多媒體技術(shù)基礎(chǔ)(第版)HTML語(yǔ)言

1、2008-07-011多媒體技術(shù)基礎(chǔ)多媒體技術(shù)基礎(chǔ)( (第第3 3版版) )第第21章章 HTML語(yǔ)言語(yǔ)言 林福宗林福宗清華大學(xué)清華大學(xué) 計(jì)算機(jī)科學(xué)與技術(shù)系計(jì)算機(jī)科學(xué)與技術(shù)系2008年年9月月2008年7月31日21章 HTML語(yǔ)言2第第21章章 HTML語(yǔ)言目錄語(yǔ)言目錄 21.1 HTML文檔文檔21.1.1 HTML與網(wǎng)頁(yè)21.1.2 元素和標(biāo)簽的概念21.1.3 HTML文檔什么樣21.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性21.2.1 基本標(biāo)簽21.2.2 標(biāo)簽的屬性21.3 字符樣式字符樣式21.3.1 物理樣式和邏輯樣式21.3.2 字符實(shí)體21.4 超鏈接超鏈接21.4.1 超鏈接的概

2、念21.4.2 文檔的相對(duì)路徑與絕對(duì)路徑21.4.3 使用URL21.4.4 文檔內(nèi)部之間的鏈接21.4.5 鏈接電子郵件程序21.4.6 鏈接內(nèi)聯(lián)圖像21.4.7 用圖像作超鏈接21.4.8 用圖像作網(wǎng)頁(yè)的背景21.4.9 鏈接外聯(lián)圖像21.4.10 在文檔中鏈接和嵌入聲音文件21.4.11 在文檔中鏈接和嵌入影視文件21.5 表格標(biāo)簽和屬性表格標(biāo)簽和屬性2008年7月31日21章 HTML語(yǔ)言3第第21章章 HTML語(yǔ)言語(yǔ)言為了使文檔內(nèi)容便于訪問(wèn)、易于傳輸、有效管理和靈活多樣，數(shù)十年來(lái)無(wú)數(shù)科學(xué)技術(shù)工作者一直在孜孜不倦地開(kāi)發(fā)內(nèi)容和樣式既分離又結(jié)合的語(yǔ)言，使文檔內(nèi)容的交換不受軟件和硬件的約束，

3、而標(biāo)記語(yǔ)言就是具有這種特性的語(yǔ)言用來(lái)描述文檔結(jié)構(gòu)、文檔內(nèi)容和內(nèi)容樣式的第一個(gè)標(biāo)記語(yǔ)言是由IBM公司在20世紀(jì)60年代創(chuàng)造的通用標(biāo)記語(yǔ)言(GML)，它將內(nèi)容和內(nèi)容的表現(xiàn)形式分開(kāi)處理，并于1986年成為國(guó)際上的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言(SGML)超文本標(biāo)記語(yǔ)言(HTML)是組織多媒體文檔的重要語(yǔ)言，可用來(lái)編排文檔、創(chuàng)建列表、建立鏈接、插入聲音和影視片斷。它不僅可用來(lái)編寫(xiě)Web網(wǎng)頁(yè)，而且可用來(lái)制作光盤(pán)上的多媒體節(jié)目。HTML是從SGML語(yǔ)言導(dǎo)出的語(yǔ)言，是SGML的一個(gè)子集 2008年7月31日21章 HTML語(yǔ)言421.1 HTML文檔文檔n21.1.1 HTML與網(wǎng)頁(yè)與網(wǎng)頁(yè)超文本標(biāo)記語(yǔ)言(Hy

4、pertext Markup Language，HTML)是用來(lái)創(chuàng)建超文本文檔的標(biāo)記語(yǔ)言n它使用標(biāo)簽來(lái)標(biāo)記文檔中的文本、圖形或圖像等元素，并告訴Web瀏覽器該如何向用戶顯示這些元素，以及如何響應(yīng)用戶的行為nHTML 2.0是因特網(wǎng)工程特別工作組(IETF)制定的，它包含了1995年所有瀏覽器的通用特性，并且它是廣泛應(yīng)用于萬(wàn)維網(wǎng)的第一個(gè)HTML版本n后來(lái)版本的開(kāi)發(fā)是W3C組織實(shí)施和完成的。HTML 3.2集成了許多1996年初所實(shí)現(xiàn)的特性，HTML 4.x版本集成的標(biāo)簽更多，功能更豐富2008年7月31日21章 HTML語(yǔ)言521.1 HTML文檔文檔(續(xù)續(xù)1)萬(wàn)維網(wǎng)采用HTML語(yǔ)言來(lái)組織文檔n

5、萬(wàn)維網(wǎng)上的文檔稱作Web網(wǎng)頁(yè)(Web page)n存儲(chǔ)網(wǎng)頁(yè)并安裝有服務(wù)軟件(也稱服務(wù)器)的計(jì)算機(jī)叫做Web服務(wù)機(jī)(Web servers)n讀網(wǎng)頁(yè)的計(jì)算機(jī)叫做Web客戶機(jī)(Web clients)，客戶機(jī)上顯示網(wǎng)頁(yè)的軟件叫做Web瀏覽器(Web browser)n早期的Web網(wǎng)頁(yè)以及近年來(lái)開(kāi)發(fā)的大多數(shù)網(wǎng)頁(yè)是用HTML語(yǔ)言編寫(xiě)的文檔，因此稱為HTML文檔2008年7月31日21章 HTML語(yǔ)言621.1 HTML文檔文檔(續(xù)續(xù)2)nHTML文檔由URL指定它所在的服務(wù)機(jī)和路徑，這就是網(wǎng)頁(yè)地址；所有HTML文檔都包含如何顯示文檔的指令，最普通的指令叫做HTML標(biāo)簽(tag)，如用HTML語(yǔ)言編寫(xiě)的

6、文檔是不帶格式的普通文檔, 也稱為ASCII文件n可用普通的文字編輯器來(lái)編輯，如用Windows操作系統(tǒng)帶的“記事本”n用其他專門的HTML文件編輯器來(lái)編輯，如微軟公司的FrontPage和Macromedia公司的Dreamweavern這些編輯器都是很優(yōu)秀的所見(jiàn)即所得(what you see is what you get，WYSIWYG)編輯器2008年7月31日21章 HTML語(yǔ)言721.1 HTML文檔文檔(續(xù)續(xù)3)21.1.2 元素和標(biāo)簽的概念元素和標(biāo)簽的概念一個(gè)文檔通常由文檔頭(head)、文檔名稱(title)、表格(table)、段落(paragraph)和列表(list)

7、等成分構(gòu)成。這些成分稱為文檔元素(element)，簡(jiǎn)稱為元素元素元素是文本文檔的基本構(gòu)件，并用HTML規(guī)定的標(biāo)簽來(lái)標(biāo)識(shí)這些元素。例如，元素內(nèi)容為“2008年北京舉辦第29屆奧運(yùn)會(huì)”，用粗體字表示內(nèi)容的元素是 其中，標(biāo)簽表示用粗體字顯示，這個(gè)元素在瀏覽器上顯示為2008年北京舉辦第年北京舉辦第29屆奧運(yùn)會(huì)屆奧運(yùn)會(huì) 2008年7月31日21章 HTML語(yǔ)言821.1 HTML文檔文檔(續(xù)續(xù)4)HTML標(biāo)簽由3部分組成左尖括號(hào)“”標(biāo)簽通常是成對(duì)出現(xiàn)的n一個(gè)表示開(kāi)始的“開(kāi)始標(biāo)簽(start tag)”n一個(gè)表示結(jié)束的“結(jié)束標(biāo)簽(end tag)”n例如, 與u表示標(biāo)題的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽u“H1”是

8、一級(jí)標(biāo)簽的名稱。除在結(jié)束標(biāo)簽名稱前面加一個(gè)斜杠符號(hào)“/”外，開(kāi)始標(biāo)簽名稱和結(jié)束標(biāo)簽名稱相同u開(kāi)始和結(jié)束標(biāo)簽之間的文本叫做HTML元素的內(nèi)容2008年7月31日21章 HTML語(yǔ)言921.1 HTML文檔文檔(續(xù)續(xù)5)標(biāo)簽可以包含“屬性(attribute)”n用來(lái)提供網(wǎng)頁(yè)上的HTML元素的附加信息n屬性是指背景的顏色、字體的屬性(大小、顏色、正體、斜體等)、對(duì)齊的方式等n屬性不僅需要名稱，而且還需要給它賦值，叫做屬性值(attribute value)，并用雙引號(hào)表示n屬性名稱和屬性值放在開(kāi)始標(biāo)簽中。例如 其中，表示在顯示時(shí)這段文字要居中 表示用紅色顯示這段文字 2008年7月31日21章 H

9、TML語(yǔ)言1021.1 HTML文檔文檔(續(xù)續(xù)6)對(duì)于圖像文件n同樣可指定圖像的顯示特性，如圖像在頂部、在底部或在中間等對(duì)齊屬性注意nHTML標(biāo)簽名稱中的字母不分大小寫(xiě)。例如u與 或者 都是等效的nWeb瀏覽器不一定對(duì)所有的HTML標(biāo)簽都支持u如果一個(gè)瀏覽器遇到不認(rèn)識(shí)的標(biāo)簽，它就不予理睬，但在標(biāo)簽之間的文本仍然會(huì)顯示在計(jì)算機(jī)的屏幕上 2008年7月31日21章 HTML語(yǔ)言1121.1 HTML文檔文檔(續(xù)續(xù)7)n21.1.3 HTML文檔什么樣文檔什么樣每個(gè)HTML文檔開(kāi)始，以結(jié)束一個(gè)HTML文檔的主要組成部分n文檔頭(head) ：用標(biāo)簽 正文(body)：使用標(biāo)簽 n在文檔頭的開(kāi)始和結(jié)束

10、標(biāo)簽之間包含的內(nèi)容是文檔的名稱(title)，如“章乃器軼事章乃器軼事”n在正文的開(kāi)始和結(jié)束標(biāo)簽之間含有用各種HTML標(biāo)簽作標(biāo)記的段落、列表和其他元素組成的HTML元素。一個(gè)簡(jiǎn)單的HTML文檔如下所示：2008年7月31日21章 HTML語(yǔ)言1221.1 HTML文檔文檔(續(xù)續(xù)8)2008年7月31日21章 HTML語(yǔ)言1321.1 HTML文檔文檔(續(xù)續(xù)9)HTML文檔的擴(kuò)展名用htm或html表示n把編輯好的文檔存儲(chǔ)為“zhnaiqi.htm”或“zhnaiqi.htm”文件，使用瀏覽器瀏覽顯示的文件見(jiàn)圖21-1圖21-1 在Web瀏覽器上顯示的HTML文檔 2008年7月31日21章 H

11、TML語(yǔ)言1421.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性n21.2.1 基本標(biāo)簽基本標(biāo)簽1. HTML標(biāo)簽：n告訴瀏覽器在 之間的文件是HTML文檔2.文檔頭標(biāo)簽：n告訴瀏覽器在 之間包含的是HTML文檔名稱和屬性3.文檔名標(biāo)簽：n告訴瀏覽器在 之間包含的是具體的HTML文檔名稱u名稱的長(zhǎng)度通常不超過(guò)64個(gè)字符數(shù)4.正文標(biāo)簽：n告訴瀏覽器在 之間的內(nèi)容是正文部分。這是HTML文檔中最多的部分，是顯示在瀏覽器窗口中的文檔內(nèi)容2008年7月31日21章 HTML語(yǔ)言1521.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)1)5.標(biāo)題標(biāo)簽：n在HTML規(guī)范中定義了6個(gè)等級(jí)的標(biāo)題標(biāo)簽，其中n1，2，6。在 之間包

12、含的是第n級(jí)標(biāo)題6.段落(paragraph)標(biāo)簽：n告訴瀏覽器在 之間包含的是一段文字。HTML沒(méi)有使用硬換行(carriage return)來(lái)分段落。在HTML文檔中，和之間不論有多少行，瀏覽器都把它作為一個(gè)段落來(lái)處理7.列表標(biāo)簽：、和和nHTML支持無(wú)編號(hào)列表標(biāo)簽和有編號(hào)列表標(biāo)簽，而且還可以在列表標(biāo)簽中套列表標(biāo)簽。u ：無(wú)編號(hào)列表(Unnumbered List)。u ：有編號(hào)列表(Ordered List)。u ：表示標(biāo)簽后面的內(nèi)容是具體的列表項(xiàng)目(List Item) 2008年7月31日21章 HTML語(yǔ)言1621.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)2)例例21.3 在 之間

13、的項(xiàng)目表示無(wú)編號(hào)在瀏覽器上將顯示如圖21-3所示的樣式 圖21-3 標(biāo)簽的特性 2008年7月31日21章 HTML語(yǔ)言1721.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)3)8. 定義標(biāo)簽：、和和n 標(biāo)簽：表示定義列表(Definition Lists)n 標(biāo)簽：表示后面的項(xiàng)是定義術(shù)語(yǔ)(Definition Term)n 標(biāo)簽：表示后面的項(xiàng)是定義釋義(Definition Definition)例例21.6 定義列表格式2008年7月31日21章 HTML語(yǔ)言1821.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)4)在瀏覽器上將顯示如圖21-6所示的樣式 圖21-6 標(biāo)簽、和的特性 2008年7月31

14、日21章 HTML語(yǔ)言1921.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)5)9.預(yù)格式文本(Preformatted Text)標(biāo)簽：n用于產(chǎn)生固定寬度的字符。在 之間的空格、新行、空行和表格與HTML源文檔中的一致。例如，在瀏覽器上將顯示如圖21-7所示的樣式 2008年7月31日21章 HTML語(yǔ)言2021.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)6)圖21-7 標(biāo)簽的特性 2008年7月31日21章 HTML語(yǔ)言2121.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)7)10.擴(kuò)展引用(Extended Quotations)標(biāo)簽：n告訴瀏覽器在 之間包含一個(gè)比較長(zhǎng)的引用語(yǔ)。例如，11.強(qiáng)制換行標(biāo)簽

15、：n強(qiáng)制換行/郵政地址標(biāo)簽(Forced Line Breaks/Postal Addresses)告訴瀏覽器在顯示時(shí)一定要換行，目的是不在行與行之間增加空白行。例如，在瀏覽器上將顯示如圖21-8所示的樣式。2008年7月31日21章 HTML語(yǔ)言2221.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)8)清華大學(xué) 計(jì)算機(jī)科學(xué)與技術(shù)系郵政編碼：100084電話(tel): (010)62795869(O)電子郵件地址(e-mail): 圖21-8 標(biāo)簽的特性 2008年7月31日21章 HTML語(yǔ)言2321.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)9)12.表單標(biāo)簽: n用來(lái)收集用戶的信息，可包含讓用戶

16、輸入文本和選擇項(xiàng)目的接口構(gòu)件，如文本域、按鈕、復(fù)選框(checkboxe)，單選按鈕(radio button)和選擇列表等。2008年7月31日21章 HTML語(yǔ)言2421.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)10)在瀏覽器上將顯示如圖21-9所示的樣式 圖21-9 標(biāo)簽的特性 2008年7月31日21章 HTML語(yǔ)言2521.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)11)13.水平線(Horizontal Rule)標(biāo)簽n告訴瀏覽器在顯示屏幕上產(chǎn)生一條用于分割文檔的水平線，其長(zhǎng)度與瀏覽器窗口等寬，粗細(xì)和長(zhǎng)短都可設(shè)置。例如，un在瀏覽器上將顯示如圖21-10所示的樣式 圖21-10 標(biāo)簽的特

17、性 2008年7月31日21章 HTML語(yǔ)言2621.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)12)14.注釋標(biāo)簽 標(biāo)簽標(biāo)簽n用來(lái)在HTML文檔的源代碼中插入注釋，用來(lái)解釋編寫(xiě)的源代碼，并告訴瀏覽器不要顯示注釋。例如 源代碼瀏覽器上顯示 上梁不正下梁歪上梁不正下梁歪2008年7月31日21章 HTML語(yǔ)言2721.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)13)n21.2.2 標(biāo)簽的屬性標(biāo)簽的屬性HTML的許多標(biāo)簽都有屬性(attribute)n屬性用來(lái)修改HTML標(biāo)簽之間的元素的特性。例如，標(biāo)簽之間的元素的對(duì)齊方式、圖像的大小等例例21.7 設(shè)置字體屬性n理解字符屬性的概念n這條語(yǔ)句表示“理解字符

18、屬性的概念”這幾個(gè)字的顏色是紅色，字號(hào)等于4。在瀏覽器上將顯示如圖21-11所示的樣式 圖21-11 字體屬性舉例 2008年7月31日21章 HTML語(yǔ)言2821.2 HTML標(biāo)簽和屬性標(biāo)簽和屬性(續(xù)續(xù)14)例例21.8 在HTML文檔中插入對(duì)齊(align)屬性： 這是居中段落nalign=center屬性表示段落居中，在瀏覽器上將顯示如圖21-12所示的樣式。align=right表示右對(duì)齊屬性，align=left表示左對(duì)齊屬性 圖21-12 對(duì)齊屬性舉例 2008年7月31日21章 HTML語(yǔ)言2921.3 字符樣式字符樣式n21.3.1 物理樣式和邏輯樣式物理樣式和邏輯樣式HTML

19、為單獨(dú)的詞或句子定義了兩種樣式n物理樣式(Physical Style)：說(shuō)明標(biāo)簽之間的文句的特定外貌n邏輯樣式(Logical Styles)。按文本的意思顯示文句的外貌n表21-1和表21-2分別列出了部分物理樣式和邏輯樣式的標(biāo)簽功能 2008年7月31日21章 HTML語(yǔ)言3021.3 字符樣式字符樣式(續(xù)續(xù)1)標(biāo)簽顯示樣式說(shuō)明求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！黑體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！斜體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！下劃線求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！打字機(jī)字體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！上標(biāo)求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！下標(biāo)求實(shí)創(chuàng)新！加刪除線求實(shí)創(chuàng)新！加刪除線表21-1 物理樣式(Physical Style) 2008年7

20、月31日21章 HTML語(yǔ)言3121.3 字符樣式字符樣式(續(xù)續(xù)2)標(biāo)簽顯示樣式主要用途求實(shí)創(chuàng)新！ 求實(shí)創(chuàng)新！字體加大求實(shí)創(chuàng)新！求實(shí)創(chuàng)新!書(shū)名、影視名等的引用，斜體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！計(jì)算機(jī)代碼，顯示固定寬度字體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！定義一個(gè)詞，通常為斜體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！強(qiáng)調(diào)，通常為斜體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！鍵盤(pán)輸入，顯示無(wú)格式固定寬度字體求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！顯示固定寬度字體(范例，如10pt)求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！顯示固定寬度字體(如3(12磅)求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！求實(shí)創(chuàng)新！強(qiáng)調(diào)，顯示黑體字符變量變量變量，顯示斜體字符表21-2 邏輯樣式(Logical Style) 2008年7月31日21

21、章 HTML語(yǔ)言3221.3 字符樣式字符樣式(續(xù)續(xù)3)從這兩張表中可以看到n在某些情況下(如對(duì)于同樣一個(gè)需要強(qiáng)調(diào)的詞或句子)，使用物理樣式標(biāo)簽和邏輯樣式標(biāo)簽可以獲得相同的顯示效果既然物理樣式和邏輯樣式可顯示相同的效果，那么為什么要如此繁瑣地定義這兩種樣式標(biāo)簽？n因?yàn)樵赟GML語(yǔ)言中“內(nèi)容”和“內(nèi)容的表達(dá)方法”是分開(kāi)的，而HTML是SGML中的子集，它繼承了SGML的特性。例如，SGML標(biāo)記“HTML概要”為一級(jí)標(biāo)題時(shí)，并未指定一級(jí)標(biāo)題中的“HTML概要”的字體大小(如四號(hào)字)和對(duì)齊方式(如居中)n這樣做的好處：如果想改變一級(jí)標(biāo)題中的字體(如改為三號(hào)字體)和對(duì)齊方式(如改為左對(duì)齊)時(shí)，要做的僅

22、是改變一級(jí)標(biāo)題的定義。物理樣式和邏輯樣式各有它們自己的優(yōu)點(diǎn)n使用邏輯標(biāo)簽的優(yōu)點(diǎn)是可強(qiáng)制文檔中同一元素的類型的一致性。例如，標(biāo)記某標(biāo)題為比你去記住一級(jí)標(biāo)題的字號(hào)、對(duì)齊方式等要容易得多n使用物理樣式的好處是瀏覽器會(huì)嚴(yán)格遵照你標(biāo)記的樣式顯示文本，因此在不希望瀏覽器改變樣式的情況下就應(yīng)該使用物理格式 2008年7月31日21章 HTML語(yǔ)言3321.3 字符樣式字符樣式(續(xù)續(xù)4)n21.3.2 字符實(shí)體字符實(shí)體(character entity)也稱轉(zhuǎn)義字符序列(escape sequence)。在HTML中，定義字符實(shí)體的原因有兩個(gè)n像“”這類符號(hào)已經(jīng)用來(lái)表示HTML標(biāo)簽，因此就不能直接當(dāng)作文本中的

23、符號(hào)來(lái)使用u為了在HTML文檔中使用這些符號(hào)，就需要定義它的字符實(shí)體。當(dāng)解釋程序遇到這類字符串時(shí)就把它解釋為真實(shí)的字符。例如，如果要在瀏覽器上顯示“或”，在HTML文檔必需要用字符實(shí)體“<或<”，其中“&lt”叫做實(shí)體名，“&#60”叫做實(shí)體號(hào)n有些字符在ASCII字符集中沒(méi)有定義，因此需要使用字符實(shí)體來(lái)表示2008年7月31日21章 HTML語(yǔ)言3421.3 字符樣式字符樣式(續(xù)續(xù)5)字符實(shí)體有三個(gè)部分：與號(hào)(&)；實(shí)體名稱(或#號(hào))和實(shí)體號(hào)；分號(hào)(;)。表21-3列出的是特殊字符實(shí)體，其他一些字符的字符實(shí)體見(jiàn)教材表21-4使用字符實(shí)體名

24、稱的好處是比較容易記，缺點(diǎn)是不是所有瀏覽器都支持最新的實(shí)體名稱，而實(shí)體號(hào)則對(duì)幾乎所有的瀏覽器都支持。此外，在輸入字符實(shí)體名稱時(shí)要嚴(yán)格遵守字母大小寫(xiě)的規(guī)則。字符字符實(shí)體號(hào)字符實(shí)體名稱""&&>>非斷開(kāi)空格(non-breaking space)  表21-3 特殊字符實(shí)體 2008年7月31日21章 HTML語(yǔ)言3521.4 超鏈接超鏈接21.4.1 超鏈接的概念超鏈接的概念超文本鏈接(hypertext link)簡(jiǎn)稱為超鏈接(hyperlink)或簡(jiǎn)稱為鏈接(l

25、ink)n鏈接是HTML的一個(gè)最強(qiáng)大和最有價(jià)值的功能n鏈接可以指向Web上的任何資源，如文檔中的元素、圖像、另一個(gè)文檔或文檔中的一部分、影視文件或聲音文件等在HTML中，簡(jiǎn)單的鏈接標(biāo)簽是，也稱為錨(anchor)簽。要把一個(gè)文檔包含在文檔中，它的基本語(yǔ)法是： . 或或 . 其中，href (hypertext reference)屬性用來(lái)指定被鏈接對(duì)象的地址。開(kāi)始標(biāo)簽()和結(jié)束標(biāo)簽()之間的文字將作為超級(jí)鏈接 2008年7月31日21章 HTML語(yǔ)言3621.4 超鏈接超鏈接(續(xù)續(xù)1)例例21.9 使用HTML編輯器編輯的“HTML初學(xué)者指南”文檔，它的文件名是beginner.htm，存放在

26、C:temp目錄下。該文檔包含有四個(gè)部分，每個(gè)部分用單獨(dú)的一個(gè)文檔來(lái)表示，分別是HTMLPrimerP1.htm，HTMLPrimerP4.htm，而且都存放在C:temp目錄下，“HTML初學(xué)者指南”的文檔如下所示：2008年7月31日21章 HTML語(yǔ)言3721.4 超鏈接超鏈接(續(xù)續(xù)2) 其中，“第一部分”可使“第一部分”鏈接到相同目錄下的文檔“HTMLPrimerP1.htm”。其余類推。在Web瀏覽器上顯示文檔時(shí)，通常用不同的顏色來(lái)區(qū)分有鏈接關(guān)系和沒(méi)有鏈接關(guān)系的元素n在Netscape公司和其他一些公司開(kāi)發(fā)的瀏覽器中，有鏈接關(guān)系的元素通常用藍(lán)色和下劃線表示。這個(gè)文檔在瀏覽器上將顯示如

27、圖21-13所示的樣式。 圖21-13 超鏈接在頁(yè)面上的樣式 2008年7月31日21章 HTML語(yǔ)言3821.4 超鏈接超鏈接(續(xù)續(xù)3)n21.4.2 文檔的相對(duì)路徑與絕對(duì)路徑文檔的相對(duì)路徑與絕對(duì)路徑 相對(duì)路徑是指相對(duì)于當(dāng)前的工作路徑，而絕對(duì)路徑是指一個(gè)完整的路徑。如果一個(gè)文檔在同一路徑下，HTML可以使用相對(duì)路徑或者絕對(duì)路徑來(lái)鏈接該文檔。否則只能使用絕對(duì)路徑例例21.10 在例21.9中，如果文檔“HTMLPrimerP1.htm”存放在目錄C:temphtml_sub下，使用相對(duì)路徑時(shí)可寫(xiě)成：第一部分 使用絕對(duì)路徑時(shí)寫(xiě)成：第一部分2008年7月31日21章 HTML語(yǔ)言3921.4 超鏈

28、接超鏈接(續(xù)續(xù)4)需要指出的是n 使用相對(duì)路徑鏈接比使用絕對(duì)路徑鏈接的運(yùn)行效率會(huì)更高，移動(dòng)一組文檔時(shí)也更容易n UNIX系統(tǒng)是區(qū)分大小寫(xiě)的，而DOS和Mac OS系統(tǒng)是不區(qū)分大小寫(xiě)的。因此在編寫(xiě)HTML文檔時(shí)，對(duì)文檔的大小寫(xiě)要嚴(yán)格區(qū)分，否則UNIX系統(tǒng)上的瀏覽器就找不到你寫(xiě)的文檔n 路徑名使用標(biāo)準(zhǔn)UNIX系統(tǒng)的句法2008年7月31日21章 HTML語(yǔ)言4021.4 超鏈接超鏈接(續(xù)續(xù)5)n21.4.3 使用使用URLURL是識(shí)別因特網(wǎng)上任何一個(gè)文件地址或資源地址的標(biāo)準(zhǔn)表示法，稱為統(tǒng)一資源地址。Web使用URL指定在其他服務(wù)機(jī)上文檔的位置。一個(gè)信息資源在網(wǎng)絡(luò)上的URL地址通常由三個(gè)部分組成：n

29、請(qǐng)求服務(wù)的類型，用來(lái)說(shuō)明使用什么網(wǎng)絡(luò)協(xié)議來(lái)存取資源，如Web服務(wù)程序使用HTTP，文件傳送使用FTP(File Transfer Protocol)等n網(wǎng)絡(luò)上的主機(jī)名n服務(wù)機(jī)上的文件名 2008年7月31日21章 HTML語(yǔ)言4121.4 超鏈接超鏈接(續(xù)續(xù)6)例如，http:/ (/) 之后的“”表示存放信息的主機(jī)名，這是微軟公司的一臺(tái)Web服務(wù)機(jī)n第三部分，第一個(gè)斜線后面的“industry/justice/expttest.htm”表示文件所在服務(wù)機(jī)上的目錄和文件名 這個(gè)地址告訴Web瀏覽器“使用HTTP協(xié)議，從名字為的服務(wù)機(jī)里、在industry/justice/目錄下取回名為expt

30、test.htm的文件” 2008年7月31日21章 HTML語(yǔ)言4221.4 超鏈接超鏈接(續(xù)續(xù)7)n21.4.4 文檔內(nèi)部之間的鏈接文檔內(nèi)部之間的鏈接有些文檔比較長(zhǎng)，在文檔內(nèi)部之間往往需要建立相互之間的鏈接。在這種情況下首先要對(duì)被鏈接的元素進(jìn)行命名，也就是給它們進(jìn)行編號(hào)，然后建立它們之間的鏈接關(guān)系。元素的命名或者編號(hào)要使得你的文檔很清楚，便于閱讀和修改?，F(xiàn)仍以“HTML初學(xué)者指南”文檔為例。假設(shè)該文檔分成4個(gè)部分，而且這4個(gè)部分都在同一個(gè)文檔中，要求在瀏覽器上顯示如圖21-14所示的樣式n當(dāng)你單擊“第一部分”時(shí)，瀏覽器就顯示“第一部分 HTML簡(jiǎn)介”的內(nèi)容，當(dāng)你單擊“返回到開(kāi)頭”時(shí)就返回到

31、“HTML入門入門”。其他幾個(gè)鏈接的設(shè)計(jì)也是如此 2008年7月31日21章 HTML語(yǔ)言4321.4 超鏈接超鏈接(續(xù)續(xù)8)圖21-14 文檔間鏈接設(shè)計(jì)舉例 2008年7月31日21章 HTML語(yǔ)言4421.4 超鏈接超鏈接(續(xù)續(xù)9)2008年7月31日21章 HTML語(yǔ)言4521.4 超鏈接超鏈接(續(xù)續(xù)10)n21.4.5 鏈接電子郵件程序鏈接電子郵件程序在Web頁(yè)面上鏈接電子郵件程序需要使用“mailto”n使用mailto可以創(chuàng)建預(yù)先填入有電子郵件地址的表單，其中的電子郵件地址可以是作者的，也可以是第三者的，這樣可鼓勵(lì)讀者給作者反饋信息，也便于讀者與第三方聯(lián)系。mailto的語(yǔ)法結(jié)構(gòu)如

32、下：Name 其中，“userinfo”是電子郵件地址的用戶名 “host”是電子郵件服務(wù)機(jī)的主機(jī)名 “Name”應(yīng)該是讓人容易理解的名稱 2008年7月31日21章 HTML語(yǔ)言4621.4 超鏈接超鏈接(續(xù)續(xù)11)例例21.12 HTML文檔中可插入如下一句：如有什么評(píng)論，把電子郵件發(fā)送給作者單位：清華大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)系n這個(gè)文檔在瀏覽器上將顯示如圖21-15所示的樣式 n當(dāng)讀者用鼠標(biāo)器單擊它時(shí)就會(huì)調(diào)出電子郵件編輯器，供你編寫(xiě)電子郵件 圖21-15 鏈接電子郵件程序舉例 2008年7月31日21章 HTML語(yǔ)言4721.4 超鏈接超鏈接(續(xù)續(xù)12)n21.4.6 鏈接內(nèi)聯(lián)圖像鏈接內(nèi)聯(lián)圖

33、像內(nèi)聯(lián)圖像(inline image)/內(nèi)嵌圖像/內(nèi)插圖像：與Web網(wǎng)頁(yè)中的文本一起下載和顯示，而不需要在你選擇之后才下載和顯示的圖像，在瀏覽器上表現(xiàn)為文本和圖像顯示在同一網(wǎng)頁(yè)上Web網(wǎng)頁(yè)上的圖像一般都使用GIF和JPG格式。大多數(shù)Web瀏覽器都不需要調(diào)用其他的圖像處理程序就能直接顯示用這兩種格式存儲(chǔ)的圖像。其他圖像格式也逐步集成到Web瀏覽器，如便攜網(wǎng)絡(luò)圖像格式(Portable Network Graphic，PNG)，這是一種可取代GIF格式的數(shù)據(jù)無(wú)損壓縮圖像存儲(chǔ)格式。在HTML文檔中插入圖像文件的格式如下： 其中，圖像文件名“ImageName”是圖像文件的URL地址；“img src

34、”與 “a href=”的功能相同 2008年7月31日21章 HTML語(yǔ)言4821.4 超鏈接超鏈接(續(xù)續(xù)13)例例21.13 現(xiàn)有兩幅寬度166像素、高度115像素的圖像要插入到“HTML初學(xué)者指南”文檔中，其中一幅在左邊，另一幅在右邊，圖像邊框的寬度2像素。如果使用不能顯示圖像的瀏覽器或者不想看圖像，可把瀏覽器中的圖像顯示功能阻塞掉。其方法是分別使用“Test GIF Image”和“Test JPEG Image”文字替代“test.gif”和“test.jpg”圖像。根據(jù)上述要求，HTML文檔的源文件可寫(xiě)成：2008年7月31日21章 HTML語(yǔ)言4921.4 超鏈接超鏈接(續(xù)續(xù)14

35、)2008年7月31日21章 HTML語(yǔ)言5021.4 超鏈接超鏈接(續(xù)續(xù)15)這個(gè)文檔在瀏覽器上將顯示如圖21-16所示的樣式要使圖像顯示在中央，則要用中間對(duì)齊標(biāo)簽，可使用下面的語(yǔ)句： 2008年7月31日21章 HTML語(yǔ)言5121.4 超鏈接超鏈接(續(xù)續(xù)16)n21.4.7 用圖像作超鏈接用圖像作超鏈接例例21.14 假設(shè)beginner.htm，test.gif和下面的HTML文檔在同一文件夾(即同一個(gè)路徑)下，可使用下面的語(yǔ)句鏈接文檔：n這個(gè)文檔在瀏覽器上將顯示圖21-17所示的樣式n圖像有一個(gè)藍(lán)色的邊框，表示單擊它可調(diào)出“beginner.htm”HTML文檔 。 2008年7月3

36、1日21章 HTML語(yǔ)言5221.4 超鏈接超鏈接(續(xù)續(xù)17)圖21-17 用圖像作超鏈接舉例2008年7月31日21章 HTML語(yǔ)言5321.4 超鏈接超鏈接(續(xù)續(xù)18)n21.4.8 用圖像作網(wǎng)頁(yè)的背景用圖像作網(wǎng)頁(yè)的背景在瀏覽器上經(jīng)?？煽吹礁鞣N背景圖像，使用圖像做網(wǎng)頁(yè)背景的語(yǔ)法結(jié)構(gòu)如下：做背景的圖像不需要很大，瀏覽器會(huì)利用它的平鋪(tiling)功能布滿整個(gè)網(wǎng)頁(yè)。例例21.15 設(shè)計(jì)網(wǎng)頁(yè)的背景為黑色，文字白色，帶鏈接，還未用鼠標(biāo)器單擊過(guò)的元素為淺藍(lán)色，可用下面的HTML源代碼實(shí)現(xiàn)：其中的顏色值用RGB (red, green, blue)模型，每種顏色分量用1字節(jié)表示 2008年7月31日

37、21章 HTML語(yǔ)言5421.4 超鏈接超鏈接(續(xù)續(xù)19)n21.4.9 鏈接外聯(lián)圖像鏈接外聯(lián)圖像在HTML文檔中，如果內(nèi)聯(lián)圖像文件太大，在瀏覽主文檔時(shí)就需要很長(zhǎng)的時(shí)間來(lái)等待圖像下載n為了改善這種狀況，一種切實(shí)可行的方法是把大的圖像當(dāng)作外聯(lián)(external image)圖像來(lái)處理n在編寫(xiě)HTML文檔時(shí)，用文字或小的內(nèi)聯(lián)圖標(biāo)來(lái)代表大圖像，而把大圖像文件當(dāng)作一個(gè)單獨(dú)的文檔，然后把文字或圖標(biāo)與大圖像文件鏈接在一起。當(dāng)在瀏覽器中閱讀網(wǎng)頁(yè)時(shí)，讀者可用鼠標(biāo)器激活這個(gè)鏈接，然后下載并顯示在另一個(gè)窗口上。用這種方式鏈接的圖像稱為外聯(lián)圖像。鏈接外聯(lián)圖像可使用下面的語(yǔ)句：圖像名稱2008年7月31日21章 HT

38、ML語(yǔ)言5521.4 超鏈接超鏈接(續(xù)續(xù)20)例例21.16 假設(shè)Dmt_Test.htm文檔和圖像文件Tu01_MyImage.jpg在同一文件夾下。使用外聯(lián)圖像時(shí)可在Dmt_Test.htm中加入如下語(yǔ)句：圖01 我的照片或者 n這個(gè)文檔在瀏覽器上將顯示如圖21-18(a)所示的樣式，此時(shí)并沒(méi)有顯示圖像。當(dāng)用鼠標(biāo)器單擊圖圖01 我的照片我的照片時(shí)，就把圖像顯示在新的窗口中，如圖圖21-18(b)所示。 2008年7月31日21章 HTML語(yǔ)言5621.4 超鏈接超鏈接(續(xù)續(xù)21) (a) 外聯(lián)圖像鏈接顯示 (b) 外聯(lián)的實(shí)際圖像圖21-18 鏈接外聯(lián)圖像舉例2008年7月31日21章 HT

39、ML語(yǔ)言5721.4 超鏈接超鏈接(續(xù)續(xù)22)n21.4.10 在文檔中鏈接和嵌入聲音文件在文檔中鏈接和嵌入聲音文件1. 把聲音文件鏈接到把聲音文件鏈接到HTML文檔文檔在HTML文檔中，同樣可用與外聯(lián)圖像類似的語(yǔ)句把聲音文件鏈接到文檔，差別只是文件擴(kuò)展名不同。例例21.17 假設(shè)Dmt_Test.htm文檔和聲音文件Sd01_MySound.wav在同一文件夾下。外聯(lián)聲音時(shí)可在Dmt_Test.htm中加入如下語(yǔ)句：老黃牛聲音在瀏覽器上將顯示如圖21-19所示的樣式。 當(dāng)讀者用鼠標(biāo)器單擊老黃牛聲音”時(shí)，瀏覽器將調(diào)出一個(gè)播放器進(jìn)行播放2008年7月31日21章 HTML語(yǔ)言5821.4 超鏈接

40、超鏈接(續(xù)續(xù)23)2. 把聲音文件嵌入到把聲音文件嵌入到HTML文檔文檔如果想把聲音文件嵌入到HTML文檔中，可使用下面的語(yǔ)句： 老黃牛聲音n在微軟公司的Internet Explorer 4.X以上版本的瀏覽器上將顯示一個(gè)播放控制器，按播放按鈕就可播放，見(jiàn)圖21-20圖21-20 把聲音文件嵌入到HTML文檔舉例 如果在Netscape公司的Communicator 4.04或更高版本的瀏覽器上播放時(shí)，顯示的播放控制面板將取決于你所安裝的播放聲音的插入軟件2008年7月31日21章 HTML語(yǔ)言5921.4 超鏈接超鏈接(續(xù)續(xù)24)3. 在文檔中嵌入背景聲音在文檔中嵌入背景聲音在HTML文檔

41、中可嵌入背景音樂(lè)，當(dāng)打開(kāi)HTML文檔時(shí)就開(kāi)始播放。嵌入背景音樂(lè)的基本語(yǔ)法結(jié)構(gòu)如下： 其中，URL表示背景音樂(lè)的文件名，loop表示循環(huán)播放的次數(shù) 2008年7月31日21章 HTML語(yǔ)言6021.4 超鏈接超鏈接(續(xù)續(xù)25)n21.4.11 在文檔中鏈接和嵌入影視文件在文檔中鏈接和嵌入影視文件1. 把影視文件鏈接到把影視文件鏈接到HTML文檔文檔使用與外聯(lián)圖像類似的語(yǔ)句例例21.18 假設(shè)Dmt_Test.htm文檔和影視文件chanticleer在同一文件夾下。使用外聯(lián)影視文件時(shí)可在Dmt_Test.htm中加入如下語(yǔ)句：宇宙飛船的高度和速率指示系統(tǒng)(altitude and rate in

42、dicating system，ARIS) 如要顯示圖標(biāo)，然后單擊它后再播放影視，可使用：宇宙飛船的高度和速率指示系統(tǒng)2008年7月31日21章 HTML語(yǔ)言6121.4 超鏈接超鏈接(續(xù)續(xù)26)(a) 不顯示圖像 (b) 顯示圖像圖21-21 把影視文件鏈接到HTML文檔2008年7月31日21章 HTML語(yǔ)言6221.4 超鏈接超鏈接(續(xù)續(xù)27)當(dāng)單擊“宇宙飛船的高度和速率指示系統(tǒng)宇宙飛船的高度和速率指示系統(tǒng)(altitude and rate indicating system，ARIS)”時(shí)，在Windows 9x/2000/CE/NT/環(huán)境下，IE瀏覽器將調(diào)出一個(gè)多媒體播放器進(jìn)行播放

43、，見(jiàn)圖21-22圖21-22 鏈接的影視文件舉例2008年7月31日21章 HTML語(yǔ)言6321.4 超鏈接超鏈接(續(xù)續(xù)28)2. 在文檔中嵌入影視在文檔中嵌入影視與鏈接外聯(lián)影視文件不同，對(duì)嵌入有影視文件的HTML文檔，瀏覽器下載該文檔時(shí)就把影視文件一起下載下來(lái)，如果影視文件很大，則下載的時(shí)間就會(huì)很長(zhǎng)。因此這種嵌入方式常用于影視文件不大的場(chǎng)合。嵌入這種影視文件的基本語(yǔ)法結(jié)構(gòu)是：例例21.19 在C:temp文件夾下有一個(gè)“HTML初學(xué)者指南.htm”文檔和3個(gè)影視文件。在test.htm文檔中嵌入這個(gè)影視文件可用下面幾種語(yǔ)句: 2008年7月31日21章 HTML語(yǔ)言6421.4 超鏈接超鏈接

44、(續(xù)續(xù)29)n語(yǔ)句，打開(kāi)HTML文檔時(shí)，顯示不帶播放控制按鈕的圖像，并馬上開(kāi)始播放，直到播放完畢n語(yǔ)句，打開(kāi)HTML文檔時(shí)，就顯示帶有播放控制按鈕的圖像并開(kāi)始播放。如果還想再觀看一遍，可按下播放按鈕n語(yǔ)句，打開(kāi)HTML文檔時(shí)顯示不帶播放控制按鈕的圖像，并不開(kāi)始播放，當(dāng)把鼠標(biāo)器放在圖像上時(shí)才開(kāi)始播放n在Internet Explorer瀏覽器上將顯示如圖21-23所示的樣式 圖21-23 文檔中嵌入影視方法2008年7月31日21章 HTML語(yǔ)言6521.5 表格標(biāo)簽和屬性表格標(biāo)簽和屬性在HTML文檔中，經(jīng)常需要設(shè)計(jì)表格。一張表格由許多表素(table element)組成，例如表的名稱(caption)、表行(table row)、 列表標(biāo)題(table header)、列表數(shù)據(jù)單元(table data cell)等。HTML為表格規(guī)定了許多表素標(biāo)簽和屬性，見(jiàn)表21-5和表21-6 表 素說(shuō) 明.定義表格