1、授課教師：黃彩霞授課教師：黃彩霞E-MAIL：復習圖像標記圖像標記img src=/列表標記列表標記 (1)(1)有序列表有序列表 ol type= 蘋果蘋果 香蕉香蕉 葡萄葡萄 復習 (2) (2)無序列表無序列表 ul type= 蘋果蘋果 香蕉香蕉 葡萄葡萄 (3)列表之間的嵌套列表之間的嵌套 華東地區(qū)華東地區(qū) 江蘇部分江蘇部分 浙江部分浙江部分 華北地區(qū)華北地區(qū) 北京部分北京部分天津部分天津部分 復習復習(4)定義列表定義列表 名詞名詞1 解釋解釋1 解釋解釋2 解釋解釋3 名詞名詞2 解釋解釋1 解釋解釋2 解釋解釋3注意：注意：標記表示名詞；標記表示名詞；標記表示對名標記表示對名詞

2、的解釋。詞的解釋。復習多媒體標記多媒體標記 (1)(1)bgsound src=/ (2) (2) (3) (3)滾動的文字或圖像滾動的文字或圖像nHTML文件最重要的特性之一就是超鏈接，通過網(wǎng)文件最重要的特性之一就是超鏈接，通過網(wǎng)頁上所提供的鏈接功能，用戶可以鏈接到網(wǎng)絡上的頁上所提供的鏈接功能，用戶可以鏈接到網(wǎng)絡上的其他網(wǎng)頁。其他網(wǎng)頁。n如果網(wǎng)頁上沒有超鏈接，就不得不在瀏覽器地址欄如果網(wǎng)頁上沒有超鏈接，就不得不在瀏覽器地址欄中一遍遍地輸入各網(wǎng)頁的中一遍遍地輸入各網(wǎng)頁的URL地址了，這樣也就無地址了，這樣也就無法體現(xiàn)互聯(lián)網(wǎng)的優(yōu)點了。法體現(xiàn)互聯(lián)網(wǎng)的優(yōu)點了。n在在HTML語言中，利用語言中，利用標

3、記在網(wǎng)頁中創(chuàng)建超鏈標記在網(wǎng)頁中創(chuàng)建超鏈接，一般語法格式如下：接，一般語法格式如下： 超鏈接的文字或圖像超鏈接的文字或圖像2.4.3 超鏈接標記超鏈接標記n網(wǎng)頁上的超鏈接有多種：文字鏈接、圖片鏈接、頁網(wǎng)頁上的超鏈接有多種：文字鏈接、圖片鏈接、頁面內部鏈接等等。面內部鏈接等等。n文字設置為超鏈接后，默認顯示為加下劃線的藍色文字設置為超鏈接后，默認顯示為加下劃線的藍色字體；圖像設置為超鏈接后，會自動加一個黑色的字體；圖像設置為超鏈接后，會自動加一個黑色的邊框。邊框。2.4.3 超鏈接標記超鏈接標記例如：例如：鏈接到一個頁面鏈接到一個頁面空鏈接空鏈接n超鏈接標記屬性超鏈接標記屬性（1）href屬性：是

4、屬性：是標記的最重要的屬性，標記的最重要的屬性，用來放置超鏈用來放置超鏈接的目標地址，可以是本網(wǎng)站內部的某個接的目標地址，可以是本網(wǎng)站內部的某個HTML文件，也文件，也可以是外部網(wǎng)站某個網(wǎng)頁的可以是外部網(wǎng)站某個網(wǎng)頁的URL地址。地址。2.4.3 超鏈接標記超鏈接標記nURL(統(tǒng)一資源定位器統(tǒng)一資源定位器)：每一個網(wǎng)頁在互聯(lián)網(wǎng)上都有唯一：每一個網(wǎng)頁在互聯(lián)網(wǎng)上都有唯一的地址。的地址。nURL的格式的格式2.4.3 超鏈接標記超鏈接標記nURL的類型：絕對的類型：絕對URL和相對和相對URL如：如：http:/ 如：如： href=“index.html” /index.html是本地當前路徑下的文

5、件是本地當前路徑下的文件 href=“web/index.html” href=“./index.html” href=“././index.html” 2.4.3 超鏈接標記超鏈接標記有如下目錄結構：有如下目錄結構：My WebDefault.htmlanqiuzgzsLqzs.htmltp.htmlfyqt.htmlDefault.htm存在鏈接到存在鏈接到qt.html的鏈接，那么超鏈接代碼的鏈接，那么超鏈接代碼如何寫：如何寫：鏈接到鏈接到qtqt.html 存在鏈接到存在鏈接到Default.htm的鏈接，那么超鏈接代的鏈接，那么超鏈接代碼如何寫：碼如何寫： 返回首頁返回首頁.表示返回

6、上級目錄。表示返回上級目錄。n超鏈接標記屬性超鏈接標記屬性（2）target屬性：設定鏈接頁面顯示的目標窗口，默認情況下，屬性：設定鏈接頁面顯示的目標窗口，默認情況下，目標頁面在同一個窗口中顯示。如果要在點擊某個鏈接以后，目標頁面在同一個窗口中顯示。如果要在點擊某個鏈接以后，打開一個新的瀏覽器窗口，在這個新窗口中顯示目標頁面，打開一個新的瀏覽器窗口，在這個新窗口中顯示目標頁面，就需要在就需要在標記中設置標記中設置“target”屬性。屬性。2.4.3 超鏈接標記超鏈接標記n超鏈接標記屬性超鏈接標記屬性（3）title屬性：設置鼠標經(jīng)過超鏈接時顯示的文字提示。屬性：設置鼠標經(jīng)過超鏈接時顯示的文字

7、提示。（4）name屬性屬性：指定元素的名稱，可用于設置網(wǎng)頁中的某個：指定元素的名稱，可用于設置網(wǎng)頁中的某個位置（錨點）。位置（錨點）。n創(chuàng)建超鏈接的方式創(chuàng)建超鏈接的方式 超鏈接的文件可以是任意類型：超鏈接的文件可以是任意類型：.html 、jpg、.word、.ppt、.zip等等。等等。2.4.3 超鏈接標記超鏈接標記例如：例如：下載下載word文檔文檔下載下載ppt文檔文檔n創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件鏈接 在某些網(wǎng)頁中，單擊某個超鏈接以后，會自動打開電子郵件在某些網(wǎng)頁中，單擊某個超鏈接以后，會自動打開電子郵件客戶端軟件，向某個特定的客戶端軟件，向某個特定的E-mail地址發(fā)送郵件。此類

8、鏈接地址發(fā)送郵件。此類鏈接類似于類似于URL的鏈接方式，例如：的鏈接方式，例如： 2.4.3 超鏈接標記超鏈接標記基本格式：基本格式：鏈接顯示文字鏈接顯示文字 n創(chuàng)建頁面內部鏈接創(chuàng)建頁面內部鏈接 超鏈接不僅可以跳轉到其他網(wǎng)頁，也可以在本頁內跳轉超鏈接不僅可以跳轉到其他網(wǎng)頁，也可以在本頁內跳轉(也可稱為書簽也可稱為書簽(錨點錨點)鏈接鏈接)。 在制作網(wǎng)頁時，可能會出現(xiàn)網(wǎng)頁內容比較長的情況，用在制作網(wǎng)頁時，可能會出現(xiàn)網(wǎng)頁內容比較長的情況，用戶瀏覽網(wǎng)頁時會很不方便，利用錨點鏈接解決該問題。戶瀏覽網(wǎng)頁時會很不方便，利用錨點鏈接解決該問題。2.4.3 超鏈接標記超鏈接標記n創(chuàng)建頁面內部鏈接創(chuàng)建頁面內部鏈

9、接(錨點鏈接錨點鏈接) 要在當前頁面內實現(xiàn)超鏈接，需要定義兩個標記：要在當前頁面內實現(xiàn)超鏈接，需要定義兩個標記：一個為一個為超鏈接標記超鏈接標記，另一個為，另一個為書簽標記書簽標記。 (1)用用標簽的屬性標簽的屬性href的值來確定跳轉的目標名稱的值來確定跳轉的目標名稱 即超鏈接標記的格式為：即超鏈接標記的格式為： 如：如：鏈接文字鏈接文字 (2)設置相應的跳轉目標位置設置相應的跳轉目標位置(錨點錨點)，即書簽標記，即書簽標記在在的的name屬性中定義屬性中定義： 如：如：鏈接目標文字鏈接目標文字2.4.3 超鏈接標記超鏈接標記注意：二者的目標名稱必須一致。注意：二者的目標名稱必須一致。n創(chuàng)建

10、圖像的熱點區(qū)域鏈接創(chuàng)建圖像的熱點區(qū)域鏈接 所謂圖像的熱點區(qū)域就是將一幅圖像劃分出若干個鏈接所謂圖像的熱點區(qū)域就是將一幅圖像劃分出若干個鏈接區(qū)域，當訪問者單擊不同的區(qū)域時，就會鏈接到不同的目標區(qū)域，當訪問者單擊不同的區(qū)域時，就會鏈接到不同的目標頁面。頁面。 2.4.3 超鏈接標記超鏈接標記 img src=stars.jpg border=0 area shape=rect coords=23,28,111,81 href=# area shape=circle coords=187,57,33 href=# area shape=poly href=# n創(chuàng)建圖像的熱點區(qū)域鏈接創(chuàng)建圖像的熱點區(qū)

11、域鏈接 在在HTML中可以使用中可以使用3種類型的熱點區(qū)域：矩形、圓形種類型的熱點區(qū)域：矩形、圓形和多邊形。和多邊形。 2.4.3 超鏈接標記超鏈接標記n創(chuàng)建圖像的熱點區(qū)域鏈接創(chuàng)建圖像的熱點區(qū)域鏈接 創(chuàng)建圖像的熱點區(qū)域鏈接需要同時使用創(chuàng)建圖像的熱點區(qū)域鏈接需要同時使用、和和標記，下面分別對上面的代碼進行解釋。標記，下面分別對上面的代碼進行解釋。（1）標記用來定義圖像映射，就是利用標記用來定義圖像映射，就是利用name屬性屬性來定義帶有可點擊區(qū)域的圖像。來定義帶有可點擊區(qū)域的圖像。（2）標記除了使用標記除了使用src屬性插入圖像外，還要用屬性插入圖像外，還要用usermap屬性引用圖像映射的名稱

12、，創(chuàng)建圖像與映射之間屬性引用圖像映射的名稱，創(chuàng)建圖像與映射之間的關系，屬性值為的關系，屬性值為標記中標記中name屬性值前面再加屬性值前面再加上上“#”。2.4.3 超鏈接標記超鏈接標記n創(chuàng)建圖像的熱點區(qū)域鏈接創(chuàng)建圖像的熱點區(qū)域鏈接（3）標記定義圖像映射中的可點擊區(qū)域，標記定義圖像映射中的可點擊區(qū)域，標記要嵌套標記要嵌套在在標記中，其屬性如下：標記中，其屬性如下： shape屬性：設置鼠標點擊區(qū)域的形狀，屬性值有屬性：設置鼠標點擊區(qū)域的形狀，屬性值有rect（矩形）、（矩形）、circle（圓形）和（圓形）和poly（多邊形）。（多邊形）。 cords屬性：設置可以點擊的區(qū)域坐標，屬性值單位為

13、像素。屬性：設置可以點擊的區(qū)域坐標，屬性值單位為像素。 如果如果shape = rect，cords屬性值分別是矩形的左、上、右、下四屬性值分別是矩形的左、上、右、下四條邊的坐標；條邊的坐標； 如果如果shape = circle，cords屬性值分別是圓形的圓心坐標和半徑；屬性值分別是圓形的圓心坐標和半徑； 如果如果shape = poly，cords屬性值分別是多邊形各個頂點的坐標；屬性值分別是多邊形各個頂點的坐標； href屬性：設置點擊區(qū)域的鏈接的屬性：設置點擊區(qū)域的鏈接的URL。 target屬性：設置鏈接頁面顯示的目標窗口。屬性：設置鏈接頁面顯示的目標窗口。 alt屬性：設置替代文

14、字。屬性：設置替代文字。2.4.3 超鏈接標記超鏈接標記2.4.7 浮動框架標記浮動框架標記n浮動框架標記浮動框架標記用于創(chuàng)建用于創(chuàng)建“嵌入式框架嵌入式框架”或浮動或浮動框架，可以在窗口中再創(chuàng)建一個窗口并自由控制窗口的大框架，可以在窗口中再創(chuàng)建一個窗口并自由控制窗口的大小，允許在一個網(wǎng)頁中插入另一個網(wǎng)頁。小，允許在一個網(wǎng)頁中插入另一個網(wǎng)頁。n使用時直接在使用時直接在HTML文檔中插入文檔中插入標記即可，一標記即可，一個頁面中可以插入多個浮動框架。個頁面中可以插入多個浮動框架。 例如：例如： 3.7框架之間的鏈接框架之間的鏈接3.7.1 建立框架與框架集建立框架與框架集n前面曾經(jīng)介紹過前面曾經(jīng)介

15、紹過標記的標記的target屬性，但是沒有詳細介屬性，但是沒有詳細介紹，這是因為紹，這是因為target屬性必須和框架配合使用，因此這里屬性必須和框架配合使用，因此這里先對框架進行一些介紹，然后再演示框架與鏈接的關系。先對框架進行一些介紹，然后再演示框架與鏈接的關系。n框架集標記框架集標記 . n框架標記框架標記 n注意：注意： . 標記與標記與.標記是同級的，進行替代。標記是同級的，進行替代。 3.7.2 用用cols屬性將窗口分為左右屬性將窗口分為左右 窗體分割窗體分割 注意：注意： . . . .3.7.3 用用rows屬性將窗口分為上下屬性將窗口分為上下 窗體分割窗體分割 3.7.4 框架的嵌套框架的嵌套 窗體水平和垂直分割窗體水平和垂直分割 3.7.5 在框架中插入網(wǎng)頁在框架中插入網(wǎng)頁 窗體水平和垂直分割窗體水平和垂直分割 3.7.6 在框架之間進行鏈接在框架之間進行鏈接 窗體