HTML5-其他标签
# 状态标签
meter:用来显示已知范围的标量值或者分数值。
value:当前的数值。
min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0
max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1
low:定义了低值区间的上限值,如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
high:定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
optimum:这个属性用来指示最优/最佳取值。
progress:用来显示一项任务的完成进度
max:该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
value：该属性用来指定该进度条已完成的工作量.
如果没有value属性,则该进度条的进度为"不确定",
也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
使用示例：
<meter value="60" min="20" max="100"></meter>
<meter value="80" min="20" max="100" low="40" high="60"></meter>
<meter value="30" min="20" max="100" low="40" high="60" optimum="80"></meter>
1
2
3
2
3
<progress value="50" max="100"></progress>
<progress max="100"></progress>
1
2
2
# 列表标签
datalist:datalist会包含一组option元素，这些元素表示其表单控件的可选值
它的id必须要和input中的list一致
details: 一个ui小部件，用户可以从其中检索附加信息。
open属性来控制附加信息的显示与隐藏
summary:用作 一个<details>元素的一个内容摘要（标题）
1
2
3
4
5
6
7
2
3
4
5
6
7
使用示例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input::-webkit-input-placeholder{
color: pink;
}
</style>
<input type="text" placeholder="你喜欢谁？" list="test"></input>
<datalist id="test">
<option value="1">11111111</option>
<option value="2">22222222</option>
<option value="3">33333333</option>
<option value="4">44444444</option>
</datalist>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<details>
<summary>小胖胖</summary>
<p>好人啊</p>
<p>好人啊</p>
<p>好人啊</p>
<p>好人啊</p>
<p>好人啊</p>
<p>好人啊</p>
</details>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 注释标签
ruby
rt: 展示文字注音或字符注释。
1
2
2
使用示例：
<span><ruby>龍<rt>long</rt>哈哈哈哈哈哈</ruby></span>
1
# 标记标签
marK:着重
1
使用示例：
<span>你可真是一个<mark>大好人</mark>啊啊啊啊啊啊啊</span>
1
# 新增表单控件
1.type:email :email地址类型
当格式不符合email格式时，提交是不会成功的，会出现提示；只有当格式相符时，提交才会通过
在移动端获焦的时候会切换到英文键盘
2.type:tel :电话类型
在移动端获焦的时候会切换到数字键盘
3.type:url :url类型
当格式不符合url格式时，提交是不会成功的，会出现提示；只有当格式相符时，提交才会通过
4.type:search :搜索类型
有清空文本的按钮
5.type:range : 特定范围内的数值选择器
属性:min、max、step
6.
type:number : 只能包含数字的输入框
type:color : 颜色选择器
type:datetime : 显示完整日期(移动端浏览器支持)
type:datetime-local : 显示完整日期，不含时区
type:time : 显示时间，不含时区
type:date : 显示日期
type:week : 显示周
type:month : 显示月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 新增表单属性
placeholder : 输入框提示信息
适用于 form,以及 type 为 text,search,url,tel,email,password 类型的 input
autofocus : 指定表单获取输入焦点
required : 此项必填，不能为空
pattern : 正则验证 pattern="\d{1,5}
formaction 在submit里定义提交地址
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 表单验证反馈
validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都通过返回 true，只要有一种验证失败就返回 false
node.addEventListener("invalid",fn1,false);
valueMissing : 输入值为空时返回true
typeMismatch : 控件值与预期类型不匹配返回true
patternMismatch : 输入值不满足pattern正则返回true
tooLong : 超过maxLength最大限制返回true
rangeUnderflow : 验证的range最小值返回true
rangeOverflow : 验证的range最大值返回true
stepMismatch : 验证range 的当前值 是否符合min、max及step的规则返回true
customError 不符合自定义验证返回true
setCustomValidity
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 关闭验证
formnovalidate ：元素的 formnovalidate 属性, 表示在表单提交时不对其进行验证. 这会重写父表单的 novalidate 属性，布尔值属性。
1
完善页面 (opens new window)
上次更新: 2024-11-28 17:23:47