h5新增的标签

来源：互联网发布：宁化老鼠干知乎编辑：程序博客网时间：2024/06/05 19:19

在HTML5中，新增了9种常用的页面标签，详细介绍如下：
1．figure标签
figure标签是HTML5中新增的标签之一，表示一段独立的流内容（文本、图像）。
在使用figure标签时，标签的内容应该与主内容相关；但如果被删除时，则不应对文档流产生影响。
示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>figure标签使用</title></head><body><p>桂林，位于广西东北部，是世界著名的旅游胜地和历史文化名城。地处漓江西岸，以盛产桂花、桂树成林而得名。</p><figure>  <p>桂林山水甲天下</p>  <img src="gl1.jpg" width="300" height="155" /> </figure></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13

在上述代码中，向figure标签中添加一段文字描述和图片，形成一个独立流单元。相当于一个div.

2．figcaption标签
figcaption标签位于figure标签内，用于定义figure标签的标题（caption）。在默认情况下，figcaption标签应该被置于figure标签的第一个或最后一个子标签的位置。
示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>figcaption标签应用</title></head><body><p>少林寺，位于中国河南省郑州市登封的嵩山，是少林武术的发源地。</p><figure>  <figcaption>少林寺</figcaption>  <img src="sl.jpg" width="388" height="296" /> </figure></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13

从上述代码中可以看出，在figure标签中，使用figcaption标签为figure标签添加了一个“少林寺”标题。

3．details标签
在HTML5中，details标签主要用于描述文档或某个部分的细节。
它常与“summary”标签配合使用，可以为details标签定义标题。
在浏览器中运行时，该标题是可见的，当用户单击标题时，会显示出details标签中的内容。
在目前，只有在浏览器Chrome中才识别details标签。
下面通过一个在Chrome浏览器中运行的实例，来说明details标签的应用。
示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>details标签应用</title></head><body><details>  <summary>红旗渠</summary>  <p>红旗渠是20世纪60年代，林县人民在极其艰难的条件下，从太行山腰修建的引漳入林工程。是全国重点文物保护单位，被世人称之为“人工天河”，在国际上被誉为“世界第八大奇迹”。</p></details></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13

在Chrome浏览器中，可以看出details标签中的内容，默认是没有显示的，只显示summary标签中的标题。

单击details标签中的标题“红旗渠”，details标签中的内容会自动显示。

4．mark标签
mark标签在HTML 5中，主要用于定义带有记号的文本。如果用户在编辑文本时，需要突出显示某文本，可以使用mark标签。
示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>mark标签</title></head><body><p>今天，天气不错，  <mark>心情</mark>  挺好的！</p></body></html>1
2
3
4
5
6
7
8
9
10
11
12

从上述代码中，使用mark标签设置“心情”文本为突出显示，默认背景颜色为黄色。

5．progress标签
在HTML5中，progress标签的作用是定义运行中的进度（进程）。
例如，可以使用progress标签来显示JavaScript中，耗费时间函数的进度。
progress标签的常用属性介绍如下：
- max 数值定义完成的值。
- value 数值定义进程的当前值。

示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>progress标签应用</title></head><body>项目的下载进度是：<progress value="20" max="100"> </progress></body></html>1
2
3
4
5
6
7
8
9
10
11

在上述代码中，添加一个项目下载进度条。定义当前完成进度为20，下载完成值为100

6．meter标签
在HTML中，meter标签主要用来表示范围已知，且可度量的等级标量或分数值，例如磁盘使用量比例、关键词匹配程度等。
需要注意的是，meter标签不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。

meter标签属性介绍如下：
- value 表示当前的实际值；如果不做指定，那么标签中的第一个数字就会被认为是其当前实际值。
- Min 当前的最小值；如不做指定则为0。
- Max 当前的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。
- Low 当前的低值区；必须小于或等于max值；如果低值区数字小于最小值，那么它会被认为是最小值。
- High 当前的高值区。 Optimum 最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>meter标签应用</title></head><body><p>11月份个人工作完成进度：</p><p>付强：  <meter value="10" optimum="100"         high="90" low="10" max="100" min="0"> </meter>  <span> 10% </span>  </p><p>张红：  <meter value="60" optimum="100"         high="90" low="10" max="100" min="0"> </meter>  <span> 60% </span></p><p>王林：  <meter value="89" optimum="100"         high="90" low="10" max="100" min="0"> </meter>  <span> 89% </span></p></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在上述代码中，以进度条的形式，显示3个人的工作进度。完成进度最高是100%，最低是0%。

7．menu标签
menu标签是HTML 5中重新启用的一个旧标记，在HTML 2时就已经存在。
在HTML 4时曾一度被废弃，而在HTML 5中重新恢复使用，并赋予了新的功能含义。
常与li列表标签结合使用，用来定义一个列表式的菜单。

其常用属性及描述如下：
- autosubmit 如果为true，那么当表单控件改变时会自动提交。
- label 为菜单定义一个可见的标注。
- type 定义显示那种类型的菜单，默认值是 list。

示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>标签menu的使用</title><style type="text/css">body {    font-size:12px;}menu {    padding:0;    margin:0;    display:block;    border: solid 1px #365167;    width:100px 　}menu li {    list-style-type:none;    margin:2px;    height:25px;    width:80px}menu li:hover {    border: solid 1px #7DA2CE;    background-color:#CFE3FD}</style></head><body><p>选择你喜欢的颜色：</p><menu><li><input type="checkbox" />红色</li><li><input type="checkbox" />黄色</li><li><input type="checkbox" />绿色</li><li><input type="checkbox" />蓝色</li></menu></body></html>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

上述代码是选择个人喜欢颜色的实例，先向页面添加menu标签，然后，在该标签中加入li列表标签。
最后添加css样式，实现某用户将鼠标移至某个li标签时，展示菜单中某选项被选中的效果。

8．command标签
Command标签是HTML 5中新增加重要标签，用于定义各种类型的按钮（包括命令按钮、单选择按钮、图片按钮）及复选框等。
利用该标记的url属性可以添加图片，并且实现图片按钮效果；

command标签的常用属性如下：
- checked 定义是否被选中。仅用于radio或checkbox类型。
- disabled 定义command是否可用。
- icon 定义作为command来显示的图像的url。
- label command定义可见的 label。
- radiogroup groupname定义command所属的组名。仅在类型为radio时使用。
- type 定义该command的类型。默认是“command”。

Command标签如果与menu标签结合使用，可以实现弹出式的下拉菜单，当单击菜单中的某个选项时，将执行相应的操作。

9．NAV标签
nav标签是页面的一个导航标签。
可以将具有导航性质的链接归纳在一块区域中，使页面的标签更有语义性。
示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>nav标签应用</title></head><body><nav draggable="true"> <a href="http://www.baiduc.om ">百度</a><a href="http://www.sina.com.cn">新浪</a><a href="http://www.google.cn">谷歌</a> </nav></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

上述代码中，将三个链接放入nav标签中，形成一块区域。

阅读全文

0 0