《HTML5+CSS3網(wǎng)頁制作》課件-模塊三 HTML5新增元素及屬性

模塊三HTML5新增元素及屬性任務(wù)1結(jié)構(gòu)化元素和分組元素網(wǎng)頁制作CSSHTML知識準(zhǔn)備——結(jié)構(gòu)化元素和分組元素實(shí)戰(zhàn)演練——制作“唐詩欣賞”網(wǎng)頁結(jié)構(gòu)化元素和分組元素0201進(jìn)階訓(xùn)練——制作“文房四寶展示”網(wǎng)頁03動手實(shí)踐——制作“學(xué)校新聞”網(wǎng)頁041.掌握HTML5的結(jié)構(gòu)化元素、分組元素2.了解ARIA結(jié)構(gòu)化元素和分組元素學(xué)習(xí)目標(biāo)：1.培養(yǎng)包容性與平等理念，使其創(chuàng)建更加包容和無障礙的數(shù)字環(huán)境，確保所有人，無論身體條件如何，都能平等訪問和使用互聯(lián)網(wǎng)資源。2.培養(yǎng)社會責(zé)任，引導(dǎo)其對公共利益的關(guān)注與尊重，使其創(chuàng)建高質(zhì)量的數(shù)字內(nèi)容，展現(xiàn)出對社會福祉的積極貢獻(xiàn)。

3.引導(dǎo)終身學(xué)習(xí)，使其認(rèn)識到知識和技能的更新?lián)Q代是個(gè)人職業(yè)發(fā)展和適應(yīng)社會變化的關(guān)鍵。結(jié)構(gòu)化元素和分組元素思政目標(biāo)：

21知識準(zhǔn)備—結(jié)構(gòu)化元素1知識準(zhǔn)備--在HTML5官方的最新標(biāo)準(zhǔn)中，HTML5的結(jié)構(gòu)化元素有body、article、section、nav、aside、h1–h6、hgroup、header、footer，除body和h1–h6元素外，其余都為在HTML5標(biāo)準(zhǔn)中新增的元素，使用這些結(jié)構(gòu)化元素，開發(fā)者可以創(chuàng)建更加語義化和易于理解的網(wǎng)頁，對于搜索引擎優(yōu)化（SEO）、輔助技術(shù)和現(xiàn)代Web開發(fā)框架都是有益的。此外，這些元素還可以幫助開發(fā)者遵循Web內(nèi)容可訪問性指南（WCAG），提高網(wǎng)站的可用性和可訪問性。

21知識準(zhǔn)備—結(jié)構(gòu)化元素1知識準(zhǔn)備--

1.hgroup元素hgroup元素代表一個(gè)標(biāo)題及其相關(guān)的內(nèi)容。這個(gè)元素可以用來組合一個(gè)從h1到h6的標(biāo)題元素與一個(gè)或多個(gè)p段落元素，其中的段落內(nèi)容可以代表副標(biāo)題、備選標(biāo)題或標(biāo)語。2.header元素header元素用于定義頁面或頁面內(nèi)某個(gè)區(qū)域的頭部。它可以包含一系列的輔助性內(nèi)容，如徽標(biāo)（logo）、導(dǎo)航菜單、搜索框、作者信息、時(shí)間戳等。3.footer元素footer元素用于表示頁面或頁面內(nèi)某個(gè)區(qū)域的底部信息。它通常包含了版權(quán)聲明、聯(lián)系方式、法律信息、社交媒體鏈接、次要導(dǎo)航鏈接等。4.nav元素nav元素用于定義頁面中的導(dǎo)航鏈接部分。5.aside元素aside元素用于表示與主內(nèi)容相關(guān)的側(cè)邊欄信息。6.article元素article元素用于封裝文檔、頁面或應(yīng)用中的獨(dú)立內(nèi)容，這些內(nèi)容可以獨(dú)立于頁面的其余部分被分發(fā)或重用。

21知識準(zhǔn)備—結(jié)構(gòu)化元素1知識準(zhǔn)備--案例3-1演示article元素的用法，使用兩個(gè)article元素封裝兩篇獨(dú)立的博客文章，每篇文章都有自己的標(biāo)題、內(nèi)容、發(fā)布日期、作者和標(biāo)簽，整個(gè)文檔也有自己的頭部和底部信息。

21知識準(zhǔn)備—結(jié)構(gòu)化元素1知識準(zhǔn)備--

7.section元素section元素用于定義文檔或頁面中的一個(gè)獨(dú)立部分，這部分通常包含與其主題相關(guān)的內(nèi)容。案例3-2演示section元素的用法，使用section元素組織頁面的不同部分，如“關(guān)于我”、“我的項(xiàng)目”和“聯(lián)系方式”。每個(gè)section元素都有自己的標(biāo)題和內(nèi)容，整個(gè)文檔也有自己的頭部和底部信息，文檔的頭部信息中還用nav元素實(shí)現(xiàn)導(dǎo)航鏈接，整體上形成清晰的結(jié)構(gòu)層次。

21知識準(zhǔn)備—分組元素1知識準(zhǔn)備--

在HTML5官方的最新標(biāo)準(zhǔn)中，HTML5的分組元素有p、hr、pre、blockquote、ol、ul、menu、li、dl、dt、dd、figure、figcaption、main、search、div，在HTML5標(biāo)準(zhǔn)中新增的元素figure、figcaption、main和search。

1.figure和figcaption元素figure元素用于封裝媒介內(nèi)容，如圖片、圖表、視頻、代碼片段等。figure元素通常包含一個(gè)或多個(gè)媒介元素（img、video、audio、pre等），并且可以包含一個(gè)或多個(gè)figcaption元素作為描述或標(biāo)題。figcaption元素用于為figure元素中的內(nèi)容提供標(biāo)題或描述。案例3-3演示figure和figcaption元素的用法，使用有兩個(gè)figure元素，第一個(gè)包含一張圖片，第二個(gè)包含一段代碼片段。每個(gè)figure元素都配有一個(gè)figcaption元素，用于提供圖片和代碼片段的描述或標(biāo)題，分別位于figure元素的結(jié)束和開始位置。

21知識準(zhǔn)備—分組元素1知識準(zhǔn)備--

2.main元素main用于表示文檔或應(yīng)用程序的主要內(nèi)容區(qū)域。

3.search元素search元素是一個(gè)容器，代表文檔或應(yīng)用程序中包含與執(zhí)行搜索或過濾操作相關(guān)的表單控件或其他內(nèi)容的部分。

案例3-4演示search元素的用法，將search元素作為網(wǎng)站頭部中的搜索容器，以執(zhí)行簡單的全站搜索。

21知識準(zhǔn)備—分組元素1知識準(zhǔn)備--

2.main元素main用于表示文檔或應(yīng)用程序的主要內(nèi)容區(qū)域。

3.search元素search元素是一個(gè)容器，代表文檔或應(yīng)用程序中包含與執(zhí)行搜索或過濾操作相關(guān)的表單控件或其他內(nèi)容的部分。

案例3-4演示search元素的用法，將search元素作為網(wǎng)站頭部中的搜索容器，以執(zhí)行簡單的全站搜索。

實(shí)戰(zhàn)演練—制作“唐詩欣賞”網(wǎng)頁2本次任務(wù)主要是利用HTML5新增的結(jié)構(gòu)化元素、分組元素等知識點(diǎn)完成“唐詩欣賞”網(wǎng)頁的制作，頁面頭部包含網(wǎng)站標(biāo)題和導(dǎo)航菜單，導(dǎo)航菜單包含四位唐代著名詩人的導(dǎo)航鏈接；主要內(nèi)容區(qū)包含《望廬山瀑布》展示區(qū)和作品賞析區(qū)；側(cè)邊欄提供李白的其他幾首代表作鏈接；底部用于展示版權(quán)和其他法律聲明信息。預(yù)覽效果如圖所示。

實(shí)戰(zhàn)演練—制作“唐詩欣賞”網(wǎng)頁2“唐詩欣賞”網(wǎng)頁制作思路為頭部用header元素作為容器，網(wǎng)站的主標(biāo)題用h1元素，導(dǎo)航菜單用包含ul元素的nav元素來實(shí)現(xiàn)；主要內(nèi)容區(qū)用main元素作為容器，《望廬山瀑布》展示區(qū)和作品賞析區(qū)用section元素，每個(gè)部分都有其標(biāo)題和內(nèi)容，標(biāo)題都用h2元素；《望廬山瀑布》展示區(qū)使用pre元素保持詩句的原始格式和換行，用figure和figcaption元素展示詩歌的配圖；作品賞析區(qū)用p元素提供對詩歌的深度分析和鑒賞；側(cè)邊欄用aside元素作為容器，標(biāo)題用h2元素，導(dǎo)航直接用ul元素實(shí)現(xiàn)；底部用footer元素包含p元素實(shí)現(xiàn)版權(quán)信息和版權(quán)聲明，確保網(wǎng)站的合法性。

在此基礎(chǔ)上，直接制作“唐詩欣賞”網(wǎng)頁的HTML結(jié)構(gòu)代碼即可實(shí)現(xiàn)任務(wù)目標(biāo)。

進(jìn)階訓(xùn)練—制作“文房四寶展示”網(wǎng)頁3本次任務(wù)主要是利用HTML5新增的結(jié)構(gòu)化元素、分組元素、ARIA等知識點(diǎn)完成“文房四寶展示”網(wǎng)頁的制作，頁面頭部包含網(wǎng)站標(biāo)題和導(dǎo)航菜單，導(dǎo)航菜單包含文房四寶的頁面內(nèi)導(dǎo)航鏈接；主要內(nèi)容區(qū)包含宣筆、徽墨、宣紙和歙硯等四寶的展示，每個(gè)文房四寶都有自己的區(qū)塊，這些區(qū)塊包含了標(biāo)題、描述性段落以及相關(guān)的圖片和圖注；側(cè)邊欄提供有關(guān)中國書法歷史、書法教程和購買指南的鏈接；底部用于展示版權(quán)和其他法律聲明信息。預(yù)覽效果如圖所示。

進(jìn)階訓(xùn)練—制作“文房四寶展示”網(wǎng)頁3ARIAARIA，全稱為AccessibleRichInternetApplications（可訪問的富互聯(lián)網(wǎng)應(yīng)用），是由W3C（萬維網(wǎng)聯(lián)盟）制定的一套屬性，旨在增強(qiáng)Web內(nèi)容和應(yīng)用程序的可訪問性。1.角色角色定義了元素的性質(zhì)和用途。它們告訴輔助技術(shù)，如屏幕閱讀器，元素在頁面上的功能是什么。ARIA角色共分為6類，分別為文檔結(jié)構(gòu)角色、小部件角色、地標(biāo)角色、實(shí)時(shí)區(qū)域角色、窗口角色和抽象角色。2.狀態(tài)狀態(tài)屬性反映了一個(gè)元素的當(dāng)前狀態(tài)或條件，這些狀態(tài)可能因用戶的交互而改變。3.屬性屬性提供了關(guān)于元素的靜態(tài)信息，這些信息不會因?yàn)橛脩艚换ザ淖儭?.使用注意事項(xiàng)開發(fā)者在構(gòu)建Web界面時(shí)，優(yōu)先使用具有適當(dāng)語義和功能的HTML5元素和屬性。只有在原生HTML元素?zé)o法滿足需求時(shí)，才應(yīng)該考慮使用ARIA角色、狀態(tài)或?qū)傩詠碓鰪?qiáng)或定義元素的可訪問性。ARIA的目的是為了彌補(bǔ)HTML在某些復(fù)雜交互場景下的不足，而不是替代標(biāo)準(zhǔn)的HTML元素。

進(jìn)階訓(xùn)練—制作“文房四寶展示”網(wǎng)頁3“文房四寶展示”網(wǎng)頁制作思路為頭部用header元素作為容器，網(wǎng)站的主標(biāo)題用h1元素，導(dǎo)航菜單用包含ul元素的nav元素來實(shí)現(xiàn)，在nav元素中的每個(gè)鏈接都指向了頁面內(nèi)相應(yīng)的article區(qū)塊，使用id和href屬性實(shí)現(xiàn)頁面內(nèi)的跳轉(zhuǎn)；主要內(nèi)容區(qū)用main元素作為容器，每個(gè)文房四寶都有自己的article區(qū)塊，這些區(qū)塊中標(biāo)題用h2元素、描述性段落用包含p元素的section元素實(shí)現(xiàn)，相關(guān)的圖片和圖注用figure和figcaption元素，每個(gè)article元素使用aria-labelledby屬性，使屏幕閱讀器能夠正確地讀取article區(qū)塊的標(biāo)題；側(cè)邊欄用aside元素作為容器，標(biāo)題用h2元素，導(dǎo)航直接用ul元素實(shí)現(xiàn)；底部用footer元素包含p元素實(shí)現(xiàn)版權(quán)信息和版權(quán)聲明，確保網(wǎng)站的合法性；給元素增加role屬性，用于增強(qiáng)文檔的可訪問性作為一種額外的保障，確保頁面結(jié)構(gòu)對所有用戶都是可訪問的，特別是在跨不同設(shè)備和輔助技術(shù)時(shí)。

在此基礎(chǔ)上，直接制作“文房四寶展示”網(wǎng)頁的HTML結(jié)構(gòu)代碼即可實(shí)現(xiàn)任務(wù)目標(biāo)。

4動手實(shí)踐—制作“學(xué)校新聞”網(wǎng)頁4設(shè)計(jì)并制作如圖所示的“學(xué)校新聞”網(wǎng)頁。頁面使用article、section、nav、aside、header、footer、figure、figcaption、main等元素和ARIA制作“學(xué)校新聞”網(wǎng)頁，頁面頭部的導(dǎo)航菜單通過錨點(diǎn)鏈接可以直達(dá)“最新消息”、“校園活動”和“公告通知”各部分內(nèi)容，滿足用戶快速獲取信息的需求。小結(jié)知識準(zhǔn)備——結(jié)構(gòu)化元素和分組元素實(shí)戰(zhàn)演練——制作“唐詩欣賞”網(wǎng)頁進(jìn)階訓(xùn)練——制作“文房四寶展示”網(wǎng)頁動手實(shí)踐——制作“學(xué)校新聞”網(wǎng)頁模塊三HTML5新增元素及屬性任務(wù)2交互性元素、文本級語義元素和全局屬性網(wǎng)頁制作CSSHTML知識準(zhǔn)備——交互性元素、文本級語義元素和全局屬性實(shí)戰(zhàn)演練——制作“文明行為宣傳”網(wǎng)頁交互性元素、文本級語義元素和全局屬性0201進(jìn)階訓(xùn)練——制作“?；丶铱纯础本W(wǎng)頁03動手實(shí)踐——制作“面試注意事項(xiàng)”網(wǎng)頁041.掌握HTML5的交互性元素、文本級語義元素

2.掌握HTML5的全局屬性3.了解HTML5中棄用與語義演變的元素交互性元素、文本級語義元素和全局屬性學(xué)習(xí)目標(biāo)：1.培養(yǎng)包容性與平等理念，使其創(chuàng)建更加包容和無障礙的數(shù)字環(huán)境，確保所有人，無論身體條件如何，都能平等訪問和使用互聯(lián)網(wǎng)資源。2.培養(yǎng)社會責(zé)任，引導(dǎo)其對公共利益的關(guān)注與尊重，使其創(chuàng)建高質(zhì)量的數(shù)字內(nèi)容，展現(xiàn)出對社會福祉的積極貢獻(xiàn)。

3.引導(dǎo)終身學(xué)習(xí)，使其認(rèn)識到知識和技能的更新?lián)Q代是個(gè)人職業(yè)發(fā)展和適應(yīng)社會變化的關(guān)鍵。交互性元素、文本級語義元素和全局屬性思政目標(biāo)：

21知識準(zhǔn)備—交互性元素1知識準(zhǔn)備--

在HTML5官方的最新標(biāo)準(zhǔn)中，HTML5的交互式元素有details元素、summary元素、dialog元素等。

1.details元素和summary元素

details元素和summary元素是配合使用的，用于在HTML文檔中顯示可折疊區(qū)域。details元素用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。summary元素作為details元素的第一個(gè)子元素，用于為details定義標(biāo)題。

21知識準(zhǔn)備—交互性元素1知識準(zhǔn)備--

details元素除具有全局屬性外還有一個(gè)open屬性，該屬性是布爾類型的，用于控制details元素的內(nèi)容是否默認(rèn)展開。案例3-5演示details元素的用法，在details元素中不使用summary元素，在這種情況下，瀏覽器將使用默認(rèn)摘要字符串作為標(biāo)題，谷歌瀏覽器通常為“詳情”，edge瀏覽器為“詳細(xì)信息”，并給details元素添加open屬性。

21知識準(zhǔn)備—交互性元素1知識準(zhǔn)備--案例3-6演示對案例3-5進(jìn)行改造，新添summary元素。

21知識準(zhǔn)備—交互性元素1知識準(zhǔn)備--2.dialog元素dialog元素表示一個(gè)對話框或其他交互式組件，例如一個(gè)對話框、檢查器或者窗口，該元素被瀏覽器的支持率目前是百分之94.99。像details元素一樣，dialog元素也是除具有全局屬性外還有一個(gè)open屬性。dialog元素不借助于JavaScript代碼很難實(shí)現(xiàn)交互功能，案例3-7演示使用JavaScript代碼動態(tài)地更改dialog元素的open屬性值來實(shí)現(xiàn)一個(gè)對話框的打開和關(guān)閉。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--HTML5規(guī)范非常重視語義性，力求為每個(gè)元素在文本級別上賦予特定的含義。同時(shí)，HTML5規(guī)范明確了各個(gè)元素的使用場景，既規(guī)定了其適用的情境，也指出了不適用的情況。規(guī)范中引入了一些新元素，一些舊元素則被完全移除（例如font、center和big），還有部分元素的定義有所調(diào)整。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--1.ruby、rt和rp元素“ruby”一詞指的是一種排版注釋系統(tǒng)，意為“基礎(chǔ)文本旁的短文本序列”，通常用于東亞文檔中以指示發(fā)音或提供簡短注釋。ruby注釋在中文和日文中用于顯示字符的發(fā)音。Ruby注釋的標(biāo)記包含ruby、rt和rp這三個(gè)元素。首先，在ruby元素內(nèi)部指定需要被解釋的表達(dá)式。接著，跟隨其后的rt元素提供解釋內(nèi)容；在支持ruby功能的瀏覽器中，rt元素的內(nèi)容會置于所描述表達(dá)式的上方展示。而不支持ruby功能的瀏覽器會連續(xù)顯示這些組成部分，這可能使得詞匯閱讀起來更為困難。因?yàn)椴⒉幻黠@第二詞是對第一詞的解釋，所以需要對這兩個(gè)部分進(jìn)行視覺上的分隔。這時(shí)rp元素就派上了用場：它允許添加可選的括號，這些括號僅在瀏覽器不認(rèn)識ruby時(shí)才會顯示。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--案例3-8演示ruby、rt和rp元素的用法，給“漢字”指示發(fā)音、“中國中央電視臺”提供英文縮寫，用rp元素給“中國中央電視臺”添加可選的括號，當(dāng)瀏覽器不支持ruby元素時(shí)，給rt元素的內(nèi)容加上括號。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--2.time元素time元素表示24小時(shí)制的時(shí)間或公歷中的日期，可選擇性地包含時(shí)間和時(shí)區(qū)成分。time元素常用的屬性為datetime屬性和pubdate屬性。（1）datetime屬性datetime屬性在HTML5中用于標(biāo)準(zhǔn)化日期和時(shí)間的表示，使得開發(fā)者能夠以標(biāo)準(zhǔn)化的方式在網(wǎng)頁中嵌入日期和時(shí)間信息，便于搜索引擎、輔助技術(shù)和其他自動化工具的解析。而time元素的文本內(nèi)容，是為用戶準(zhǔn)備的，它是頁面中顯示的內(nèi)容，對用戶可見。屬性值格式例子日期YYYY-MM-DD2024-07-10省略秒的時(shí)間hh:mm19:09含秒的時(shí)間hh:mm:ss19:09:06含毫秒的時(shí)間hh:mm:ss.f19:09:06.2318日期和時(shí)間的組合T是日期和時(shí)間之間的連接符2024-07-10T19:09含時(shí)區(qū)信息（Z代表零時(shí)區(qū)）以Z結(jié)尾2024-07-10T19:09:06Z相對于零時(shí)區(qū)的偏移量（正號表示東偏，負(fù)號表示西偏）+mm:hh/-mm:hh2024-07-10T19:09:06+08:00

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--（2）pubdate屬性pubdate屬性是一個(gè)布爾屬性，它表明所指定的日期適用于層級結(jié)構(gòu)中下一個(gè)級別的article元素，如果沒有下一個(gè)級別的article元素，則該日期應(yīng)被理解為文檔的發(fā)布日期。如果使用了pubdate屬性，那么也必須存在一個(gè)datetime屬性。如果未使用datetime屬性，那么在time元素的文本內(nèi)容必須包含一個(gè)有效的日期。案例3-9演示time元素的用法，使用time元素包含人類可讀的日期和時(shí)間描述，使用datetime屬性提供機(jī)器可讀的時(shí)間戳，使用pubdate屬性指示文章的發(fā)布日期。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--3.mark元素mark元素表示頁面中需要突出顯示或高亮顯示的，對于當(dāng)前用戶具有參考作用的一段文字。mark元素除了高亮顯示之外，還有一個(gè)作用就是在引用原文時(shí)，為了某種特殊的目的而把作者沒有表示出來的內(nèi)容重點(diǎn)表示出來。mark元素的默認(rèn)樣式通常是黃色背景，但可以通過CSS自定義其外觀，使其適應(yīng)設(shè)計(jì)的需求。案例3-10演示mark元素的用法，使用strong元素標(biāo)記一段文本的重要性，三個(gè)mark元素標(biāo)記三段文本的相關(guān)性，三個(gè)mark元素都使用的默認(rèn)樣式。

21知識準(zhǔn)備—文本級語義元素1知識準(zhǔn)備--4.cite元素cite元素表示作品（如書籍、文章、詩歌、歌曲、電影、繪畫、雕塑、法律案例等）標(biāo)題的引用。在HTML4中，cite元素有時(shí)也被誤用于表示人名，尤其是作者的名字，但這在HTML5中被明確禁止。當(dāng)cite元素被應(yīng)用時(shí)，其內(nèi)部的文本通常會以斜體顯示。cite元素的斜體顯示可以通過CSS覆蓋，以適應(yīng)不同的設(shè)計(jì)需求。案例3-11演示cite元素的用法，使用四個(gè)cite元素對四大名著進(jìn)行引用。

21知識準(zhǔn)備—全局屬性1知識準(zhǔn)備--全局屬性是所有HTML元素共有的屬性，HTML5新增的全局屬性有contenteditable、contextmenu、data-*、draggable、dropzone、hidden和translate。1.hidden屬性hidden屬性是HTML5引入的一個(gè)全局屬性，可以應(yīng)用于幾乎所有的HTML元素。它是一個(gè)布爾屬性，用于指示元素應(yīng)當(dāng)被隱藏，也就是說，當(dāng)hidden屬性存在于一個(gè)元素上時(shí)，該元素及其包含的所有內(nèi)容都不會被顯示在頁面上。案例3-12演示hidden屬性的用法，與JavaScript結(jié)合使用，以動態(tài)地顯示或隱藏元素。

21知識準(zhǔn)備—全局屬性1知識準(zhǔn)備--2.contenteditable屬性和spellcheck屬性contenteditable屬性是一個(gè)強(qiáng)大的HTML5特性，它允許任何HTML元素變成可編輯的。spellcheck屬性是HTML5引入的一個(gè)全局屬性，用于控制網(wǎng)頁中輸入字段或可編輯區(qū)域的拼寫和語法檢查。案例3-13演示contenteditable屬性和spellcheck屬性的用法，將一個(gè)普通的div元素變成可編輯的，在編輯時(shí)希望能夠?qū)τ脩糨斎氲奈谋具M(jìn)行拼寫檢查，只需給div元素添加contenteditable屬性和spellcheck屬性即可實(shí)現(xiàn)。

21知識準(zhǔn)備—全局屬性1知識準(zhǔn)備--3.data-*data-*屬性是HTML5中引入的一種非常有用的特性，允許開發(fā)者在HTML元素上存儲自定義數(shù)據(jù)。data-*屬性的取值可以是任何字符串，包括數(shù)字、布爾值或更復(fù)雜的JSON格式數(shù)據(jù)，但需要注意的是，這些值在HTML中是作為字符串存儲的。如果存儲的是JSON對象，需要在JavaScript中解析成對象。案例3-14演示data-*屬性的用法，與JavaScript結(jié)合使用，以實(shí)現(xiàn)當(dāng)用戶單擊水果列表項(xiàng)時(shí)彈出對應(yīng)商品的名稱、價(jià)格和庫存量信息。

實(shí)戰(zhàn)演練—制作“文明行為宣傳”網(wǎng)頁2

本次任務(wù)主要是利用HTML5新增的交互性元素、文本級語義元素、全局屬性、JavaScript等知識點(diǎn)完成“文明行為宣傳”網(wǎng)頁的制作，頁面需要展示不同的文明行為準(zhǔn)則，分為公共場所禮儀、公共交通禮儀和課堂禮儀三部分，每部分都有具體的文明行為描述。對于每條文明行為準(zhǔn)則，需要能夠突出顯示關(guān)鍵詞或短語，同時(shí)，這些高亮的部分需要具有互動性，當(dāng)用戶單擊它們時(shí)，應(yīng)該能夠顯示這項(xiàng)文明行為準(zhǔn)則的出處。預(yù)覽效果如圖所示。

實(shí)戰(zhàn)演練—制作“文明行為宣傳”網(wǎng)頁2

“文明行為宣傳”網(wǎng)頁制作思路為用一個(gè)h1元素作為網(wǎng)頁的標(biāo)題；每種文明行為準(zhǔn)則被包裹在details元素中，用戶可以通過單擊summary元素來展開或折疊詳細(xì)內(nèi)容，使用mark元素突出顯示詳細(xì)內(nèi)容中的關(guān)鍵詞，并通過data-source屬性存儲了與這些關(guān)鍵詞相關(guān)的引用信息ID；用dialog元素來創(chuàng)建一個(gè)對話框，這個(gè)對話框包含一個(gè)<p>元素用于顯示引用信息，以及一個(gè)“關(guān)閉”按鈕用于用戶手動關(guān)閉對話框。再通過監(jiān)聽mark元素上的單擊事件，動態(tài)填充、顯示和關(guān)閉dialog元素，從而實(shí)現(xiàn)交互功能?？梢苑殖蓛刹讲絹硗瓿桑菏紫戎谱鳌拔拿餍袨樾麄鳌本W(wǎng)頁的HTML結(jié)構(gòu)代碼；最后實(shí)現(xiàn)交互功能。

實(shí)戰(zhàn)演練—制作“文明行為宣傳”網(wǎng)頁2

1.制作“文明行為宣傳”網(wǎng)頁的HTML結(jié)構(gòu)代碼

實(shí)戰(zhàn)演練—制作“文明行為宣傳”網(wǎng)頁2

2.實(shí)現(xiàn)設(shè)交互功能通過getElementById方法獲取頁面上的對話框及其內(nèi)部的關(guān)閉按鈕；使用querySelectorAll方法獲取所有的mark元素，對于每個(gè)mark元素，使用forEach循環(huán)附加一個(gè)單擊事件監(jiān)聽器，當(dāng)單擊事件發(fā)生時(shí)，調(diào)用showSource函數(shù)并傳入當(dāng)前被單擊的mark元素；編寫showSource函數(shù)，接收一個(gè)參數(shù)element，代表被單擊的mark元素，根據(jù)element的data-source屬性值，通過switch語句確定引用來源的文本內(nèi)容，引用來源的HTML字符串賦值給dialog元素中的p元素，使得引用信息能夠在對話框中正確顯示，設(shè)置對話框的open屬性為'open'，使用open屬性來顯示對話框；給關(guān)閉按鈕附加單擊事件監(jiān)聽器，當(dāng)關(guān)閉按鈕單擊事件發(fā)生時(shí)設(shè)置對話框的open屬性為空字符串，從而關(guān)閉對話框。

進(jìn)階訓(xùn)練—制作“?；丶?/p>