《HTML5+CSS3网页制作》课件-模块三 HTML5新增元素及属性

模块三HTML5新增元素及属性任务1结构化元素和分组元素网页制作CSSHTML知识准备——结构化元素和分组元素实战演练——制作“唐诗欣赏”网页结构化元素和分组元素0201进阶训练——制作“文房四宝展示”网页03动手实践——制作“学校新闻”网页041.掌握HTML5的结构化元素、分组元素2.了解ARIA结构化元素和分组元素学习目标：1.培养包容性与平等理念，使其创建更加包容和无障碍的数字环境，确保所有人，无论身体条件如何，都能平等访问和使用互联网资源。2.培养社会责任，引导其对公共利益的关注与尊重，使其创建高质量的数字内容，展现出对社会福祉的积极贡献。

3.引导终身学习，使其认识到知识和技能的更新换代是个人职业发展和适应社会变化的关键。结构化元素和分组元素思政目标：

21知识准备—结构化元素1知识准备--在HTML5官方的最新标准中，HTML5的结构化元素有body、article、section、nav、aside、h1–h6、hgroup、header、footer，除body和h1–h6元素外，其余都为在HTML5标准中新增的元素，使用这些结构化元素，开发者可以创建更加语义化和易于理解的网页，对于搜索引擎优化（SEO）、辅助技术和现代Web开发框架都是有益的。此外，这些元素还可以帮助开发者遵循Web内容可访问性指南（WCAG），提高网站的可用性和可访问性。

21知识准备—结构化元素1知识准备--

1.hgroup元素hgroup元素代表一个标题及其相关的内容。这个元素可以用来组合一个从h1到h6的标题元素与一个或多个p段落元素，其中的段落内容可以代表副标题、备选标题或标语。2.header元素header元素用于定义页面或页面内某个区域的头部。它可以包含一系列的辅助性内容，如徽标（logo）、导航菜单、搜索框、作者信息、时间戳等。3.footer元素footer元素用于表示页面或页面内某个区域的底部信息。它通常包含了版权声明、联系方式、法律信息、社交媒体链接、次要导航链接等。4.nav元素nav元素用于定义页面中的导航链接部分。5.aside元素aside元素用于表示与主内容相关的侧边栏信息。6.article元素article元素用于封装文档、页面或应用中的独立内容，这些内容可以独立于页面的其余部分被分发或重用。

21知识准备—结构化元素1知识准备--案例3-1演示article元素的用法，使用两个article元素封装两篇独立的博客文章，每篇文章都有自己的标题、内容、发布日期、作者和标签，整个文档也有自己的头部和底部信息。

21知识准备—结构化元素1知识准备--

7.section元素section元素用于定义文档或页面中的一个独立部分，这部分通常包含与其主题相关的内容。案例3-2演示section元素的用法，使用section元素组织页面的不同部分，如“关于我”、“我的项目”和“联系方式”。每个section元素都有自己的标题和内容，整个文档也有自己的头部和底部信息，文档的头部信息中还用nav元素实现导航链接，整体上形成清晰的结构层次。

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用于表示文档或应用程序的主要内容区域。

3.search元素search元素是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。

案例3-4演示search元素的用法，将search元素作为网站头部中的搜索容器，以执行简单的全站搜索。

21知识准备—分组元素1知识准备--

2.main元素main用于表示文档或应用程序的主要内容区域。

3.search元素search元素是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。

案例3-4演示search元素的用法，将search元素作为网站头部中的搜索容器，以执行简单的全站搜索。

实战演练—制作“唐诗欣赏”网页2本次任务主要是利用HTML5新增的结构化元素、分组元素等知识点完成“唐诗欣赏”网页的制作，页面头部包含网站标题和导航菜单，导航菜单包含四位唐代著名诗人的导航链接；主要内容区包含《望庐山瀑布》展示区和作品赏析区；侧边栏提供李白的其他几首代表作链接；底部用于展示版权和其他法律声明信息。预览效果如图所示。

实战演练—制作“唐诗欣赏”网页2“唐诗欣赏”网页制作思路为头部用header元素作为容器，网站的主标题用h1元素，导航菜单用包含ul元素的nav元素来实现；主要内容区用main元素作为容器，《望庐山瀑布》展示区和作品赏析区用section元素，每个部分都有其标题和内容，标题都用h2元素；《望庐山瀑布》展示区使用pre元素保持诗句的原始格式和换行，用figure和figcaption元素展示诗歌的配图；作品赏析区用p元素提供对诗歌的深度分析和鉴赏；侧边栏用aside元素作为容器，标题用h2元素，导航直接用ul元素实现；底部用footer元素包含p元素实现版权信息和版权声明，确保网站的合法性。

在此基础上，直接制作“唐诗欣赏”网页的HTML结构代码即可实现任务目标。

进阶训练—制作“文房四宝展示”网页3本次任务主要是利用HTML5新增的结构化元素、分组元素、ARIA等知识点完成“文房四宝展示”网页的制作，页面头部包含网站标题和导航菜单，导航菜单包含文房四宝的页面内导航链接；主要内容区包含宣笔、徽墨、宣纸和歙砚等四宝的展示，每个文房四宝都有自己的区块，这些区块包含了标题、描述性段落以及相关的图片和图注；侧边栏提供有关中国书法历史、书法教程和购买指南的链接；底部用于展示版权和其他法律声明信息。预览效果如图所示。

进阶训练—制作“文房四宝展示”网页3ARIAARIA，全称为AccessibleRichInternetApplications（可访问的富互联网应用），是由W3C（万维网联盟）制定的一套属性，旨在增强Web内容和应用程序的可访问性。1.角色角色定义了元素的性质和用途。它们告诉辅助技术，如屏幕阅读器，元素在页面上的功能是什么。ARIA角色共分为6类，分别为文档结构角色、小部件角色、地标角色、实时区域角色、窗口角色和抽象角色。2.状态状态属性反映了一个元素的当前状态或条件，这些状态可能因用户的交互而改变。3.属性属性提供了关于元素的静态信息，这些信息不会因为用户交互而改变。4.使用注意事项开发者在构建Web界面时，优先使用具有适当语义和功能的HTML5元素和属性。只有在原生HTML元素无法满足需求时，才应该考虑使用ARIA角色、状态或属性来增强或定义元素的可访问性。ARIA的目的是为了弥补HTML在某些复杂交互场景下的不足，而不是替代标准的HTML元素。

进阶训练—制作“文房四宝展示”网页3“文房四宝展示”网页制作思路为头部用header元素作为容器，网站的主标题用h1元素，导航菜单用包含ul元素的nav元素来实现，在nav元素中的每个链接都指向了页面内相应的article区块，使用id和href属性实现页面内的跳转；主要内容区用main元素作为容器，每个文房四宝都有自己的article区块，这些区块中标题用h2元素、描述性段落用包含p元素的section元素实现，相关的图片和图注用figure和figcaption元素，每个article元素使用aria-labelledby属性，使屏幕阅读器能够正确地读取article区块的标题；侧边栏用aside元素作为容器，标题用h2元素，导航直接用ul元素实现；底部用footer元素包含p元素实现版权信息和版权声明，确保网站的合法性；给元素增加role属性，用于增强文档的可访问性作为一种额外的保障，确保页面结构对所有用户都是可访问的，特别是在跨不同设备和辅助技术时。

在此基础上，直接制作“文房四宝展示”网页的HTML结构代码即可实现任务目标。

4动手实践—制作“学校新闻”网页4设计并制作如图所示的“学校新闻”网页。页面使用article、section、nav、aside、header、footer、figure、figcaption、main等元素和ARIA制作“学校新闻”网页，页面头部的导航菜单通过锚点链接可以直达“最新消息”、“校园活动”和“公告通知”各部分内容，满足用户快速获取信息的需求。小结知识准备——结构化元素和分组元素实战演练——制作“唐诗欣赏”网页进阶训练——制作“文房四宝展示”网页动手实践——制作“学校新闻”网页模块三HTML5新增元素及属性任务2交互性元素、文本级语义元素和全局属性网页制作CSSHTML知识准备——交互性元素、文本级语义元素和全局属性实战演练——制作“文明行为宣传”网页交互性元素、文本级语义元素和全局属性0201进阶训练——制作“常回家看看”网页03动手实践——制作“面试注意事项”网页041.掌握HTML5的交互性元素、文本级语义元素

2.掌握HTML5的全局属性3.了解HTML5中弃用与语义演变的元素交互性元素、文本级语义元素和全局属性学习目标：1.培养包容性与平等理念，使其创建更加包容和无障碍的数字环境，确保所有人，无论身体条件如何，都能平等访问和使用互联网资源。2.培养社会责任，引导其对公共利益的关注与尊重，使其创建高质量的数字内容，展现出对社会福祉的积极贡献。

3.引导终身学习，使其认识到知识和技能的更新换代是个人职业发展和适应社会变化的关键。交互性元素、文本级语义元素和全局属性思政目标：

21知识准备—交互性元素1知识准备--

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

1.details元素和summary元素

details元素和summary元素是配合使用的，用于在HTML文档中显示可折叠区域。details元素用于描述文档或文档某个部分的细节。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代码很难实现交互功能，案例3-7演示使用JavaScript代码动态地更改dialog元素的open属性值来实现一个对话框的打开和关闭。

21知识准备—文本级语义元素1知识准备--HTML5规范非常重视语义性，力求为每个元素在文本级别上赋予特定的含义。同时，HTML5规范明确了各个元素的使用场景，既规定了其适用的情境，也指出了不适用的情况。规范中引入了一些新元素，一些旧元素则被完全移除（例如font、center和big），还有部分元素的定义有所调整。

21知识准备—文本级语义元素1知识准备--1.ruby、rt和rp元素“ruby”一词指的是一种排版注释系统，意为“基础文本旁的短文本序列”，通常用于东亚文档中以指示发音或提供简短注释。ruby注释在中文和日文中用于显示字符的发音。Ruby注释的标记包含ruby、rt和rp这三个元素。首先，在ruby元素内部指定需要被解释的表达式。接着，跟随其后的rt元素提供解释内容；在支持ruby功能的浏览器中，rt元素的内容会置于所描述表达式的上方展示。而不支持ruby功能的浏览器会连续显示这些组成部分，这可能使得词汇阅读起来更为困难。因为并不明显第二词是对第一词的解释，所以需要对这两个部分进行视觉上的分隔。这时rp元素就派上了用场：它允许添加可选的括号，这些括号仅在浏览器不认识ruby时才会显示。

21知识准备—文本级语义元素1知识准备--案例3-8演示ruby、rt和rp元素的用法，给“汉字”指示发音、“中国中央电视台”提供英文缩写，用rp元素给“中国中央电视台”添加可选的括号，当浏览器不支持ruby元素时，给rt元素的内容加上括号。

21知识准备—文本级语义元素1知识准备--2.time元素time元素表示24小时制的时间或公历中的日期，可选择性地包含时间和时区成分。time元素常用的属性为datetime属性和pubdate属性。（1）datetime属性datetime属性在HTML5中用于标准化日期和时间的表示，使得开发者能够以标准化的方式在网页中嵌入日期和时间信息，便于搜索引擎、辅助技术和其他自动化工具的解析。而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含时区信息（Z代表零时区）以Z结尾2024-07-10T19:09:06Z相对于零时区的偏移量（正号表示东偏，负号表示西偏）+mm:hh/-mm:hh2024-07-10T19:09:06+08:00

21知识准备—文本级语义元素1知识准备--（2）pubdate属性pubdate属性是一个布尔属性，它表明所指定的日期适用于层级结构中下一个级别的article元素，如果没有下一个级别的article元素，则该日期应被理解为文档的发布日期。如果使用了pubdate属性，那么也必须存在一个datetime属性。如果未使用datetime属性，那么在time元素的文本内容必须包含一个有效的日期。案例3-9演示time元素的用法，使用time元素包含人类可读的日期和时间描述，使用datetime属性提供机器可读的时间戳，使用pubdate属性指示文章的发布日期。

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结合使用，以动态地显示或隐藏元素。

21知识准备—全局属性1知识准备--2.contenteditable属性和spellcheck属性contenteditable属性是一个强大的HTML5特性，它允许任何HTML元素变成可编辑的。spellcheck属性是HTML5引入的一个全局属性，用于控制网页中输入字段或可编辑区域的拼写和语法检查。案例3-13演示contenteditable属性和spellcheck属性的用法，将一个普通的div元素变成可编辑的，在编辑时希望能够对用户输入的文本进行拼写检查，只需给div元素添加contenteditable属性和spellcheck属性即可实现。

21知识准备—全局属性1知识准备--3.data-*data-*属性是HTML5中引入的一种非常有用的特性，允许开发者在HTML元素上存储自定义数据。data-*属性的取值可以是任何字符串，包括数字、布尔值或更复杂的JSON格式数据，但需要注意的是，这些值在HTML中是作为字符串存储的。如果存储的是JSON对象，需要在JavaScript中解析成对象。案例3-14演示data-*属性的用法，与JavaScript结合使用，以实现当用户单击水果列表项时弹出对应商品的名称、价格和库存量信息。

实战演练—制作“文明行为宣传”网页2

本次任务主要是利用HTML5新增的交互性元素、文本级语义元素、全局属性、JavaScript等知识点完成“文明行为宣传”网页的制作，页面需要展示不同的文明行为准则，分为公共场所礼仪、公共交通礼仪和课堂礼仪三部分，每部分都有具体的文明行为描述。对于每条文明行为准则，需要能够突出显示关键词或短语，同时，这些高亮的部分需要具有互动性，当用户单击它们时，应该能够显示这项文明行为准则的出处。预览效果如图所示。

实战演练—制作“文明行为宣传”网页2

“文明行为宣传”网页制作思路为用一个h1元素作为网页的标题；每种文明行为准则被包裹在details元素中，用户可以通过单击summary元素来展开或折叠详细内容，使用mark元素突出显示详细内容中的关键词，并通过data-source属性存储了与这些关键词相关的引用信息ID；用dialog元素来创建一个对话框，这个对话框包含一个<p>元素用于显示引用信息，以及一个“关闭”按钮用于用户手动关闭对话框。再通过监听mark元素上的单击事件，动态填充、显示和关闭dialog元素，从而实现交互功能。可以分成两步步来完成：首先制作“文明行为宣传”网页的HTML结构代码；最后实现交互功能。

实战演练—制作“文明行为宣传”网页2

1.制作“文明行为宣传”网页的HTML结构代码

实战演练—制作“文明行为宣传”网页2

2.实现设交互功能通过getElementById方法获取页面上的对话框及其内部的关闭按钮；使用querySelectorAll方法获取所有的mark元素，对于每个mark元素，使用forEach循环附加一个单击事件监听器，当单击事件发生时，调用showSource函数并传入当前被单击的mark元素；编写showSource函数，接收一个参数element，代表被单击的mark元素，根据element的data-source属性值，通过switch语句确定引用来源的文本内容，引用来源的HTML字符串赋值给dialog元素中的p元素，使得引用信息能够在对话框中正确显示，设置对话框的open属性为'open'，使用open属性来显示对话框；给关闭按钮附加单击事件监听器，当关闭按钮单击事件发生时设置对话框的open属性为空字符串，从而关闭对话框。

进阶训练—制作“常回家