分组标签主要完成web页面区域的划分，确保内容的有效分隔。 主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。
1 figure 标签和figcaption标签
figure标签用于定义独立的流内容，例如图像、图表、照片、
代码等，一般指一个单独的单元。 figcaption标签用于为figure标签组添加标题，一个figure 标签内最多允许使用一个figcaption标签，该标签应该放在 figure标签的第一个或者最后一个子标签的位置。
例如
<menu type="toolbar"> <li> <menu label="文件"> <button type="button" onclick="file_new()">新建</button> <button type="button" onclick="file_open()">打开</button> </li> </menu> <li>其他项</li> </men标题。
标题是可见的，当用户单击标题时，会显示或隐藏details中的
其他内容。
举例 演示
【实例3-4】对details标签和summary标签的用法进行演示。
2 menu标签与commond标签
menu
<menu> 标签定义命令的列表或菜单，<menu> 标签用于上下文菜单、工具栏以及 用于列出表单控件和命令。
结构性标签其实就是语义化的html网页框架。 结构性标签，标签本质上和div没有任何区别。
/
举例 界面
/
举例 代码
举例 演示
【实例3-1】HTML5结构性标签。
2 section标签
定义和用法 <section>标签用于对网页的内容进行分区、分块，定义文档中的节。 比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和 标题组成。 举例： <section> <h1>section是什么？</h1> <p>用于对网页的内容进行分区、分块，定义文档中的节</p> </section> 文档中的区段，解释了 “section的具体介绍”
4 nav标签
定义和用法 nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。
<nav>
举例：
<nav> <ul> <ul> <li><a href="#">首页</a></li> <li><a href="#"> 首页</a></li> <li><a href="#"> 学校新闻 </a></li> <li><a href="#"> 学校新闻 </a></li> <li><a href="#"> 院系设置 </a></li> <li><a href="#"> 院系设置 </a></li> <li><a href="#"> 师资队伍 </a></li> </ul><li><a href="#">师资队伍</a></li> </nav></ul> </nav> nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。
2 menu标签与command标签
command command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比 如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才 是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
例如
<menu> <command onclick="alert('Hello World')">测试点击!</command> </menu>
注意：
目前所有主流浏览器都不支持 <command >和<menu> 标签。
Part
5
行内语义性标签
◎progress标签 ◎ meter标签 ◎ time标签 ◎ time标签
1 progress标签
progress标签表示任务的进度或进程。 progress元素的常用属性值有两个，value表示已经完成的工作量， max表示总共有多少工作量。
2 meter标签
meter标签定义度量衡，为已知范围或分数值内的标量测量。 也被称为 gauge（尺度）。例如，显示硬盘容量、对某个选项的比例统计等，都可以 使用meter元素。
meter标签的属性
属性 说明 属性 说明
high
low max
定义度量的值位于哪个点被界定为高的值
min
定义最小值，默认值是0
Part
4
页面交互标签
◎details标签和summary标签 ◎menu标签与command标签
页面交互标签 交互性标签主要用于功能性的内容表达，会有一定的内容和数据的
关联，是各种事件的基础，主要包括details标签、menu标签、 commond标签等。
1 details标签和summary标签 details标签用于描述文档或文档某个部分的细节。summary 标签经常与details标签配合使用，作为details标签的第一个
网页设计与制作(HTML+CSS+Javascript)
任务3 : 运用HTML5的新标签
网页设计与制作课程组
目标 TARGET
知识目标
了解HTML5新标签；
掌握结构性标签；
掌握级块标签； 掌握页面交互标签； 掌握行内语义性标签; 掌握HTML5的全局属性。
1 任务描述 2 结构性标签 3 分组标签 4 页面交互标签
需要注意的是value和max属性的值必须大于0，且value的值要小于或 等于max属性的值。
例如：<progress value="60" max="100"></progress> 通常 <progress> 标签与 Javascript 一同使用，来显示任务的进度。
举例 演示
【实例3-5】progress标签的用法演示。
注 意 Article标签会有标题部分，通常包含在header内，有时也会包含footer。
article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博 客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。 举例： <article> <header> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的历史</h2> <p>2017.02.20</p> </header> <p>文章内容详情</p> </article>
7 footer标签
定义和用法 footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的 信息，比如说文章的作者或者日期。 举例：
><//a></li> <footer>Copyright@ 淮信科技有限公司 <li><a href="#">院系设置 </a></li> </footer> <li><a href="#">师资队伍</a></li> </ul> </nav> 作为页面的页脚时，一般包含了版权、相关文件和链接。
</ul> aside标签可以被包含在article标签内作为主要内容的附属信息。 </nav>
也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、 友情链接、侧边栏、导航条等等。
6 header标签
定义和用法 header标签定义文档的页眉，通常是一些引导和导航信息。
定义什么样的度量值是最佳的值。如果该值
定义度量的值位于哪个点被界定为低的值 optimum 高于 high 属性，则意味着越高越好。如果该 值低于low属性的值，则意味着值越低越好。 定义最大值，默认值是1 value 定义度量的值
例如：
<meter value="148" min="0" max="160" low="20" high="110" title="148票" optimum="120"> </meter>