第三章 圖像列表與超鏈接

1、劉文銘 Email： QQ:83604162 Tel每天我們都在成長(zhǎng)！ 學(xué)習(xí)如何在網(wǎng)頁(yè)中插入圖片 掌握?qǐng)D像標(biāo)簽的相關(guān)屬性 學(xué)習(xí)如何建立列表 掌握有序列表和無(wú)序列表的使用方法 學(xué)習(xí)如何使用鏈接 掌握如何使用內(nèi)部鏈接，錨點(diǎn)連接，圖片 鏈接 2 每天我們都在成長(zhǎng)！ 圖像是網(wǎng)頁(yè)構(gòu)成的最重要元素之一，圖像 標(biāo)簽只有一個(gè) 標(biāo)簽的重要屬性： 3 屬性屬性描述描述 src圖像的源文件 alt提示文字 width圖像的寬度 height圖像的高度 border圖像的邊框 title提示方式 每天我們都在成長(zhǎng)！ src屬性用于指定文件所在的路徑 src所使用路徑既可以是相對(duì)路徑，也可以

2、是絕對(duì)路徑 alt屬性用于設(shè)置圖像的提示文字 如果圖片下載完成，將鼠標(biāo)發(fā)在圖片上會(huì) 顯示提示文字，如果沒(méi)有下載完成將顯示 提示文字 4 每天我們都在成長(zhǎng)！ width和height屬性用來(lái)設(shè)置圖像的寬度和 高度，如果沒(méi)有定義則默認(rèn)按照?qǐng)D像的原 始尺寸顯示 border屬性用來(lái)設(shè)置圖像的邊框線。但不 能設(shè)定邊框的顏色，有鏈接的時(shí)候邊框顏 色為藍(lán)色，無(wú)鏈接時(shí)邊框?yàn)楹谏?align屬性用來(lái)設(shè)置圖文的對(duì)齊方式 5 每天我們都在成長(zhǎng)！ HTML列表項(xiàng)共有3種類型，一種是無(wú)序列 表，一種是有序列表，一種是定義列表 無(wú)序列表的項(xiàng)目符號(hào)由幾個(gè)符號(hào)組成 有序列表的項(xiàng)目符號(hào)用數(shù)字和字母進(jìn)行排序 定義列表用作產(chǎn)生條

3、件和表述的雙重列表， 可以對(duì)列表進(jìn)行靈活的定義 在這里我們主要介紹無(wú)序列表和有序列表 6 每天我們都在成長(zhǎng)！ 有序列表中將每個(gè)元素按數(shù)字或字母的順 序標(biāo)號(hào)。 表示整個(gè)列表的開(kāi)始和結(jié)束 表示每個(gè)列表項(xiàng)的開(kāi)始和結(jié)束 有序列表樣例 7 每天我們都在成長(zhǎng)！ 有序列表中有一個(gè)type屬性，可以調(diào) 整序號(hào)的類型 有序列表的序號(hào)類型 8 typetype類型類型列表項(xiàng)目的序號(hào)類型列表項(xiàng)目的序號(hào)類型 1數(shù)字1、2、3、4 a小寫英文字母a、b、c、d A大寫英文字母A、B、C、D i小寫羅馬字母數(shù)字i、ii、iii、iv I小寫羅馬字母數(shù)字I、II、III、IV 每天我們都在成長(zhǎng)！ 有序列表中的start屬性

4、可以設(shè)置編號(hào) 的起始值，該語(yǔ)法中，數(shù)字起始值只能是 數(shù)字。 練習(xí)： 有序列表表示星期一至星期日，要求 編號(hào)類型為小寫字母，起始序號(hào)為b,在有序 列表中嵌套無(wú)須類表，說(shuō)明你每天要做的事 情 9 每天我們都在成長(zhǎng)！ 無(wú)序列不使用數(shù)字和字母類型，其他與有 序列表相似。無(wú)序列表不依賴順序表示其 重要程度。 表示整個(gè)列表的開(kāi)始和結(jié)束 表示每個(gè)列表項(xiàng)的開(kāi)始和結(jié)束 無(wú)序列表的樣例 10 每天我們都在成長(zhǎng)！ 無(wú)序列表也有type屬性，可以設(shè)置序 號(hào)類型 無(wú)序列表的序號(hào)類型 練習(xí)： 將上一練習(xí)序號(hào)改為空心圓的無(wú)序列表 11 typetype類型值類型值列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào) disc默認(rèn)值，黑色實(shí)心圓點(diǎn) ci

5、rcle空心圓點(diǎn)項(xiàng)目符號(hào) square正方形項(xiàng)目符號(hào) 每天我們都在成長(zhǎng)！ 超鏈接是HTML文檔的最基本特征之一。超 鏈接可以讓瀏覽者在各個(gè)獨(dú)立的頁(yè)面之間 方便的跳轉(zhuǎn)。 超鏈接的范圍很廣，可以將文檔中的任何 文字及任意位置的圖片設(shè)置為超鏈接。 12 每天我們都在成長(zhǎng)！ 絕對(duì)路徑是包括服務(wù)器范圍內(nèi)的完全路徑。 絕對(duì)路徑可以使源文件精確的找到，除非 文件位置發(fā)生變化，否則不會(huì)出現(xiàn)錯(cuò)誤 相對(duì)路徑可以表述源目標(biāo)端點(diǎn)與目標(biāo)端點(diǎn) 之間的相互位置。它有利于網(wǎng)站的移植， 因而在開(kāi)發(fā)中通常使用相對(duì)路徑。 13 每天我們都在成長(zhǎng)！ 內(nèi)部鏈接也稱站內(nèi)鏈接，是指鏈接的對(duì)象 是在同一個(gè)網(wǎng)站中的資源。 語(yǔ)法格式： 鏈接文字

6、 鏈接目標(biāo)窗口屬性 target 語(yǔ)法格式： 鏈接文字 14 每天我們都在成長(zhǎng)！ 目標(biāo)窗口設(shè)置的屬性值 超鏈接樣例 15 屬性值屬性值含含 義義 _self在當(dāng)前頁(yè)面中打開(kāi)鏈接 _blank在新窗口中打開(kāi)鏈接 _top在頂層框架中打開(kāi)連接 _parent在當(dāng)前框架的上一層打開(kāi)鏈接 每天我們都在成長(zhǎng)！ 錨點(diǎn)就是指在給定名稱的一個(gè)網(wǎng)頁(yè)的某個(gè) 位置。創(chuàng)建錨點(diǎn)鏈接首先要?jiǎng)?chuàng)建錨點(diǎn)。 語(yǔ)法格式： 利用錨點(diǎn)名稱可以鏈接到相應(yīng)的位置。這 個(gè)名稱可以是數(shù)字或英文。同一個(gè)網(wǎng)頁(yè)可 以有無(wú)數(shù)的錨點(diǎn)，但是不能有兩個(gè)相同的 錨點(diǎn) 16 每天我們都在成長(zhǎng)！ 建立錨點(diǎn)以后，在href屬性中輸入錨點(diǎn)名稱， 可以連接到頁(yè)面的不同位置 語(yǔ)法格式： 錨點(diǎn)鏈接也可以鏈接到其他頁(yè)面 語(yǔ)法格式： 超鏈接錨點(diǎn)樣例 17 每天我們都在成長(zhǎng)！ 超鏈接標(biāo)簽也可以鏈接到外部網(wǎng)頁(yè) 語(yǔ)法格式： 圖片也可以作為超鏈接 語(yǔ)法格式： 18 每天我們都在成長(zhǎng)！ 本章我們學(xué)習(xí)了 在HTML中插入圖片，以及對(duì)圖片進(jìn)行調(diào)整 的6個(gè)基本屬性 學(xué)習(xí)了HTML列表，有序列表和無(wú)序列表 學(xué)習(xí)了HTML超鏈接，內(nèi)部鏈接，錨點(diǎn)鏈接， 圖片鏈接 19 每天我們都在成長(zhǎng)！ 制作網(wǎng)頁(yè)個(gè)人簡(jiǎn)歷 要求配有自己的照片和相關(guān)圖片及背景