news 2026/7/4 21:21:12

[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/4 7:24:36

告别手动编写:AI一键生成完整docsify项目

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 请比较传统手动创建docsify项目需要&#xff1a;1.初始化项目 2.配置webpack 3.编写markdown 4.设置主题 5.添加插件等步骤。然后展示如何使用本平台一键生成包含所有这些要素的完整…

作者头像 李华
网站建设 2026/7/4 7:41:18

告别手动调色:AI颜色表工具效率对比测试

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 构建一个颜色表效率测试工具&#xff0c;可记录用户手动配色全过程耗时。同时提供AI自动配色功能进行对比。系统需精确计时并生成可视化报告&#xff0c;展示时间节省比例和色彩质量…

作者头像 李华
网站建设 2026/7/4 11:51:49

零基础教程:3分钟实现el-input只能输入数字

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 请创建一个最简单的el-input数字输入示例&#xff0c;适合Vue初学者学习。要求&#xff1a;1. 分步骤注释说明 2. 只保留核心功能 3. 包含基础的正则校验 4. 提供在线可运行的代码片…

作者头像 李华
网站建设 2026/7/4 3:47:18

Linux新手必学:tail -f命令详解

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个面向初学者的tail -f教学应用&#xff0c;包含&#xff1a;1. 命令基本语法解释 2. 常用参数说明&#xff08;-n, -F等&#xff09;3. 简单示例演示 4. 交互式练习环境 5. …

作者头像 李华
网站建设 2026/7/3 22:31:32

如何用AI解决Windows错误代码0x00000771

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个Windows系统错误诊断工具&#xff0c;专门针对0x00000771错误代码。工具需要能够&#xff1a;1. 自动扫描系统日志和注册表&#xff1b;2. 分析错误产生的原因&#xff1b;…

作者头像 李华
网站建设 2026/6/26 20:45:00

PojavLauncher iOS:突破性移动Minecraft Java版实战指南

PojavLauncher iOS&#xff1a;突破性移动Minecraft Java版实战指南 【免费下载链接】PojavLauncher_iOS A Minecraft: Java Edition Launcher for Android and iOS based on Boardwalk. This repository contains source code for iOS/iPadOS platform. 项目地址: https://g…

作者头像 李华