HTML5:交互元素
作者:互联网
目录
progress元素
progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性:
- max:表示任务的总量,默认值为1.
- value:表示已完成任务的数量。
应用中,可以有以下三种情况。
用法示例1:
<progress max=100 value=20></progress>
用法示例2:
<progress value=0.5></progress>
用法示例3:
<progress></progress>
示例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:设置最优值。
用法示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<meter></meter>没有属性的meter<br/>
<meter value="0.6"></meter>只有value属性的meter<br/>
<meter value="40" min="10" low="30" high="80" max="100" ></meter>value介于low和high之间,计量条绿色<br/>
<meter value="20" min="10" low="30" high="80" max="100" ></meter>value小于low的meter,计量条黄色<br/>
<meter value="90" min="10" low="30" high="80" max="100" ></meter>value大于high的meter,计量条黄色<br/>
<meter value="40" min="10" low="30" high="80" max="100" optimum="90"></meter>value介于low和high之间,但optimum介于low和high之外,计量条黄色<br/>
<meter value="20" min="10" low="30" high="80" max="100" optimum="60"></meter>value介于low和high之外,但optimum介于low和high之间,计量条黄色<br/>
<meter value="20" min="10" low="30" high="80" max="100" optimum="90"></meter>value和optimum均介于low和high之外,计量条红色<br/>
<meter value="90" min="10" low="30" high="80" max="100" optimum="20"></meter>value和optimum均介于low和high之外,计量条红色<br/>
</body>
</html>
运行的效果如下图所示:
details/summary元素
details元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下 (如Chrome、 Safari )能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分,嵌套在details元素 中。应用时,details元素中标题内容是可见的,当单击标题时将会显示/隐藏details元素中的详细信息。 meter元素的属性主要就是open:
- open:用于控制details元素是否显示,取值为true时,元素内部的子元素被展开显示,当open属性值为false时,其内部的子元素被收缩起来不显示。默认不显示。
用法示例:
<details>
<summary>单击可显示/隐藏详细内容</summary>
<p>这里详细介绍details元素所涉及的知识</p>
</details>
menu元素
menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项 menu元素主要有以下两个属性:
- label:用于设置菜单的可见标签。
- menu:用于设置菜单的类型,取值为context表示上下文菜单,取值为toolbar表示工具条,取值为popup表示弹出式菜单。 用法示例:
<span contextmenu="myMenu">右击一下</span>
<menu type="context" id="myMenu">
<menuitem label="单击一下" onclick="alert('您单击了我一下')" >
</menuitem>
</menu>
command元素
- command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片,并且实现图片按钮效果;另外,改变标记中的“type”属性值,还可以定义按钮类型。 command元素主要有以下属性:
- icon:规定用于代表 command 元素的图像。
- label:设置规定 command 元素的可见标签。
- type:设置command 元素的类型,可以取checkbox(复选)、radio(单选)、command(操作按钮)。默认取 "command"。
- radiogroup:设置radio 类型按钮的组名。
用法示例:
<command onclick="alert('您单击了我一下')">
请单击
</command>
目前主流浏览器还不能支持menu元素和command元素,也就是FireFox浏览器可以支持部分显示。
标签:value,元素,meter,high,command,HTML5,交互,low 来源: https://blog.csdn.net/qq_52726736/article/details/121621622