任务3-运用HTML5的新标签课件

任务3:

运用HTML5的新标签网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组任务3:运用HTML5的新标签网页设计与制作(HTML+目标TARGET知识目标了解HTML5新标签；掌握结构性标签；掌握级块标签；掌握页面交互标签；掌握行内语义性标签;掌握HTML5的全局属性。目标TARGET知识目标了解HTML5新标签；1任务描述

2结构性标签

3分组标签

4页面交互标签

5行内语义性标签

7综合实例8任务实施

9任务拓展

6HTML5的全局属性1任务描述2结构性标签3分组标签4页1任务描述Part使用HTML5新标签优化网页1任务描述Part使用HTML5新标签优化网页

依据草图实现基本的HTML只是实现前端页面的一小步，HTML5中所有的标签都是有结构性的。

本任务就是使用HTML5新标签来优化门户网站主页的页面文档。任务描述：使用HTML5新标签优化网页依据草图实现基本的HTML只是实现前端页面的一小步2HTML5结构性标签Part◎HTML5结构性标签◎section标签◎nav标签◎article标签◎aside标签◎header标签

◎footer标签2HTML5结构性标签Part◎HTML5结构性标签◎sec1认知结构性标签传统DIV+CSS布局HTML5结构标签结构性标签其实就是语义化的html网页框架。结构性标签，标签本质上和div没有任何区别。借助id与class，通过CSS样式来实现页面布局，没有标准的规范，搜索引擎只能去猜测某部分的功能，文档结构和内容不够清晰。1认知结构性标签传统DIV+CSS布局HTML5结构标签结/举例界面/举例界面/举例代码/举例代码举例演示【实例3-1】HTML5结构性标签。举例演示【实例3-1】HTML5结构性标签。举例：2section标签定义和用法<section>标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和标题组成。<section><h1>section是什么？</h1><p>用于对网页的内容进行分区、分块，定义文档中的节</p>

</section>文档中的区段，解释了“section的具体介绍”举例：2section标签定义和用法<section>标签注意<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。注意<section>标签表示一段专题性的内容，一般会带3article标签定义和用法<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。<article>这是一篇介绍HTML5结构标签的文章</article>例如：新闻提供者的一篇新的文章、一篇博客、一个用户评价等。3article标签定义和用法<article>是一个特殊注意举例：<article><header><h1>这是一篇介绍HTML5结构标签的文章</h1><h2>HTML5的历史</h2><p>2017.02.20</p></header><p>文章内容详情</p></article>Article标签会有标题部分，通常包含在header内，有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。注意举例：<article>Article标签会有标题部4nav标签<nav> <ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。举例：<nav><ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。4nav标签<nav>定义和用法nav标签代表页面的一个部5aside标签<nav> <ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。举例：aside标签可以被包含在article标签内作为主要内容的附属信息。<article><h1>文章标题</h1><p>文章内容</p><aside>附属信息部分</aside></article>也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。5aside标签<nav>定义和用法aside标签用来装载6header标签><//a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法header标签定义文档的页眉，通常是一些引导和导航信息。举例：<header>标签不局限于写在网页头部，也可以写在网页内容里面。。<header><h1>网站标题</h1><h2>网站副标题</h2></header>通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识Logo、搜索表单、<nav>导航等。6header标签><//a></li>定义和用法head7footer标签><//a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。举例：作为页面的页脚时，一般包含了版权、相关文件和链接。<footer>Copyright@淮信科技有限公司</footer>footer标签和<header>标签使用基本一样，可以在一个页面中多次使用，也可以在article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。7footer标签><//a></li>定义和用法foot3分组标签Part◎figure标签和figcaption标签◎hgroup标签◎dialog标签3分组标签Part◎figure标签和figcaption分组标签主要完成web页面区域的划分，确保内容的有效分隔。主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。分组标签分组标签主要完成web页面区域的划分，确保内容的有效分隔。分1figure标签和figcaption标签figure标签用于定义独立的流内容，例如图像、图表、照片、代码等，一般指一个单独的单元。figcaption标签用于为figure标签组添加标题，一个figure标签内最多允许使用一个figcaption标签，该标签应该放在figure标签的第一个或者最后一个子标签的位置。1figure标签和figcaption标签figure举例演示【实例3-2】figure标签和figcaption标签的使用。举例演示【实例3-2】figure标签和figcaptio2hgroup标签hgroup标签可以将标题或者子标题进行分组，通常它与h1~h6标签组合使用，一个内容块中的标题可以通过hgroup标签组成一组。2hgroup标签hgroup标签可以将标题举例演示【实例3-3】hgroup标签。举例演示【实例3-3】hgroup标签。3dialog标签dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签，他们常常同时使用。dt表示说话者，dd表示说话者说的内容。兼容性ChromeSafari目前只有Chrome和Safari6支持<dialog>标签。注意3dialog标签dialog标签主要用举例演示<dialog><dt>老师</dt><dd>dialog标签所有的浏览器都支持吗？</dd><dt>学生</dt><dd>目前只有Chrome和Safari6支持</dd><dt>老师</dt><dd>答对了！</dd></dialog>举例演示<dialog>4页面交互标签Part◎details标签和summary标签◎menu标签与command标签4页面交互标签Part◎details标签和summary标交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，主要包括details标签、menu标签、commond标签等。页面交互标签交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关1details标签和summary标签details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用，作为details标签的第一个子标签，用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。1details标签和summary标签details标签举例演示【实例3-4】对details标签和summary标签的用法进行演示。举例演示【实例3-4】对details标签和summary标2menu标签与commond标签<menu>标签定义命令的列表或菜单，<menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

例如menu<menutype="toolbar"><li><menulabel="文件"><buttontype="button"onclick="file_new()">新建</button><buttontype="button"onclick="file_open()">打开</button>

</li></menu>

<li>其他项</li></menu>2menu标签与commond标签<menu>标签定义命2menu标签与command标签command元素表示用户能够调用的命令。<command>标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

例如command<menu><commandonclick="alert('HelloWorld')">测试点击!</command></menu>注意：目前所有主流浏览器都不支持<command>和<menu>标签。2menu标签与command标签command元素表示5行内语义性标签Part◎progress标签◎

meter标签◎

time标签◎

time标签5行内语义性标签Part◎progress标签◎meter1progress标签progress标签表示任务的进度或进程。例如：<progressvalue="60"max="100"></progress>需要注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。progress元素的常用属性值有两个，value表示已经完成的工作量，max表示总共有多少工作量。通常

<progress>标签与Javascript一同使用，来显示任务的进度。1progress标签progress标签表示任务的进度或举例演示【实例3-5】progress标签的用法演示。举例演示【实例3-5】progress标签的用法演示。2meter标签meter标签定义度量衡，为已知范围或分数值内的标量测量。也被称为gauge（尺度）。例如，显示硬盘容量、对某个选项的比例统计等，都可以使用meter元素。meter标签的属性属性说明属性说明high定义度量的值位于哪个点被界定为高的值min定义最小值，默认值是0low定义度量的值位于哪个点被界定为低的值optimum定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着越高越好。如果该值低于low属性的值，则意味着值越低越好。max定义最大值，默认值是1value定义度量的值2meter标签meter标签定义度量衡，为已知范围或分数例如：<metervalue="148"min="0"max="160"low="20"high="110"title="148票"optimum="120"></meter><meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：Firefox,Chrome,Opera以及Safari6支持<meter>标签，而IE浏览器不支持该标签。例如：<meter>标签不应用于指示进度，如果标记进度条，举例演示【实例3-6】meter标签用法演示。举例演示【实例3-6】meter标签用法演示。3time标签time标签表示时间值，主要加强了html的语义化结构。而是让网页的代码有条理，让计算机，例如百度或者谷歌搜索机器人能够理解网页的意思。例如：<timedatetime="2017-3-2">2017年3月2日</time><!--datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间--><timedatetime="2017-3-2T21:00">2017年3月2日21:00</time><!--时间加上“Z”表示给机器编码时使用UTC标准时间--><timedatetime="2017-3-2T21:00Z">2017年3月2日21:00</time>3time标签time标签表示时间值，主要加强了html4video标签和audio标签video标签定义视频。例如：<videosrc="video/movie.mp4"controls="controls"autoplaywidth="400">

您的浏览器不支持video标签。</video>举例演示【实例3-7】video标签用法演示。4video标签和audio标签video标签定义视频。例4video标签和audio标签audio标签定义音频。例如：<audiosrc="music/bgmusic.mp3"autoplaycontrolsloop>

您的浏览器不支持audio标签。</audio>举例演示【实例3-8】audio标签用法演示。4video标签和audio标签audio标签定义音频。例6HTML5的全局属性Part◎contenteditable属性◎

hidden属性◎

spellcheck属性◎

draggable属性6HTML5的全局属性Part◎contenteditabl1contenteditable属性contenteditable属性规定标签的内容是否可编辑。例如：<ulcontenteditable="true"><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li></ul>contenteditable属性是一个布尔值属性，可以被设置为true和false，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。同时，该属性还有个隐藏的inherit（继承）状体。当未指定true或false时，则有inherit状态来决定，如果父元素为可编辑的，则该元素也为可编辑的。1contenteditable属性contentedit举例演示【实例3-9】contenteditable属性的用法演示。<meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。编辑完成后的内容，如果需要调用或者保存，只能通过把该元素的innerHTML发送至服务器端进行处理。举例演示【实例3-9】contenteditable属性的用2hidden属性hidden属性规定对元素进行隐藏。例如：<ulcontenteditable="true"><li><ahref="#">首页</a></li><li><ahref="#hidden="hidden">学校新闻</a></li><li><ahref="#">院系设置</a></li></ul>如果使用该属性，则会隐藏元素。可以对hidden属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。2hidden属性hidden属性规定对元素进行隐藏。例3spellcheck属性spellcheck属性规定是否对元素内容进行拼写检查。主要针对于input文本框、textarea多行文本输入框、可编辑元素中的值进行拼写和语法检查。该属性有两个值:true（默认值）和false，值为true时检测输入框中的值，反之不检测。举例演示【实例3-10】spellcheck属性的用法演示。3spellcheck属性spellcheck属性规定是否4draggable属性draggable属性用来定义元素是否可以拖动。例如：

<imgsrc="img/hs.jpg"draggable="true">该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。4draggable属性draggable属性用来定义元素<meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：对于图片即使不设置draggable属性，也是可以被拖动的，因为链接和图像默认是可拖动的。如果想实现元素的拖动功能，需要配合JavaScript脚本才能实现。举例演示【实例3-11】draggable属性的用法演示。<meter>标签不应用于指示进度，如果标记进度条，请使用7综合实例Part◎个人博客页面结构设计7综合实例Part◎个人博客页面结构设计个人博客页面结构设计【演示】综合分析该页面的网页结构，并使用HTML5实现该页面结构部分。个人博客页面结构设计【演示】综合分析该页面的网页结构，并使用HTML5结构设计示意图HTML5结构设计示意图8任务实施Part◎使用HTML5新标签优化网页8任务实施Part◎使用HTML5新标签优化网页【演示】本任务就是使用HTML5新标签来优化门户网站主页的页面文档。【演示】本任务就是使用HTML5新标签来优化门户网站主页的页9任务拓展Part◎div标签和span标签◎div、section和article的区别和使用9任务拓展Part◎div标签和span标签◎div、secdiv标签和span标签div标签<div>标签可定义文档中的分区或节（division/section）。<div>是块级元素，用来把文档分割为独立的、不同的部分。如果用id或class来标记<div>，那么该标签的作用会变得更加有效。span标签<span>标签在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。<span>属于一个行内元素，而<div>是块级元素，可通俗地理解为<div>为大容器，大容器当然可以放一个小容器了，<span>就是小容器。div标签和span标签div标签<div>标签可定义文div、section和article的区别和使用div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。作为语义化标签，section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section就是适用的。对于article标签来说，无论从结构上还是内容上来说，article本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。divsectionarticle，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。原则上来说，能使用article的时候，也是可以使用section的，但实际上，假如使用article更合适，就不要使用section。div、section和article的区别和使用div在h10项目实训Part◎网站页面的分析与编写10项目实训Part◎网站页面的分析与编写【实训目的】1.通过网页页面分析，掌握HTML5结构性标签的语义。2.能通过网页页面与“查看源代码”功能，模仿编写HTML页面【实训内容】实训任务1：通过浏览清华大学主页，分析其HTML5的结构性编码。网站页面的分析与编写【实训目的】网站页面的分析与编写实训任务2：使用HTML实现“设计师列表”的页面效果。网站页面的分析与编写实训任务2：使用HTML实现“设计师列表”的页面效果。网站页谢谢多一点努力,多一点实践,多一点点就能创造奇迹!谢谢多一点努力,多一点实践,多一点点就能创造奇迹!任务3:

运用HTML5的新标签网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组任务3:运用HTML5的新标签网页设计与制作(HTML+目标TARGET知识目标了解HTML5新标签；掌握结构性标签；掌握级块标签；掌握页面交互标签；掌握行内语义性标签;掌握HTML5的全局属性。目标TARGET知识目标了解HTML5新标签；1任务描述

2结构性标签

3分组标签

4页面交互标签

5行内语义性标签

7综合实例8任务实施

9任务拓展

6HTML5的全局属性1任务描述2结构性标签3分组标签4页1任务描述Part使用HTML5新标签优化网页1任务描述Part使用HTML5新标签优化网页

依据草图实现基本的HTML只是实现前端页面的一小步，HTML5中所有的标签都是有结构性的。

本任务就是使用HTML5新标签来优化门户网站主页的页面文档。任务描述：使用HTML5新标签优化网页依据草图实现基本的HTML只是实现前端页面的一小步2HTML5结构性标签Part◎HTML5结构性标签◎section标签◎nav标签◎article标签◎aside标签◎header标签

◎footer标签2HTML5结构性标签Part◎HTML5结构性标签◎sec1认知结构性标签传统DIV+CSS布局HTML5结构标签结构性标签其实就是语义化的html网页框架。结构性标签，标签本质上和div没有任何区别。借助id与class，通过CSS样式来实现页面布局，没有标准的规范，搜索引擎只能去猜测某部分的功能，文档结构和内容不够清晰。1认知结构性标签传统DIV+CSS布局HTML5结构标签结/举例界面/举例界面/举例代码/举例代码举例演示【实例3-1】HTML5结构性标签。举例演示【实例3-1】HTML5结构性标签。举例：2section标签定义和用法<section>标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和标题组成。<section><h1>section是什么？</h1><p>用于对网页的内容进行分区、分块，定义文档中的节</p>

</section>文档中的区段，解释了“section的具体介绍”举例：2section标签定义和用法<section>标签注意<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。注意<section>标签表示一段专题性的内容，一般会带3article标签定义和用法<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。<article>这是一篇介绍HTML5结构标签的文章</article>例如：新闻提供者的一篇新的文章、一篇博客、一个用户评价等。3article标签定义和用法<article>是一个特殊注意举例：<article><header><h1>这是一篇介绍HTML5结构标签的文章</h1><h2>HTML5的历史</h2><p>2017.02.20</p></header><p>文章内容详情</p></article>Article标签会有标题部分，通常包含在header内，有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。注意举例：<article>Article标签会有标题部4nav标签<nav> <ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。举例：<nav><ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。4nav标签<nav>定义和用法nav标签代表页面的一个部5aside标签<nav> <ul><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。举例：aside标签可以被包含在article标签内作为主要内容的附属信息。<article><h1>文章标题</h1><p>文章内容</p><aside>附属信息部分</aside></article>也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。5aside标签<nav>定义和用法aside标签用来装载6header标签><//a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法header标签定义文档的页眉，通常是一些引导和导航信息。举例：<header>标签不局限于写在网页头部，也可以写在网页内容里面。。<header><h1>网站标题</h1><h2>网站副标题</h2></header>通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识Logo、搜索表单、<nav>导航等。6header标签><//a></li>定义和用法head7footer标签><//a></li><li><ahref="#">院系设置</a></li><li><ahref="#">师资队伍</a></li></ul></nav>定义和用法footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。举例：作为页面的页脚时，一般包含了版权、相关文件和链接。<footer>Copyright@淮信科技有限公司</footer>footer标签和<header>标签使用基本一样，可以在一个页面中多次使用，也可以在article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。7footer标签><//a></li>定义和用法foot3分组标签Part◎figure标签和figcaption标签◎hgroup标签◎dialog标签3分组标签Part◎figure标签和figcaption分组标签主要完成web页面区域的划分，确保内容的有效分隔。主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。分组标签分组标签主要完成web页面区域的划分，确保内容的有效分隔。分1figure标签和figcaption标签figure标签用于定义独立的流内容，例如图像、图表、照片、代码等，一般指一个单独的单元。figcaption标签用于为figure标签组添加标题，一个figure标签内最多允许使用一个figcaption标签，该标签应该放在figure标签的第一个或者最后一个子标签的位置。1figure标签和figcaption标签figure举例演示【实例3-2】figure标签和figcaption标签的使用。举例演示【实例3-2】figure标签和figcaptio2hgroup标签hgroup标签可以将标题或者子标题进行分组，通常它与h1~h6标签组合使用，一个内容块中的标题可以通过hgroup标签组成一组。2hgroup标签hgroup标签可以将标题举例演示【实例3-3】hgroup标签。举例演示【实例3-3】hgroup标签。3dialog标签dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签，他们常常同时使用。dt表示说话者，dd表示说话者说的内容。兼容性ChromeSafari目前只有Chrome和Safari6支持<dialog>标签。注意3dialog标签dialog标签主要用举例演示<dialog><dt>老师</dt><dd>dialog标签所有的浏览器都支持吗？</dd><dt>学生</dt><dd>目前只有Chrome和Safari6支持</dd><dt>老师</dt><dd>答对了！</dd></dialog>举例演示<dialog>4页面交互标签Part◎details标签和summary标签◎menu标签与command标签4页面交互标签Part◎details标签和summary标交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，主要包括details标签、menu标签、commond标签等。页面交互标签交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关1details标签和summary标签details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用，作为details标签的第一个子标签，用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。1details标签和summary标签details标签举例演示【实例3-4】对details标签和summary标签的用法进行演示。举例演示【实例3-4】对details标签和summary标2menu标签与commond标签<menu>标签定义命令的列表或菜单，<menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

例如menu<menutype="toolbar"><li><menulabel="文件"><buttontype="button"onclick="file_new()">新建</button><buttontype="button"onclick="file_open()">打开</button>

</li></menu>

<li>其他项</li></menu>2menu标签与commond标签<menu>标签定义命2menu标签与command标签command元素表示用户能够调用的命令。<command>标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

例如command<menu><commandonclick="alert('HelloWorld')">测试点击!</command></menu>注意：目前所有主流浏览器都不支持<command>和<menu>标签。2menu标签与command标签command元素表示5行内语义性标签Part◎progress标签◎

meter标签◎

time标签◎

time标签5行内语义性标签Part◎progress标签◎meter1progress标签progress标签表示任务的进度或进程。例如：<progressvalue="60"max="100"></progress>需要注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。progress元素的常用属性值有两个，value表示已经完成的工作量，max表示总共有多少工作量。通常

<progress>标签与Javascript一同使用，来显示任务的进度。1progress标签progress标签表示任务的进度或举例演示【实例3-5】progress标签的用法演示。举例演示【实例3-5】progress标签的用法演示。2meter标签meter标签定义度量衡，为已知范围或分数值内的标量测量。也被称为gauge（尺度）。例如，显示硬盘容量、对某个选项的比例统计等，都可以使用meter元素。meter标签的属性属性说明属性说明high定义度量的值位于哪个点被界定为高的值min定义最小值，默认值是0low定义度量的值位于哪个点被界定为低的值optimum定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着越高越好。如果该值低于low属性的值，则意味着值越低越好。max定义最大值，默认值是1value定义度量的值2meter标签meter标签定义度量衡，为已知范围或分数例如：<metervalue="148"min="0"max="160"low="20"high="110"title="148票"optimum="120"></meter><meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：Firefox,Chrome,Opera以及Safari6支持<meter>标签，而IE浏览器不支持该标签。例如：<meter>标签不应用于指示进度，如果标记进度条，举例演示【实例3-6】meter标签用法演示。举例演示【实例3-6】meter标签用法演示。3time标签time标签表示时间值，主要加强了html的语义化结构。而是让网页的代码有条理，让计算机，例如百度或者谷歌搜索机器人能够理解网页的意思。例如：<timedatetime="2017-3-2">2017年3月2日</time><!--datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间--><timedatetime="2017-3-2T21:00">2017年3月2日21:00</time><!--时间加上“Z”表示给机器编码时使用UTC标准时间--><timedatetime="2017-3-2T21:00Z">2017年3月2日21:00</time>3time标签time标签表示时间值，主要加强了html4video标签和audio标签video标签定义视频。例如：<videosrc="video/movie.mp4"controls="controls"autoplaywidth="400">

您的浏览器不支持video标签。</video>举例演示【实例3-7】video标签用法演示。4video标签和audio标签video标签定义视频。例4video标签和audio标签audio标签定义音频。例如：<audiosrc="music/bgmusic.mp3"autoplaycontrolsloop>

您的浏览器不支持audio标签。</audio>举例演示【实例3-8】audio标签用法演示。4video标签和audio标签audio标签定义音频。例6HTML5的全局属性Part◎contenteditable属性◎

hidden属性◎

spellcheck属性◎

draggable属性6HTML5的全局属性Part◎contenteditabl1contenteditable属性contenteditable属性规定标签的内容是否可编辑。例如：<ulcontenteditable="true"><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li></ul>contenteditable属性是一个布尔值属性，可以被设置为true和false，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。同时，该属性还有个隐藏的inherit（继承）状体。当未指定true或false时，则有inherit状态来决定，如果父元素为可编辑的，则该元素也为可编辑的。1contenteditable属性contentedit举例演示【实例3-9】contenteditable属性的用法演示。<meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。编辑完成后的内容，如果需要调用或者保存，只能通过把该元素的innerHTML发送至服务器端进行处理。举例演示【实例3-9】contenteditable属性的用2hidden属性hidden属性规定对元素进行隐藏。例如：<ulcontenteditable="true"><li><ahref="#">首页</a></li><li><ahref="#hidden="hidden">学校新闻</a></li><li><ahref="#">院系设置</a></li></ul>如果使用该属性，则会隐藏元素。可以对hidden属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。2hidden属性hidden属性规定对元素进行隐藏。例3spel