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

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

3.引導終身學習，使其認識到知識和技能的更新?lián)Q代是個人職業(yè)發(fā)展和適應社會變化的關鍵。結構化元素和分組元素思政目標：

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

21知識準備—結構化元素1知識準備--

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

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

21知識準備—結構化元素1知識準備--

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

21知識準備—分組元素1知識準備--

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

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

21知識準備—分組元素1知識準備--

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

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

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

21知識準備—分組元素1知識準備--

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

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

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

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

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

在此基礎上，直接制作“唐詩欣賞”網頁的HTML結構代碼即可實現(xiàn)任務目標。

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

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

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

在此基礎上，直接制作“文房四寶展示”網頁的HTML結構代碼即可實現(xiàn)任務目標。

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

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

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

21知識準備—交互性元素1知識準備--

在HTML5官方的最新標準中，HTML5的交互式元素有details元素、summary元素、dialog元素等。

1.details元素和summary元素

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

21知識準備—交互性元素1知識準備--

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

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

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

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

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

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

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

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

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

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

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

21知識準備—全局屬性1知識準備--2.contenteditable屬性和spellcheck屬性contenteditable屬性是一個強大的HTML5特性，它允許任何HTML元素變成可編輯的。spellcheck屬性是HTML5引入的一個全局屬性，用于控制網頁中輸入字段或可編輯區(qū)域的拼寫和語法檢查。案例3-13演示contenteditable屬性和spellcheck屬性的用法，將一個普通的div元素變成可編輯的，在編輯時希望能夠對用戶輸入的文本進行拼寫檢查，只需給div元素添加contenteditable屬性和spellcheck屬性即可實現(xiàn)。

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

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

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

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

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

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

1.制作“文明行為宣傳”網頁的HTML結構代碼

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

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

進階訓練—制作“?；丶?/p>