第三单元HTML5新增标签及属性
任务5页面交互标签、层次
语义标签和全局属性
学习目标
页面交互标签
掌握
层次语义标签
学习目标
了解:
全局属性
任务目标
实战演练——制作书评网
任务目标
强化训练——制作“面试应答技巧”网页
知识准备
1.页面交互标签
ndetails标签：details标签用于描述文档或文档某个部分的细节。
nsummary标签：与details标签配合使用，作为details的第一
个子元素，用于定义details标题。标题是可见的，当用户单击标
题时，会显示或隐藏details标签中的其他内容。
知识准备
示例：details标签和summary标签的使用
!DOCTYPEhtml
html
head
metacharset=utf-8/
titlelt;detailsgt;标签和lt;summarygt;标签/title
/head
body
details
summarydetails标签和summary标签/summarydetails标签用于描述文档或文档某
个部分的细节。summary标签作为details的第一个子元素，用于定义details标题。
u标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。/u
/details
/body
/html
知识准备
1.页面交互标签
nprogress标签：用于定义运行中的任务进度（进程）。
nprogress标签的属性：
属性描述属性描述
max规定需要完成的值value规定进程的当前值
知识准备
示例：progress标签的使用
!doctypehtml
html
head
metacharset=utf-8
titlelt;progressgt;标签的使用/title
/head
body
progress标签用法一：表示任务正在进行
br工作进行中：
progress/progress
brprogress标签用法二：表示已完成任务量
br已修满学分：
progressvalue=45max=100/progress
/body
/html
知识准备
1.页面交互标签
nmeter标签：定义度量衡。仅用于已知最大和最小值的度量。比如：
磁盘使用情况，查询结果的相关性等。
nmeter标签的属性：
属性描述属性描述
high定义被界定为高的值的范围low定义被界定为低的值的范围
max定义最大值，默认值是1min定义最小值，默认值是0
title光标移到进度条上的提示文字value定义度量的值
定义什么样的度量值是最佳的值