a标签打开新标签页(a标签 打开新窗口)

a标签打开新标签页(a标签 打开新窗口)HTML5 新增的标签主要可以分为几类 以下是按照类别进行分点表示和归纳的 header 定义文档或节的头部 nav 定义导航链接 section 定义文档中的独立节 article 定义文档 页面 应用或网站中独立的内容区域 aside 定义页面的侧边栏内容 footer 定义文档或节的页脚 main 定义文档的主体内容 video video main footer aside article section nav header



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)。

figure标签是HTML5中新增的标签之一,表示一段独立的流内容(文本、图像)。
在使用figure标签时,标签的内容应该与主内容相关;但如果被删除时,则不应对文档流产生影响。

示例:

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

figcaption标签位于figure标签内,用于定义figure标签的标题(caption)。在默认情况下,figcaption标签应该被置于figure标签的第一个或最后一个子标签的位置。

示例:

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

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

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

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

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

示例:

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

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

示例:

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

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

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

示例:

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

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

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

示例:

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

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

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

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

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

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

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

编程小号
上一篇 2025-08-28 15:33
下一篇 2025-10-11 13:27

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/5041.html