交互元素

第1关：交互元素相关概念
任务描述
本关任务：完成一组文档结构元素相关的概念题。
相关知识
为了完成本关任务，你需要掌握以下知识：1.progress元素，2.meter元素，3.details/summary元素，4.menu元素，5.command元素。
progress元素
progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性：
max:表示任务的总量，默认值为1.
value:表示已完成任务的数量。
应用中，可以有以下三种情况。
用法示例1：

用法示例2：

用法示例3：

示例2中，没有设置max属性，则默认为1；示例3中max和value的属性都没有设置，则进度条处于左右自由滑动状态。
当进度条需要动态改变时，需要通过JavaScript来实现。
meter元素
meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。
meter元素具有如下属性：
form：规定meter元素所属的一个或多个表单，其取值为表单标签form所定义的id名。
value：设置或获取meter元素的当前值，其数值必须介于min和max值之间。
max:设置meter元素的最大值，默认为1.
min:设置meter元素的最小值，默认为0.
high:设置过高的阈值，当value值大于high并小于max时，显示过高的颜色。
low：设置过低的阈值，当value值小于low并大于min时，显示过低的颜色。
optimum:设置最优值。
用法示例：

  


没有属性的meter

只有value属性的meter

value介于low和high之间，计量条绿色

value小于low的meter，计量条黄色

value大于high的meter，计量条黄色

value介于low和high之间，但optimum介于low和high之外，计量条黄色

value介于low和high之外，但optimum介于low和high之间，计量条黄色

value和optimum均介于low和high之外，计量条红色

value和optimum均介于low和high之外，计量条红色

details/summary元素
details元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari ）能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分，嵌套在details元素
中。应用时，details元素中标题内容是可见的，当单击标题时将会显示/隐藏details元素中的详细信息。
meter元素的属性主要就是open:
open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。 用法示例：

  
单击可显示/隐藏详细内容
  
这里详细介绍details元素所涉及的知识

用法示例：
menu元素
menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项
menu元素主要有以下两个属性:
label:用于设置菜单的可见标签。
menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。 用法示例：

右击一下

command元素
command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：
icon:规定用于代表 command 元素的图像。
label：设置规定 command 元素的可见标签。
type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 “command”。
radiogroup：设置radio 类型按钮的组名。
用法示例：

  请单击 

目前主流浏览器还不能支持menu元素和command元素，也就是FireFox浏览器可以支持部分显示。
开始你的任务吧，祝你成功！
参考答案：


第2关：progress元素
任务描述
本关任务：运用HTML5新增的交互元素设计一个带有进度条显示的HTML程序。
相关知识
为了完成本关任务，你需要掌握：progress元素及属性。
进度条的设置
HTML5中的交互元素progress可在网页中显示一个进度条，该元素有两个属性，属性max表示任务总量，属性value表示当前的任务量。
编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的交互元素设计一个进度条()。
2.progress标签之间说明文字为“进度显示”。
3.任务总量设置为100，当前的任务量为30。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

 
  
  
 
 
 	下载进度：
   
进度显示

   
  

第3关：meter元素
任务描述
本关任务：运用HTML5新增的交互元素设计含两个度量条显示的HTML程序。效果如下图所示：

相关知识
为了完成本关任务，你需要掌握：meter元素及其属性。
meter元素及属性
HTML5中的交互元素meter可在网页中显示度量条，该元素的属性主要有：
value：当前值
max:最大值
min:最小值
high:：高阈值
low：低阈值
optimum:最优值
编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的交互元素设计两个度量条()。
2.第一个度量条的当前值为60，最大值为100，最小值为0
3.第二个度量条的当前值为30，最大值为100，最小值为0，高阈值为90，低阈值为50
4.第一个度量条和第二个度量条要分两行显示。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

 
  
  
 
 
 	显示度量值：

   



   

第4关：details/summary元素
任务描述
本关任务：运用HTML5新增的交互元素设计一个具有折叠和展开内容的页面效果。内容展开效果如下图所示：

相关知识
为了完成本关任务，你需要掌握：1.details元素，2.summary元素。
details/summary元素的设置
HTML5中的交互元素details可在网页中描述文档或文档某个部分的细节，summary元素可设置details折叠时看到的标题内容。
编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的交互元素设计一个具有折叠和展开内容的页面效果。（

）
2.details元素折叠时，显示的标题内容为“第三章”(

)
3.details元素展开时，详细内容由三个段落组成，第一个段落内容为“3.1结构元素”；第二个段落内容为“3.2页面结点”；第三个段落内容为“3.3交互元素”。(

)
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

 
  
  
 
 
   

    
第三章
    
3.1结构元素
    
3.2页面结点
    
3.3交互元素