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

模块三HTML5新增元素及属性任务1结构化元素和分组元素网页制作CSSHTML

知识准备——结构化元素和分组元素实战演练——制作“唐诗欣赏”网页结构化元素和分组元素0201进阶训练——制作“文房四宝展示”网页03动手实践——制作“学校新闻”网页04

1.掌握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元素，用于提供图片和代码片