1、第三章,文字、圖片和超鏈接,課程回顧,上次課我們主要講了： 網(wǎng)頁的基本結(jié)構(gòu) 網(wǎng)頁的布局規(guī)范 HTML相關(guān)術(shù)語,2,本章節(jié)授課目標(biāo),掌握文字的排版技巧及常用標(biāo)簽的使用 掌握圖片標(biāo)簽及圖片在網(wǎng)頁中的應(yīng)用 掌握超鏈接的使用技巧,3,文字標(biāo)簽的作用,實(shí)際上body本身就是一個(gè)標(biāo)簽,因此在其內(nèi)部輸出文字，理論上講是不需要使用其他標(biāo)簽的。但是我們編寫出的網(wǎng)頁，并不僅僅是被“人”所瀏覽，同樣還要被機(jī)器讀取，比如搜索引擎。 比如標(biāo)題標(biāo)簽(Heading)：通過 - 等標(biāo)簽進(jìn)行定義，雖然從視覺角度來講，heading標(biāo)簽僅僅有字號大小和粗體的區(qū)分，但是搜索引擎可通過標(biāo)題為我們的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。,4,常

2、用的文字排版標(biāo)簽,標(biāo)題標(biāo)簽：，有級別劃分，h1為最重要、h2為次重要，以此類推。 文字格式化標(biāo)簽：所謂文字格式化，即對文字的展示效果做一定的處理 粗體： 斜體： 下劃線：下劃線標(biāo)簽已經(jīng)被廢除掉，通常用css來實(shí)現(xiàn)下劃線效果 刪除線： 大號字： 可用于文字間突然放大的部分，不必再為此處單寫樣式 小號字： 可用于文字間突然縮小的部分，意義同上 下標(biāo)： 上標(biāo)： 重點(diǎn)描述： 輸出斜體，與效果一致 加重語氣： 輸出粗體，與效果一致，比em語氣更強(qiáng)烈,5,常用的文字排版標(biāo)簽,段落標(biāo)簽： 換行標(biāo)簽： 換行標(biāo)簽的意義相當(dāng)于在文件內(nèi)部強(qiáng)制制造換行 注釋標(biāo)簽： 注釋標(biāo)簽的意義在于代碼已然存在于網(wǎng)頁中，僅僅是不被輸

3、出出來。 單列列表標(biāo)簽：用于定義文檔中的列表（非數(shù)據(jù)列表），以單列形式呈現(xiàn)，可分為有序列表和無序列表。 有序列表： 無序列表： 無論是有序列表還是無序列表，都以標(biāo)簽作為行顯示,6,常用的文字排版標(biāo)簽,多列列表標(biāo)簽：類似于數(shù)據(jù)表格table的效果，比table的代碼更整潔，通常用于定義數(shù)據(jù)量較小的數(shù)據(jù)列表。 表體： 表項(xiàng)： 表內(nèi)容： 層標(biāo)簽： div標(biāo)簽較少的用于定義純文字內(nèi)容，除非該內(nèi)容不必再用其他標(biāo)簽包裹 區(qū)域標(biāo)簽： span標(biāo)簽是最常用的文字標(biāo)簽，通常文字的樣式效果處理，都會附加在span標(biāo)簽的style屬性里,7,小結(jié),有問題嗎？,8,圖片的控制,圖片標(biāo)簽： 圖片元素屬于自結(jié)束元素，因此

4、不需要來結(jié)束 圖片標(biāo)簽與其他標(biāo)簽不同，它有兩個(gè)必須添加的屬性 src和alt Src：圖片的加載路徑，可以是絕對路徑，也可以是相對路徑 Alt：圖片的代替文本 可選屬性：width、 height、 usemap、 ismap,9,圖片的尺寸控制,寬度：width 可填寫像素值或百分比值 高度：height 可填寫像素值或百分比值,10,注1：在標(biāo)簽屬性里定義圖片尺寸時(shí)，如填像素值，只需填寫數(shù)值，不必填寫單位；如填寫百分比值，需要帶%,注2：width 和 height 可只填寫其中之一，圖片將以設(shè)定屬性值按等比例縮放,圖片映射,所謂圖象映射是指一個(gè)圖片上的不同位置被指定了不同的超級鏈接；點(diǎn)擊

5、圖片的不同位置會打開不同的超級鏈接目標(biāo)。這與將圖片置入標(biāo)簽內(nèi)有本質(zhì)的區(qū)別 圖象映射由標(biāo)簽定義 有一個(gè)基本屬性是name。Name給圖象映射命名，這個(gè)命名將會被元素用usemap屬性引用。所以，圖象上的圖象映射實(shí)際上是對定義的映射的一個(gè)引用 在定義圖象映射時(shí)，可以定義三種形狀的映射： circle(圓形)、rect(矩形rectangle)、poly(多邊形),11,圖片映射,代碼： 代碼中的 標(biāo)簽，就是映射中的形狀，當(dāng)我們的鼠標(biāo)點(diǎn)擊到映射時(shí)，可以看到這個(gè)形狀的邊緣,12, ,在背景中使用圖片,在網(wǎng)頁中使用圖片，除了可以使用標(biāo)簽外，我們還可以通過為其他元素定義背景圖的方式來使圖片顯示在網(wǎng)頁中，并

6、且在大多數(shù)時(shí)候，我們就是這么做的。 通過標(biāo)簽的style屬性，我們可以通過css的方式為元素增加背景圖,13,background:url(./images/bg.jpg),注意事項(xiàng),圖片的格式：在網(wǎng)頁中，可以使用很多種圖片格式，通常我們選擇GIF，JPG，PNG這三種格式。 Gif:Gif圖片在網(wǎng)頁中可以呈透明效果，即圖片如果無背景，那么在頁面中這張圖的透明部分會成鏤空效果顯示 Jpg：圖片通常較大，如非圖片效果要求較高，盡量不要使用 Png: Png圖片在網(wǎng)頁中也可以以透明形式顯示，除了IE6，在IE6下，Png圖片的透明部分成藍(lán)灰色背景 (Png格式比Jpg還要大) 圖片的對齊方式 圖片

7、在被載入的時(shí)候，會根據(jù)高度撐開它所在行的行高，這會造成一種現(xiàn)象，就是當(dāng)文字與圖片同時(shí)出現(xiàn)時(shí)，文字會與圖片的底邊對齊,14,小結(jié),有問題嗎？,15,神奇的超鏈接,超鏈接標(biāo)簽： 標(biāo)簽通常會被用于超鏈接，如： 標(biāo)簽有兩個(gè)常用屬性 href 和 title 如果href屬性留空，跳轉(zhuǎn)會默認(rèn)為站點(diǎn)根目錄 如果不設(shè)定href屬性，則會被當(dāng)做普通標(biāo)簽使用 如果想使用標(biāo)簽，卻又不希望它跳轉(zhuǎn)，可在href屬性中寫 # 我們還可以使用標(biāo)簽，通過錨點(diǎn)的方式跳轉(zhuǎn)到當(dāng)前頁面的某一屏,16,我是一個(gè)超鏈接,錨點(diǎn),錨點(diǎn)的目標(biāo)，同樣是一個(gè) 標(biāo)簽 的id或者name屬性，是在連接中使用的“鉤子” 錨點(diǎn)的特點(diǎn)： 1.通常情況下，

8、在跳轉(zhuǎn)以后，錨點(diǎn)的位置會出現(xiàn)在屏幕的最上端 2.如果錨點(diǎn)位置以下的空間不足一屏，則以屏幕下邊緣為準(zhǔn) 3.通常我們希望瀏覽者打開頁面時(shí)直接能看到我們希望他看到的內(nèi)容，就可以使用錨點(diǎn)來實(shí)現(xiàn)，在跨頁面的跳轉(zhuǎn)中，同樣可以使用錨點(diǎn),17,超鏈接,跳轉(zhuǎn)方式,跳轉(zhuǎn)方式：最簡單的解釋就是說我們要連接到的地址，是通過什么方式打開的。 Target：跳轉(zhuǎn)方式是通過標(biāo)簽的target屬性決定的，在這里，我們可以有4種選擇 _self：默認(rèn)方式，直接在當(dāng)前頁面打開目標(biāo)連接 _blank：在新窗口中打開目標(biāo)連接 _parent：在父窗口中打開新連接 _top：在頂層窗口打開新連接,18,訪問狀態(tài),超鏈接作為一種可以提供

9、交互功能的元素，它具有4種不同的狀態(tài)： 普通狀態(tài)(link)頁面第一次加載或者被重新加載時(shí)，我們所看到的超鏈接的狀態(tài) 鼠標(biāo)懸浮(hover)當(dāng)鼠標(biāo)懸浮到超鏈接上的狀態(tài) 訪問中(action)超鏈接被訪問，鼠標(biāo)被按下還未抬起時(shí)（焦點(diǎn)還未離開時(shí)）的狀態(tài) 訪問后(visited)超鏈接被訪問，鼠標(biāo)抬起時(shí)（鼠標(biāo)離開時(shí)（不支持）的狀態(tài),19,特別提示,任何HTML元素，除了“屬性”之外，還會有一個(gè)“事件”特性 事件就是我們對元素所執(zhí)行的操作，如：點(diǎn)擊鼠標(biāo)，按下鍵盤等。 在超鏈接執(zhí)行跳轉(zhuǎn)的時(shí)候，同時(shí)執(zhí)行了以下幾個(gè)事件：1.鼠標(biāo)懸?。?.獲得焦點(diǎn)；3.鼠標(biāo)點(diǎn)擊；(4.失去焦點(diǎn)) 技巧1：我們可以通過鼠標(biāo)點(diǎn)擊事件來完成標(biāo)簽的絕對不跳轉(zhuǎn)。 技巧2：我們可以通過鼠標(biāo)懸浮事件，來完成鼠標(biāo)懸浮的圖片切換,20,注：當(dāng)我們將超鏈接的href屬性設(shè)成 # 時(shí)，雖然頁面沒有跳轉(zhuǎn)，但是當(dāng)前頁面卻回到了屏幕最上端,注：超鏈接的4種狀態(tài)，在css中可以為其分別設(shè)定不