3-2HTML5分组元素、页面交互元素、文本语义元素.docVIP

课程名称 WEB前端开发（1） 课次 9 任务、项目、课题名称 HTML5分组元素、HTML5页面交互元素、HTML5语义元素 课时 2学时 教学内容 掌握HTML5分组元素、HTML5页面交互元素、HTML5语义元素 教学目标 理解HTML5分组元素、HTML5页面交互元素、HTML5语义元素的使用 教学重点 HTML5分组元素、HTML5页面交互元素、HTML5语义元素 教学难点 HTML5分组元素、HTML5页面交互元素、HTML5语义元素的应用 教学活动及主要环节 导入新课： 分组元素用于对页面元素进行分组。我们熟悉的div、 p 、ol、ul都是分组元素标记， 本节来看3个新加的分组元素，分别是figure元素、figcaption元素和hgroup元素。 新授： （操作课本案例，在操作的过程中，更好理解分组元素的意义） figure元素和figcaption元素 figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。 它可以用来表示图片、图表、音频、视频，代码等。figcaption元素用于为figure元素组 添加标题。 hgroup元素 hgroup元素用于对网页或区段（section）的标题进行组合。它常与h1~h6元素组合使用。 通常，将hgroup元素放在header元素中。 details和summary元素 details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合 使用，作为details 元素的第一个子元素，用于为details定义标题。 progress元素 progress元素定义运行中的任务进度（进程）。如Windows系统中软件的安装、文件的复制 等场景的进度。progress元素的常用属性值有两个，具体如下。 （1）value：已经完成的工作量。 （2）max：总共有多少工作量。 meter元素 meter元素用于表示指定范围内的数值。如磁盘使用情况、查询结果、或投票比例等，都 可以使用meter元素。 属性 说明 high 定义度量的值位于哪个点被界定为高的值 low 定义度量的值位于哪个点被界定为低的值 max 定义最大值，默认值是 1 min 定义最小值，默认值是 0 定义什么样的度量值是最佳的值。如果该值 optimum 高于 high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好 value 定义度量的值 time元素 time元素用来定义公历的时间（24 小时制）或日期。time元素不会在任何浏览器中呈现 任何特殊效果。但能够以机器可读的方式对日期和时间进行编码。 mark元素 mark元素的主要功能是高亮显示文本或字符，以引起用户注意。其用法与strong类似， 但是mark元素更随意灵活。 cite元素 cite元素用来表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。被 引用的文本将以斜体显示，以和其他见容区分。 小结： figure元素和figcaption元素 hgroup元素 details和summary元素 progress元素 meter元素