4.2 HTML5新增元素及通用属性-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元4 HTML5新特性 4.1 HTML5概述 PART 01 HTML5新增结构语义元素 主要内容 CONTENTS PART 04 HTML5新增通用属性 PART 03 HTML5新增多媒体元素 PART 02 HTML5新增其它语义元素 2 HTML5新增结构语义元素 标签名 描述 <header> 定义文档的头部区域 <nav> 定义导航链接的部分 <section> 定义文档中的节(section、区段) <article> 定义页面独立的内容区域 <aside> 定义页面的侧边栏内容 <figure> 规定独立的流内容（图像、图表、照片、代码等） <figcaption> 定义<figure>元素的标题 【案例4.2.1】HTML5页面语义结构 HTML5新增结构语义元素 article 元素： <article>代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。 section元素： 一个<section>通常由内容和标题组成，通常不推荐那些没有标题的内容用<section>，<section>的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的<article>混淆。 【案例4.2.2】article-section元素的使用方法 HTML5新增结构语义元素 <aside>标签定义< article>以外的内容。 <aside>的内容应该与<article>的内容相关。 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。 在<article>元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。 【案例4.2.3】aside元素的使用 HTML5新增结构语义元素 　figure和figcaption元素 　< figure>元素来定义一块独立的内容，并且，< figure>元素的内容应该与主内容相关，而且独立于上下文。 　在< figure>元素中，通过<figcaption>元素来定义内容的标题（caption）。<figcaption>元素并不是必需的，但如果包含它，它就必须是<figure>元素的第一个子元素或最后一个子元素。 【案例4.2.4】figure和figcaption元素的使用 　hgroup元素 　<hgroup>标签是使用来对网页或区段的标题进行组合。 【案例4.2.5】hgroup元素的使用 HTML5新增其它语义元素 【案例4.2.6】time和mark元素的使用 用于显示被标注的内容是日期或者是时间，有两个属性： 1、datatime属性：<time datetime="YYYY-MM-DDThh:mm:ssTZD">属性值和描述。 2、pubdate:属性：指示<time>元素中的日期\时间是文档（或<article>元素）的发布日期。 使用<mark>标签元素，可以高亮显示文档中的文字以达到醒目的效果，该元素用法与<strong>、<em>元素类似，区别是<strong>、<em>元素的作用是强调文本，并非仅仅是高亮显示文本。 time元素 mark元素 HTML5新增其它语义元素 【案例4.2.7】meter和progress元素的使用 <progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度，也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 meter元素 progress元素 3.meter元素<meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示：表4-4 meter元素常用属性值 4.progress元素：<progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止），也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。 HTML5新增其它语义元素 【案例4.2.8】summary元素的使用 details 和summary元素 3.meter元素<meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示：表4-4 mete