Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版） 課件模塊2 常用HTML元素

《Web開發(fā)任務(wù)式教程》

模塊2常用HTML元素《Web開發(fā)任務(wù)式教程》常用HTML元素本模塊介紹網(wǎng)頁開發(fā)常用HTML元素，包括圖像、視頻、音頻、超鏈接和列表元素的定義及用法。任務(wù)2.1設(shè)計(jì)一個(gè)海報(bào)任務(wù)2.2設(shè)計(jì)海報(bào)導(dǎo)航任務(wù)2.3設(shè)計(jì)網(wǎng)頁底部導(dǎo)航《Web開發(fā)任務(wù)式教程》常用HTML元素學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】1）掌握img、video、audio、object、a、ol、ul、li、area、map元素的屬性及用法。2）掌握?qǐng)D像映射的步驟?！灸芰δ繕?biāo)】1）能夠基于應(yīng)用場景靈活使用video、audio、object和a元素播放音頻和視頻。2）能夠基于應(yīng)用場景靈活使用img、object和a元素顯示圖像。3）能夠靈活應(yīng)用a元素加載頁面、下載文件、發(fā)送郵件和導(dǎo)航鏈接。4）能夠使用圖像映射高效設(shè)計(jì)網(wǎng)頁導(dǎo)航。5）能夠使用列表元素列表呈現(xiàn)網(wǎng)頁內(nèi)容?！禬eb開發(fā)任務(wù)式教程》本任務(wù)給出的范例海報(bào)如圖2-1所示，顯示電影的海報(bào)圖像、獲獎(jiǎng)情況、劇情介紹，以及影像資料。要求如下。1）海報(bào)圖像左對(duì)齊。2）文字顯示首行縮進(jìn)，兩端對(duì)齊。3）影像資料自適應(yīng)瀏覽器寬度放映。常用HTML元素任務(wù)2.1設(shè)計(jì)一個(gè)海報(bào)圖2-1電影海報(bào)《Web開發(fā)任務(wù)式教程》常用HTML元素2.1.1img元素img元素定義顯示在網(wǎng)頁中的圖像，是單標(biāo)簽空元素，也即其只包含屬性，不包含元素內(nèi)容，沒有標(biāo)簽結(jié)尾。使用img元素能夠顯示各種格式和大小的圖像，圖像與文字能夠按各種方式對(duì)齊。

表2-1img元素的屬性屬性名說明alt設(shè)置圖像的替換文本，當(dāng)瀏覽器無法載入圖像時(shí)，顯示替換文本的信息，有助于更好的顯示信息，增加網(wǎng)頁的友好性和易讀性src設(shè)置待顯示圖像的URL地址，可以是項(xiàng)目中的圖像，也可以是網(wǎng)絡(luò)圖像，項(xiàng)目中的圖像用相對(duì)地址，網(wǎng)絡(luò)圖像用網(wǎng)址，該屬性必須設(shè)置height設(shè)置圖像的高度，取值為pixels或%width設(shè)置圖像的寬度，取值為pixels或%align

設(shè)置圖像的對(duì)齊方式，取值說明如下。top：頂部對(duì)齊bottom：底部對(duì)齊，默認(rèn)對(duì)齊方式middle：居中對(duì)齊left：左對(duì)齊right：右對(duì)齊usemap將圖像定義為客戶端圖像映射時(shí)，使用該屬性與map元素的name或id屬性相關(guān)聯(lián)，能夠建立img與map元素之間的關(guān)系，取值為“#”+map元素的name或id屬性值，例如“#img_id”《Web開發(fā)任務(wù)式教程》常用HTML元素【例2-1】使用img元素顯示如圖2-2所示的3張大小不同和1張來源不同的圖像?！纠?-2】設(shè)置img元素的對(duì)齊屬性，實(shí)現(xiàn)文字與圖像的不同對(duì)齊方式，使顯示效果如圖2-3所示。圖2-2圖像顯示圖2-3圖像與文字對(duì)齊顯示《Web開發(fā)任務(wù)式教程》常用HTML元素【例2-3】使用img元素顯示如圖2-4所示的路由器介紹，其中“了解更多”和“立即購買”也是圖像。圖2-4圖像與文字混排顯示《Web開發(fā)任務(wù)式教程》常用HTML元素2.1.2video元素video元素定義網(wǎng)頁中的視頻，可以在標(biāo)簽開頭和標(biāo)簽結(jié)尾之間放置文字內(nèi)容，以便在不支持該元素的瀏覽器中給出提示信息。表2-2video元素的屬性屬性名說明src設(shè)置待播放的視頻URLautoplay設(shè)置視頻在就緒后馬上播放controls設(shè)置顯示播放控制控件height設(shè)置視頻播放器的高度，取值為pixels或%width 設(shè)置視頻播放器的寬度，取值為pixels或%loop設(shè)置視頻循環(huán)播放功能muted設(shè)置視頻靜音poster設(shè)置視頻播放前顯示的圖像preload設(shè)置在網(wǎng)頁加載時(shí)加載視頻，并預(yù)備播放。如果使用了"autoplay"，該屬性會(huì)被忽略《Web開發(fā)任務(wù)式教程》常用HTML元素【例2-4】使用video元素播放一段視頻，網(wǎng)頁顯示效果如圖2-5所示。圖2-5video元素視頻播放效果《Web開發(fā)任務(wù)式教程》常用HTML元素2.1.3audio元素audio元素定義網(wǎng)頁中的聲音?？梢栽跇?biāo)簽開頭和標(biāo)簽結(jié)尾之間放置文字內(nèi)容，以便在不支持該元素的瀏覽器中給出提示信息。常用屬性及屬性含義與video元素類似?！禬eb開發(fā)任務(wù)式教程》常用HTML元素2.1.4object元素object元素定義網(wǎng)頁中的嵌入式對(duì)象，能夠?qū)⒍嗝襟w（例如圖像、音頻、視頻、Javaapplets、ActiveX、PDF以及Flash）和HTML網(wǎng)頁添加到HTML文件中。屬性名說明align定義圍繞該對(duì)象的文字對(duì)齊方式，取值說明如下。left：左對(duì)齊right：右對(duì)齊top：頂部對(duì)齊bottom：底部對(duì)齊data規(guī)定對(duì)象要使用資源的URLheight定義對(duì)象的高度，取值為pixels或%standby定義當(dāng)對(duì)象加載時(shí)顯示的文字width定義對(duì)象的寬度，取值為pixels或%type規(guī)定對(duì)象的Internet媒體類型表2-3object元素的屬性《Web開發(fā)任務(wù)式教程》常用HTML元素【例2-5】使用object元素顯示圖像、播放視頻和引入HTML文件，網(wǎng)頁顯示效果如圖2-6所示。圖2-6使用object元素《Web開發(fā)任務(wù)式教程》常用HTML元素2.1.5任務(wù)實(shí)現(xiàn)1.技術(shù)分析1）圖像元素使用align屬性設(shè)置左對(duì)齊，實(shí)現(xiàn)文字和圖像緊密排列的效果。2）使用空格實(shí)體實(shí)現(xiàn)文字首行縮進(jìn)。3）video元素播放視頻。2.編碼實(shí)現(xiàn)《Web開發(fā)任務(wù)式教程》任務(wù)2.1中列出了電影的獲獎(jiǎng)情況，本任務(wù)以鏈接的方式進(jìn)一步給出獎(jiǎng)項(xiàng)的詳細(xì)介紹，方便用戶全面了解電影。1）網(wǎng)頁初始顯示效果如圖2-7a所示，顯示電影的海報(bào)圖像和獲獎(jiǎng)情況。2）將電影視頻播放放在單獨(dú)的HTML文件中，并鏈接到電影的海報(bào)圖像上，在圖像上單擊時(shí)，打開視頻播放網(wǎng)頁，播放電影影像資料，如圖2-7d所示。常用HTML元素任務(wù)2.2設(shè)計(jì)海報(bào)導(dǎo)航a)初始顯示效果

d)視頻播放效果《Web開發(fā)任務(wù)式教程》常用HTML元素b，c)鏈接到獎(jiǎng)項(xiàng)圖2-7電影海報(bào)及其導(dǎo)航3）在獲獎(jiǎng)的獎(jiǎng)項(xiàng)上單擊跳轉(zhuǎn)到獎(jiǎng)項(xiàng)介紹的位置，分別如圖2-7b、圖2-7c所示?！禬eb開發(fā)任務(wù)式教程》常用HTML元素2.2.1a元素1.基本定義a元素定義超鏈接，用于從一個(gè)位置鏈接到另一個(gè)位置，實(shí)現(xiàn)豐富的功能，鏈接提示信息放在元素標(biāo)簽開頭和標(biāo)簽結(jié)尾之間，可以是文本或嵌套其他元素。常用屬性如表2-4所示。表2-4a元素的屬性屬性名說明href規(guī)定鏈接指向的URL，該屬性必須設(shè)置，設(shè)置為井號(hào)（#）表示鏈接目標(biāo)不確定。download規(guī)定使用超鏈接元素實(shí)現(xiàn)下載功能時(shí)，目標(biāo)下載后的文件名target規(guī)定在何處打開鏈接文件，取值說明如下。_blank：在一個(gè)新打開、未命名的窗口中載入目標(biāo)文件_self：在相同的框架或者窗口中載入目標(biāo)文件_parent：在父窗口或者包含超鏈接引用框架的框架集中載入目標(biāo)文件。如果這個(gè)引用是在瀏覽器窗口或者在頂級(jí)框架中，與_self值等效_top：清除所有被包含的框架，將目標(biāo)文件載入整個(gè)瀏覽器的窗口framename：在框架中載入目標(biāo)文件《Web開發(fā)任務(wù)式教程》常用HTML元素a元素具有默認(rèn)的文字外觀，說明如下。1）未被訪問前文字藍(lán)色顯示，帶有下劃線2）已被訪問過文字紫色顯示，帶有下劃線3）處于激活狀態(tài)時(shí)文字紅色顯示，帶有下劃線《Web開發(fā)任務(wù)式教程》常用HTML元素2.鏈接到指定位置(1)鏈接到指定網(wǎng)頁將a元素的href屬性設(shè)置為網(wǎng)頁網(wǎng)址可以鏈接打開網(wǎng)頁，網(wǎng)址可以是相對(duì)路徑，也可以是絕對(duì)路徑?！纠?-6】修改例1-3，將標(biāo)題1使用相對(duì)路徑鏈接到模塊1任務(wù)1.2的網(wǎng)頁，將標(biāo)題2鏈接到網(wǎng)址指定的位置。網(wǎng)頁顯示效果如圖2-8所示，圖2-8a為第一個(gè)標(biāo)題單擊過再打開的顯示效果，文字紫色顯示，單擊后打開任務(wù)1.2設(shè)計(jì)的網(wǎng)頁，參見圖1-6。標(biāo)題2沒有被單擊過，文字藍(lán)色顯示。圖2-8b為第一個(gè)標(biāo)題激活瞬間的顯示效果，文字紅色顯示，網(wǎng)頁底部顯示鏈接的網(wǎng)址。a)鏈接后顯示效果b)鏈接激活時(shí)顯示效果圖2-8鏈接到指定網(wǎng)頁《Web開發(fā)任務(wù)式教程》常用HTML元素將img元素嵌套在a元素內(nèi)，在圖像上單擊可以鏈接到a元素href屬性指定的位置，實(shí)現(xiàn)圖像的鏈接功能?！纠?-7】為例2-3的“了解更多”和“立即購買”圖像增加鏈接，使用戶在圖像上單擊時(shí)打開對(duì)應(yīng)的網(wǎng)頁?！禬eb開發(fā)任務(wù)式教程》常用HTML元素(2)鏈接到網(wǎng)頁中指定位置元素的id屬性值具有唯一性，將a元素的href屬性值設(shè)為井號(hào)（#）加某元素的id屬性值，可以鏈接到網(wǎng)頁中某元素所在的位置。【例2-8】修改例2-2，在網(wǎng)頁開頭增加網(wǎng)頁主題，在網(wǎng)頁底部增加“回到主題”的鏈接，當(dāng)網(wǎng)頁瀏覽到底部時(shí)單擊“回到主題”直接回到網(wǎng)頁主題。網(wǎng)頁顯示效果如圖2-9所示，圖2-9a為初始和單擊“回到主題”的顯示效果，圖2-9b為滾動(dòng)到網(wǎng)頁底部的顯示效果。a)網(wǎng)頁初始和單擊“回到主題”鏈接后顯示效果b)網(wǎng)頁滾動(dòng)到底部時(shí)的顯示效果圖2-9

鏈接到網(wǎng)頁中指定位置《Web開發(fā)任務(wù)式教程》常用HTML元素3.打開電子郵件發(fā)送頁面將a元素的href屬性設(shè)置為以“mailto:”開頭，后接郵箱地址的字符串，單擊超鏈接能夠打開郵件發(fā)送頁面?！纠?-9】編寫代碼實(shí)現(xiàn)單擊打開發(fā)送郵件的功能。<ahref="mailto:webmaster@">發(fā)送郵件</a>《Web開發(fā)任務(wù)式教程》常用HTML元素4.播放音頻和視頻將a元素的href屬性設(shè)置為音頻或視頻的路徑可以播放音頻和視頻，可以是相對(duì)路徑，也可以是絕對(duì)路徑?！纠?-10】使用a元素播放音頻和視頻，網(wǎng)頁顯示效果如圖2-10所示。圖2-10a為初始顯示效果，圖2-10b為單擊音頻鏈接播放效果，圖2-10c為單擊視頻鏈接的播放效果。a)初始顯示效果b)音頻播放顯示效果c)視頻播放顯示效果圖2-10音頻視頻鏈接在a元素標(biāo)簽開頭和標(biāo)簽結(jié)尾中間應(yīng)給出鏈接提示信息，例如本例的“音頻”、“視頻”文字提示。script元素用于引入播放插件，新版本瀏覽器支持音頻和視頻的播放，可以不添加該元素，但是，保險(xiǎn)起見建議添加，確保音頻和視頻能夠正常播放。?！禬eb開發(fā)任務(wù)式教程》常用HTML元素5.文件下載將a元素的href屬性設(shè)置為文件路徑，包括文本文件、壓縮包、圖像文件等，能夠?qū)崿F(xiàn)單擊超鏈接下載文件的功能。【例2-8】編寫代碼實(shí)現(xiàn)單擊能夠下載文本文件、圖像、壓縮包的功能，網(wǎng)頁顯示效果如圖2-11所示。圖2-11a為初始顯示效果，圖2-11b為單擊“單擊下載HbuilderX安裝包”鏈接顯示效果。下載完畢，文件保存到下載路徑，并保存為“HbuilderX安裝包”。a)初始顯示效果b)單擊“單擊下載HbuilderX安裝包”顯示效果圖2-11下載文件《Web開發(fā)任務(wù)式教程》常用HTML元素2.2.2列表元素?zé)o序列表無序列表是關(guān)于項(xiàng)目的列表，列表的每一項(xiàng)使用粗體圓點(diǎn)（典型的小黑圓圈）標(biāo)記，具有自動(dòng)對(duì)齊功能。無序列表用ul元素表示，每個(gè)列表項(xiàng)用li元素表示。列表項(xiàng)內(nèi)部可以是簡單文本，也可以是段落、換行符、圖像、鏈接等元素?！纠?-12】用無序列表顯示某企業(yè)的質(zhì)量方針，網(wǎng)頁顯示效果如圖2-12所示。圖2-12無序列表顯示企業(yè)質(zhì)量方針《Web開發(fā)任務(wù)式教程》常用HTML元素2.有序列表有序列表也是關(guān)于項(xiàng)目的列表，列表的每一項(xiàng)使用數(shù)字進(jìn)行標(biāo)記，也具有自動(dòng)對(duì)齊功能。有序列表用ol元素表示，每個(gè)列表項(xiàng)用li元素表示。與無序列表一樣，列表項(xiàng)內(nèi)部可以是簡單文本，也可以是段落、換行符、圖像、鏈接等元素?！纠?-13】用有序列表顯示快速使用云服務(wù)的步驟，每一個(gè)步驟都有超鏈接，根據(jù)需要可以鏈接到進(jìn)一步的說明網(wǎng)頁，顯示效果如圖2-13所示。圖2-13有序列表顯示云服務(wù)使用步驟《Web開發(fā)任務(wù)式教程》常用HTML元素列表嵌套無序和有序列表的列表項(xiàng)內(nèi)部還可以是列表元素，稱為列表嵌套。嵌套層數(shù)沒有限制，但是嵌套層次不允許交錯(cuò)?！纠?-14】修改例2-13，為列表第3項(xiàng)嵌套子列表，網(wǎng)頁顯示效果如圖2-14所示。圖2-14列表嵌套《Web開發(fā)任務(wù)式教程》常用HTML元素2.2.3任務(wù)實(shí)現(xiàn)1.技術(shù)分析1）完善任務(wù)2.1電影海報(bào)的內(nèi)容，增加關(guān)于獎(jiǎng)項(xiàng)介紹的內(nèi)容。2）使用列表元素顯示獲獎(jiǎng)的詳細(xì)情況。3）使用超鏈接元素a實(shí)現(xiàn)網(wǎng)頁需要的導(dǎo)航功能。2.編碼實(shí)現(xiàn)1）在項(xiàng)目中新建名為“video.html”的視頻播放文件。2）復(fù)制“task1.html”文件，并重命名為“task2.html”，修改代碼，實(shí)現(xiàn)程序功能。《Web開發(fā)任務(wù)式教程》圖像映射能夠捕獲一張圖像的不同位置，從而實(shí)現(xiàn)在圖像的不同位置單擊鏈接到不同的目標(biāo)，提升圖像的加載效率，在網(wǎng)頁開發(fā)中具有非常重要的作用。本任務(wù)使用圖像映射實(shí)現(xiàn)網(wǎng)頁底部導(dǎo)航，使用戶在不同圖標(biāo)上單擊時(shí)鏈接打開不同的網(wǎng)址，網(wǎng)頁顯示效果如圖2-15所示，圖2-15a為在領(lǐng)英圖標(biāo)單擊的瞬間，圖2-15b為在知乎圖標(biāo)單擊的瞬間，單擊完成后能夠打開對(duì)應(yīng)網(wǎng)址的網(wǎng)頁。常用HTML元素任務(wù)2.3設(shè)計(jì)網(wǎng)頁底部導(dǎo)航a)在領(lǐng)英圖標(biāo)單擊瞬間的顯示效果b)在知乎圖標(biāo)單擊瞬間的顯示效果圖2-15使用圖像映射實(shí)現(xiàn)網(wǎng)頁底部導(dǎo)航《Web開發(fā)任務(wù)式教程》常用HTML元素2.3.1map元素map元素建立圖像與單擊區(qū)域的映射關(guān)系，主要屬性為id，為map元素定義唯一的標(biāo)識(shí)；可選屬性為name，為map元素定義名稱。在不同的瀏覽器中，img元素中的usemap屬性可能引用map元素的id屬性值或name屬性值，因此，保險(xiǎn)起見，應(yīng)同時(shí)向map元素添加id和name屬性。2.3.2area元素area元素定義圖像的可單擊區(qū)域，總是嵌套在map元素中，常用屬性如表2-5所示?！禬eb開發(fā)任務(wù)式教程》常用HTML元素表2-5area元素的屬性屬性名說明href定義可單擊區(qū)域的目標(biāo)URLnohref從圖像映射中排除某個(gè)區(qū)域。shape定義可單擊區(qū)域的形狀，不設(shè)置默認(rèn)為矩形區(qū)域，取值說明如下。rect：矩形區(qū)域：用左上角和右下角坐標(biāo)定義circle：圓形區(qū)域，用圓心坐標(biāo)和半徑定義poly：多邊形區(qū)域，用坐標(biāo)點(diǎn)定義，首尾自動(dòng)連接coords定義可單擊區(qū)域的坐標(biāo)，與shape屬性配合使用，規(guī)定區(qū)域的尺寸、形狀和位置，被關(guān)聯(lián)圖像左上角的坐標(biāo)是"0,0"，取值說明如下。圓形：shape="circle"，coords="x,y,r"，x，y定義圓心的位置，r是以像素為單位的圓形的半徑矩形：shape=“rect”，coords=“x1,y1,x2,y2”，坐標(biāo)(x1,y1)定義矩形一個(gè)角的頂點(diǎn)坐標(biāo)，坐標(biāo)(x2,y2)定義矩形對(duì)角的頂點(diǎn)坐標(biāo)。多邊形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."，每一對(duì)"x,y"坐標(biāo)定義多邊形的一個(gè)頂點(diǎn)。多邊形自動(dòng)封閉，在列表的結(jié)尾不需要重復(fù)第一個(gè)坐標(biāo)來閉合整個(gè)區(qū)域target取值含義同a元素，規(guī)定在何處打開href屬性指定的目標(biāo)URL，取值說明如下。_blank：在一個(gè)新打開、未命名的窗口中載入目標(biāo)文件_self：在相同的框架或者瀏覽器窗口中載入目標(biāo)文件_parent：在父窗口或者包含超鏈接引用框架的框架集中載入目標(biāo)文件。如果這個(gè)引用是在瀏覽器窗口或者在頂級(jí)框架中，與_self值等效_top：清除所有被包含的框架，將目標(biāo)文件載入到整個(gè)瀏覽器的窗口framename：在框架中載入目標(biāo)文件alt定義替換文本《Web開發(fā)任務(wù)式教程》常用HTML元素2.3.3圖像映射聯(lián)合使用img、map和area元素可以生成圖像映射，生成步驟如下。1）設(shè)置map元素的id和name屬性。2）設(shè)置img元素的usemap屬性為map元素的id或name屬性值。3）在map元素中嵌套area元素，通過area元素的shape屬性和coords屬性定義圖像的敏感區(qū)域，通過area元素的href屬性定義對(duì)應(yīng)敏感區(qū)域的鏈接目標(biāo)。