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

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

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

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

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

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

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