news 2026/7/7 19:46:43

[Web自动化] HTML5常见新增标签

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
[Web自动化] HTML5常见新增标签

3.9 HTML5常见新增标签

3.9.1 结构性标签

3.9.1.1 article

表示页面中的独立内容区域,如博客文章、论坛帖子等。
使用方法<article>… 文章内容 …</article>
特有属性:无,但通常包含标题(h1-h6)和可能的一个或多个section元素。

3.9.1.2 header

定义页面或内容区域的头部,如网站logo、标题、搜索框等。
使用方法<header>… 头部内容 …</header>
特有属性:无

3.9.1.3 nav

定义导航链接部分,如主导航、侧边栏导航等。
使用方法<nav>… 导航链接 …</nav>
特有属性:无

3.9.1.4 section

定义文档中的独立部分,如章节、页眉、页脚等。
使用方法<section>… 部分内容 …</section>
特有属性:无

3.9.1.5 footer

定义页面或内容区域的底部,如版权信息、友情链接等。
使用方法<footer>… 页脚内容 …</footer>
特有属性:无

3.9.2 多媒体标签

3.9.2.1 video

用于嵌入视频内容。
使用方法<video src="movie.mp4" controls>您的浏览器不支持video标签。</video>
特有属性
src:视频文件URL。
controls:显示播放、暂停和音量控制。
其他如autoplay、loop、muted等也常用。

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
heightpixels设置视频播放器的高度
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放
mutedmuted规定视频的音频输出应该被静音
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性
srcurl要播放的视频的 URL
widthpixels设置视频播放器的宽度
3.9.2.2 audio

用于嵌入音频内容。
使用方法<audio src="audiofile.mp3" controls>您的浏览器不支持audio标签。</audio>
特有属性与video类似,如src、controls等。

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
ooploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放如果使用"autoplay",则忽略该属性。
srcurl要播放的音频的 URL
3.9.2.3 source

为video和audio元素定义多个媒体资源,供浏览器选择最合适的媒体格式播放。
使用方法:通常与video或audio元素一起使用,作为子元素。
例如:

<videowidth="320"height="240"controls><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg">您的浏览器不支持Video标签。</video>

在这个例子中,<video>元素尝试播放两个视频文件:movie.mp4 和 movie.ogg。浏览器会尝试加载并播放第一个<source>标签指定的文件(在这种情况下是 movie.mp4)。如果该文件无法加载(可能是因为格式不受支持或文件不存在),浏览器会尝试加载并播放第二个<source>标签指定的文件(movie.ogg)。
type 属性用于指定媒体资源的 MIME 类型,这样浏览器就可以提前知道哪个文件最可能被支持,而无需尝试加载每个文件。虽然 type 属性不是必需的,但提供它可以帮助浏览器更快地确定应该加载哪个文件。
如果所有<source>标签指定的文件都无法加载,那么会显示 元素内的文本内容(在这个例子中是您的浏览器不支持Video标签。)。
同样的方法也适用于<audio>元素:

<audiocontrols><sourcesrc="audiofile.mp3"type="audio/mpeg"><sourcesrc="audiofile.ogg"type="audio/ogg">您的浏览器不支持Audio标签。</audio>

在这个例子中,<audio>元素尝试播放两个音频文件:audiofile.mp3 和 audiofile.ogg。浏览器会按照<source>标签的顺序尝试加载并播放这些文件。
特有属性:
src:媒体文件URL。
type:媒体文件类型(MIME类型)。

3.9.3 表单标签

3.9.3.1 datalist

<input type="list">结合使用,定义输入字段的预定义选项列表。
使用方法:与<input>元素配合使用。
特有属性:无,但包含<option>元素定义预定义选项。
示例:

<!doctypehtml><html><head><metacharset="utf-8"/><title></title></head><body><labelfor="myColor">What's your favorite color?</label><inputtype="text"name="myColor"id="myColor"list="mySuggestion"/><datalistid="mySuggestion"><option>black</option><option>blue</option><option>green</option><option>red</option><option>white</option><option>yellow</option></datalist></body></html>

效果:

3.9.3.2 新表单控件类型

如email、date、time、number、url、range、color等,提供更具体的输入类型验证。
使用方法:如<input type="email"><input type="date">等。
特有属性:根据具体的控件类型,可能有如min、max、step等属性。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/7 0:56:20

用ComfyUI工作流快速验证你的创意:原型开发指南

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个ComfyUI快速原型工具包&#xff0c;功能包括&#xff1a;1. 常用原型模板库&#xff08;UI设计、算法验证等&#xff09;&#xff1b;2. 一键克隆和修改功能&#xff1b;3.…

作者头像 李华
网站建设 2026/7/7 7:39:36

设计师必备:10个真实项目中的颜色表应用案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个设计案例展示平台&#xff0c;集成Pantone、RAL等专业色卡库。用户可以上传设计稿&#xff0c;系统自动提取主要色彩生成配色表&#xff0c;并与专业色卡匹配。提供色彩使用…

作者头像 李华
网站建设 2026/7/7 12:51:37

源代码加密方案如何选择?一文读懂两种主流技术

源代码加密方案如何选择&#xff1f;一文读懂两种主流技术 企业在保护核心代码资产时&#xff0c;常面临一个难题&#xff1a;市面上众多的源代码加密方案&#xff0c;究竟哪种更适合自己的开发环境&#xff1f;本文将深入解析两种主流加密技术&#xff0c;帮助企业做出明智选…

作者头像 李华
网站建设 2026/7/7 14:54:15

ShareX截图工具:告别文件路径管理的低效困境

ShareX截图工具&#xff1a;告别文件路径管理的低效困境 【免费下载链接】ShareX ShareX is a free and open source program that lets you capture or record any area of your screen and share it with a single press of a key. It also allows uploading images, text or…

作者头像 李华
网站建设 2026/7/7 6:55:38

《余行论》第四篇:心性篇

第四篇&#xff1a;心性篇——做一节点&#xff0c;清澈流转引言&#xff1a;从知到行的生命转渡前三篇铺陈了“余行论”的宇宙图景与认知框架。我们知晓了宇宙根源于自指&#xff0c;显化为永恒的“行-余”循环&#xff1b;我们理解了认知并非外在的镜子&#xff0c;而是宇宙自…

作者头像 李华
网站建设 2026/7/6 19:20:57

参观深圳比亚迪总部,探索科技,感受中国“智”造魅力

青年代表团赴深圳比亚迪全球总部开展研学活动&#xff0c;深度探索这家全球新能源汽车领军企业的创新实践与战略布局。活动亮点如下&#xff1a;一、企业发展与技术创新历史沿革&#xff1a;从1994年电池制造起步&#xff0c;逐步发展为横跨新能源汽车、储能、电子、轨道交通的…

作者头像 李华