脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → HTML5新增的9种常用标签

HTML5新增的9种不为人知的页面标签

 更新时间：2024年11月02日 13:56:03   作者：牙云敏同学  
HTML5新增了多个常用标签,如figure、figcaption、details、mark等,figure用于独立流内容,figcaption为其标题,details用于文档细节,mark用于标记文本,progress显示进度,meter表示已知范围,menu创建菜单,command定义按钮,nav用于导航

HTML5新增的标签主要可以分为几类，以下是按照类别进行分点表示和归纳的

HTML5新增标签分类

结构性标签

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。

多媒体标签

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。  

表单标签

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。

其他标签

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。

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>

在上述代码中，向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>

从上述代码中可以看出，在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>

在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>

从上述代码中，使用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>

在上述代码中，添加一个项目下载进度条。定义当前完成进度为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>

在上述代码中，以进度条的形式，显示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>

上述代码是选择个人喜欢颜色的实例，先向页面添加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 " rel="external nofollow" >百度</a>
<a href="http://www.sina.com.cn" rel="external nofollow" >新浪</a>
<a href="http://www.google.cn" rel="external nofollow" >谷歌</a> 
</nav>
</body>
</html>

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

总结

这些新增的标签为HTML5提供了更多语义化的元素，使得网页结构更清晰，更易于理解和维护。同时，多媒体和表单相关的新增标签也为网页提供了更多的交互性和多媒体内容的支持。

到此这篇关于HTML5新增的9种不为人知的页面标签的文章就介绍到这了,更多相关HTML5新增的9种常用标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论