H5 新增标签

新增元素

wbr

描述

Word Break Opportunity (<wbr>),用于告诉浏览器在页面缩放时在什么地方添加换行符。

兼容性

除 IE 外,其他浏览器都兼容。

其他

template

描述

顾名思义,声明的是模板元素,用户存储可能需要插入到页面中的内容片段。

页面加载时,解析器会处理 template 元素中的内容,但不会渲染元素的内容。

根据 Template 接口可知,它有一个只读的 content 属性,通过这个属性可以读取模板内容,也可以通过这个属性判断l浏览器是否支持 <template> 元素。

1
2
3
interface HTMLTemplateElement : HTMLElement {
readonly attribute DocumentFragment content;
};

扩展

除了 template 元素外,还有一种常用的方式实现标签内容隐藏。
两者相对比,template 元素可以直接克隆节点插入到页面中,而 script 方式只是以字符串的方式处理内部的 HTML 标签。

1
2
3
4
5
6
7
8
9
10
11
<div id="container"></div>

<script id="script-template" type="text/template">
<img src="http://blog-1255677601.cossh.myqcloud.com/blog/2018-03-13-u-1459597530-2091940659%26fm-27%26gp-0.jpg" alt="">
</script>

const imgTemplate = document.getElementById('script-template'),
container = document.getElementById('container');


container.innerHTML = imgTemplate.innerHTML;

兼容性

除 IE 外,其他浏览器都兼容;另外 Edge 不支持 对 template 元素进行克隆操作以及模板相互嵌套。

其他

section

描述

section 表示文档的一个区域或章节,按主题将内容分组,通常会包含一个标题(<h1> - <h6>)。
一般来说,希望元素内容明确地出现在提纲中时,用 section 就合适。

1
2
3
4
<section>
<h3>曙光女神</h3>
<p>无论刮风还是下雨 太阳照常升起</p>
</section>

兼容性

除 IE9 以下外,其他浏览器都支持

nav 表示包含多个超链接的区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav>
<ul>
<li>
<a href="/home">首页</a>
</li>
<li>
<a href="/about">关于我</a>
</li>
<li>
<a href="/contact">联系我</a>
</li>
</ul>
</nav>

兼容性

除 IE9 以下外,其他浏览器都支持

article

article 代表文档、页面或应用程序中独立的、完整的、可以独自被外界引用的内容。

扩展

section 元素的区别:

  • section:主要作用是对网站或应用程序中页面上的内容进行分块,通过它的嵌套来表示的章节等目录结构和它们的从属关系
  • article:主要作用是表示完整、独立性、可重用,即标签内容脱离当前页面也有存在价值和意义,它可以有自己 headerfooter

两种标签可以相互嵌套使用,但如果只是作为样式钩子,建议使用 <div>

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
26
<article>
<header>
<h1>苹果</h1>
</header>

<p>苹果是一种很好的水果。</p>

<section>
<h2>评论</h2>

<article>
<header>
<h3>发表者:张三</h3>
</header>
<p>苹果好吃</p>
</article>

<article>
<header>
<h3>发表者:李四</h3>
</header>
<p>苹果对身体好</p>
</article>

</section>
</article>

兼容性

除 IE9 以下外,其他浏览器都支持

aside

描述

aside 标签用于表示与页面内容关系不太密切的内容 (eg. 广告) ,可以独立出来且不影响整体,通常表现为侧边栏或者嵌入内容(更侧重于工具性的东西)。

兼容性

除 IE9 以下外,其他浏览器都支持

描述

header 标签用于表示一组介绍性描述或导航信息 (目录、搜索框、logo 等),通常包含 <h1><h6><hgroup>,元素内容不影响文档提纲的生成。

兼容性

除 IE9 以下外,其他浏览器都支持

描述

footer 标签用于表示最近的父级区块内容的页脚,通常包含作者信息、相关文档、版权信息,元素内容不影响文档提纲的生成。

兼容性

除 IE9 以下外,其他浏览器都支持

adress

描述

adress 标签用于表示与最近父级 article 或整个文档关联的联系人信息,不能包含除了联系信息之外的任何信息。

1
2
3
4
5
6
7
8
9
10
<address>
You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>

兼容性

除 IE9 以下外,其他浏览器都支持

main

描述

main 标签用于呈现页面或应用的主体部分。根据规范,允许页面中同时存在多个 main 元素,但只能允许一个显示。

兼容性

除 IE9 以下外,其他浏览器都支持

figure

figure 标签代表的是一段独立的引用内容,如插图、代码等,通常会搭配一个标题(figcaption)。

1
2
3
4
<figure>
<figcaption>曙光女神</figcaption>
<img src="http://blog-1255677601.cossh.myqcloud.com/blog/2018-03-13-u-1459597530-2091940659%26fm-27%26gp-0.jpg" alt="">
</figure>

兼容性

除 IE9 以下外,其他浏览器都支持

figcaption

figcaption 标签通常配合 figure 一起使用,作为引用内容标题。

兼容性

除 IE9 以下外,其他浏览器都支持

data

data 标签在呈现页面内容的同时,通过 value 属性指定相应的机器可读内容。
其中,value 属性最好不要省略,且内容不能为 datetime

1
2
3
interface HTMLDataElement : HTMLElement {
[CEReactions] attribute DOMString value;
};
1
2
3
4
5
6
7
8
9
10
11
12
<h3>英雄列表</h3>
<ul>
<li>
<data value="Leona">曙光女神</data>
</li>
<li>
<data value="Nami">唤潮鲛姬</data>
</li>
<li>
<data value="Soraka">众星之子</data>
</li>
</ul>

兼容性

目前仅有 Chrome62+、Firefox、Edge 支持。

time

time 标签用于表示日期或时间,并通过 datetime 属性指定相应的机器可读日期。
datetime 属性必须为一个有效的日期类型,如:yyyy-MMyyyy-MM-dd

1
2
3
interface HTMLTimeElement : HTMLElement {
[CEReactions] attribute DOMString dateTime;
};
1
<time datatime="2018-03-15 14:39:16">03-15</time>

兼容性

目前仅有 Chrome62+、Firefox、Edge 支持。

mark

mark 标签用于需要标注或高亮的文本,突出显示的文本通常可能和用户当前活动具有某种关联性,比如搜索的结果。
不要混淆 <mark> 元素和 <strong> 元素,前者侧重于表示上下文的关联性,而后者强调的是文本在上下文的重要型。

1
<p>流光容易把人抛,红了<mark>樱桃</mark>,绿了芭蕉</p>

兼容性

除 IE9 以下外,其他浏览器都支持

ruby

ruby 标签用于展示d东亚文字注音或字符注释。
rt 标签用于对 <ruby> 内容做注解,如拼音。
rp 标签用于对不支持 <ruby> 的浏览器提供圆括号,位于 <rt> 的前面和后面。

1
2
3
4
5
6
<ruby>
<span>青青子衿,悠悠我心</span>
<rp>(</rp>
<rt>qīng qīng zǐ jīn yōu yōu wǒ xīn</rt>
<rp>)</rp>
</ruby>

兼容性

该标签支持情况比较好,IE 系列均支持。

datalist

datalist 标签定义选项列表,包含一组 option 元素,定义其它控件的可选值。通常与 input 元素配合使用,用来定义input 可能的值。

inputlist 属性与相应的 datalistid 需保持一致

option 标签添加 disabled 属性后,在 datalistselect 中表现不一样;在 datalist 中表现为不显示,而在 select 中则是无法选中

option 标签支持 label 属性,但在不同浏览器中表现各异。Chrome 中 label 值在右侧显示,其他浏览器(Firefox、IE9、IE10)则不显示 value 值,只显示 label

如果 label 属性值与 value 属性值相同,则不显示 label 属性值

支持 datalist 标签的浏览器会忽略其下除option 之外的标签
使用 datalist 时,有些浏览器在 input 右侧会出现下拉箭头,可以通过 CSS 隐藏

1
2
3
interface HTMLDataListElement : HTMLElement {
[SameObject] readonly attribute HTMLCollection options;
};
1
2
3
4
5
6
7
8
<input type="text" list="heros">
<datalist id="heros">
<select name="hero" id="">
<option value="曙光女神" label="Leona">曙光女神</option>
<option value="唤潮鲛姬" label="Nami">唤潮鲛姬</option>
<option value="众星之子" label="Soraka">众星之子</option>
</select>
</datalist>
1
2
3
4
5
// 隐藏下拉箭头
input::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}

兼容性

除 Safari 不兼容外,兼容 IE10+,但不同浏览器在一些细节之处的实现有些出入。

output

output 标签用于显示计算或用户操作结果。

for 属性表示影响输出的元素 ID ,允许多个。

type 属性默认为 ‘output’

1
2
3
4
5
6
7
8
9
interface HTMLOutputElement : HTMLElement {
[SameObject, PutForwards = value] readonly attribute DOMTokenList htmlFor;
readonly attribute HTMLFormElement ? form;
[CEReactions] attribute DOMString name;

readonly attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
[CEReactions] attribute DOMString value;
};

兼容性

除 IE 外,其它浏览器都兼容。

progress

progress 标签以进度条形式显示任务完成进度。

可以通过 position 属性获取当前进度信息

progress 标签只要设置了 borderbackground-color 属性,进度条会变成扁平化风格

Chrome 和 Safari 中 progressprogress-valueprogress-bar 构成,progress-value 表示已完成的进度,progress-bar 表示全部进度;在 Firefox 中 progress-bar 表示已完成进度, background-color 表示全部进度;在 IE 中通过 color 表示已完成进度,全部进度还是通过 background-color 表示

Demo

1
2
3
4
5
interface HTMLProgressElement : HTMLElement {
[CEReactions] attribute double value;
[CEReactions] attribute double max;
readonly attribute double position;
};
1
2
3
<progress value="10" max="100"></progress>

document.querySelectorAll('progress')[0].position; // 0.1
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
26
27
28
29
30
31
32
33
34
35
36
37
38
progress {
width: 160px;
color: #0064B4;
border-radius: 5px;
/* IE10 */
border: 1px solid currentColor;
}

/* 全部进度 */

progress,
progress::-webkit-progress-bar {
background-color: #e6e6e6;
}

/* 已完成进度 */

progress::-moz-progress-bar {
background: currentColor;
}

progress::-webkit-progress-value {
background: currentColor;
}

/* 圆角化 */
progress::-webkit-progress-inner-element {
border-radius: 5px;
}

progress::-webkit-progress-value {
border-radius: 5px;
box-shadow: 0 0 0 1px currentColor;
}

progress::-webkit-progress-bar {
border-radius: 5px;
}

兼容性

兼容 IE10+ 浏览器

meter

meter 标签用于表示某种计量,一般用于温度、 重量、金额等量化的场景

Demo

1
2
3
4
5
6
7
8
9
interface HTMLMeterElement : HTMLElement {
[CEReactions] attribute double value;
[CEReactions] attribute double min;
[CEReactions] attribute double max;
[CEReactions] attribute double low;
[CEReactions] attribute double high;
[CEReactions] attribute double optimum;
readonly attribute NodeList labels;
};

  • value:当前数值,介于最小值和最大值之间,默认值为 0

    如果未指定或格式错误,则值设为 0

    如果指定的值不在最小值和最大值之间,则值设为最接近的一端的值

  • min:最小值,如果未指定,则默认为 0

  • max:最大值,如果未指定,则默认为 1
  • low:低值区间的上限值,默认与 min 值一致

    min ≤ low ≤ high ≤ max

    如果指定的值不在最小值和最大值之间,则值设为最接近的一端的值

  • high:高值区间的下限值,默认与 max 值一致

    min ≤ low ≤ high ≤ max

    如果 high < low,则设为与 low 值一致

    如果 high > max,则设为与 max 值一致

  • optimum:最优/佳值,默认为 (max - min) / 2

    minimum ≤ optimum ≤ maximum

    如果指定的值不在最小值和最大值之间,则值设为最接近的一端的值

颜色规则

meter 控件一共有三种颜色(绿色,黄色,红色),具体展示什么颜色是由 minlowhighmaxvalueoptimum 控制。前四种属性会将整个控件划分为 3 个区间 [min, low][low, high][hight, max]

  • valueoptimum 在同一区间,则显示为绿色

  • 若二者不在同一区间,则以 optimum 所在区间为中心,向左右两侧延伸,延伸的区间颜色依次为黄色、红色

Demo

修改显示颜色

Safrai9+ 和 Firefox 支持通过伪元素来修改 meter 控件颜色,Chrome65 不支持修改, 具体细节可以参考The HTML5 meter Element

Demo

1
2
3
4
5
6
<meter max="128" value="60" title="GB">
<!-- 兼容 Chrome65 -->
<div class="meter-gauge">
<span style="width: 50%;">剩余容量:60G</span>
</div>
</meter>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
meter {
position: relative;
display: block;
margin: 0 auto;

width: 550px;
height: 25px;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

border: 1px solid #ccc;
border-radius: 3px;

background: none;
background-color: whiteSmoke;

&::-webkit-meter-bar {
background: none;
background-color: whiteSmoke;
}

/* Safari */
&::-webkit-meter-optimum-value {
background-image: linear-gradient(
90deg,
#8bcf69 5%,
#e6d450 5%,
#e6d450 15%,
#f28f68 15%,
#f28f68 55%,
#cf82bf 55%,
#cf82bf 95%,
#719fd1 95%,
#719fd1 100%
);

background-size: 100% 100%;
}

/* Firofox */
&::-moz-meter-bar {
background-image: linear-gradient(
90deg,
#8bcf69 5%,
#e6d450 5%,
#e6d450 15%,
#f28f68 15%,
#f28f68 55%,
#cf82bf 55%,
#cf82bf 95%,
#719fd1 95%,
#719fd1 100%
);

background-size: 100% 100%;
}
}

/* Chrom65 */
.meter-gauge {
margin-top: -1px;
margin-left: -1px;

border: 1px solid #ccc;
border-radius: 5px;

background-color: whiteSmoke;

width: 550px;
height: 25px;

display: block;

& > span {
height: inherit;

background-color: blue;
background-image: linear-gradient(
90deg,
#8bcf69 5%,
#e6d450 5%,
#e6d450 15%,
#f28f68 15%,
#f28f68 55%,
#cf82bf 55%,
#cf82bf 95%,
#719fd1 95%,
#719fd1 100%
);

background-size: 100% 100%;

display: block;
text-indent: -9999px;

&:first-child {
border-radius: 3px 0 0 3px;
}
}
}

兼容性

主流浏览器都支持,IE 系列兼容 Edge13+。

details

details 用于描述元素内容的详细信息。
open 属性表示是否展示具体细节内容,默认为 false 。

Demo

1
2
3
interface HTMLDetailsElement : HTMLElement {
[CEReactions] attribute boolean open;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<details>
<summary>
下载中:
<progress min="0" max="100" value="99.9"></progress>
</summary>
<ul>
<li>
文件名:
<span>战狼2.mp4</span>
</li>
<li>
下载速度:
<span>2m/s</span>
</li>
<li>
耗时:
<span>10s</span>
</li>
</ul>
</details>

兼容性

除 IE 系列浏览器外,其他主流浏览器均支持。

summary

summary 标签用作 details 元素的摘要或标题。

summary 元素需要有父节点,如果没有父节点,则不显示

通常情况下 summary 元素应该是 details 元素的第一个子节点

兼容性

除 IE 系列浏览器外,其他主流浏览器均支持。