页面交互元素
1.details元素和summary元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用,作为details元素的第一个子元素,用于为details元素定义标题。标题是可见的,当用户单击标题时,会显示或隐藏details中的其他内容。其基本用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details和summary的使用</title>
</head>
<body>
<details>
<summar>显示列表</summar>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</details>
</body>
</html>
2.progress元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字(如100)之间的数字来表示准确的进度完成情况(如百分比)。
progress元素的常用属性有两个:
- value:已经完成的工作量。
- max:共有多少工作量。
PS:value和max属性的值必须大于0,且value的值要小于或等于max属性的值。
其基本用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>progress的使用</title>
</head>
<body>
<h1>我的工作进度</h1>
<p> <progress value="50" max="100"></progress> </p>
</body>
</html>
3.meter元素
meter元素用于表示指定范围内的数值。例如,显示硬盘容量或者对某个候选者的投票人数占投票总人数的比例等,都可以使用meter元素。
属性 | 说明 |
---|---|
high | 定义度量的值位于哪个带你被界定为高的值 |
low | 定义度量的值位于哪个带你被界定为低的值 |
max | 定义最大值,默认值是1 |
min | 定义最小值,默认值是0 |
optimum | 定义什么样的度量值是最佳的值。如果该值高于high属性,意味着值越高越好。如果该值低于low属性的值,则意味着越低越好。 |
value | 定义度量的值 |
其基本用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meter元素的使用</title>
</head>
<body>
<h1>学生成绩表</h1>
<p>
小红:<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
<br>
小李:<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
<br>
小明:<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter>
</p>
</body>
</html>
全局属性
全局属性是指任何元素中都可以使用的属性,在HTML5中常用的全局属性有:draggable、hidden、spellcheck和contenteditable
1.draggable属性
draggable属性用来定义元素是否可以拖动,该属性有两个值:true和false,当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。
2.hidden属性
在HTML5中,大多数元素都会支持hidden属性,该属性有两个属性值:true和false。当hidden属性取值为true时,元素将会被隐藏,反之则会显示。元素中的内容时用过浏览器创建的,页面装载后允许使用JaveScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也及时显示出来。
3.spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值:true(默认值)和false,值为true时检测输入框中的值,反之不检测。
4.contenteditable属性
contenteditable属性规定是否可以编辑元素的内容,但是前提时该元素必须可以获得鼠标焦点并且其内容不只是读的。在HTML5之前的版本中如果直接在页面上编辑文本需要编写比较复杂的JavaScript代码,但是在HTML5中只要指定该属性的值即可。该属性有两个值,如果为true表示可编辑,为false表示不可编辑。