html5新增标签——新增语义化标签、新增表单控件、多媒体

钟意冉冉

已于 2022-03-16 11:08:54 修改

阅读量1.3k

点赞数 1

文章标签： html5 前端 html

于 2022-03-14 21:18:24 首次发布

本文链接：https://blog.youkuaiyun.com/ranran0306/article/details/123487889

版权

本文详细介绍了HTML5的新特性，包括语义化标签如<header>、<nav>、<section>等，新增的表单控件如pattern、autofocus和required属性，以及多媒体控件<audio>和<video>的使用，涵盖了兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html5

HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

2、新增语义化标签

块元素：1、<header></header>
2、<nav></nav>
3、<section></section>
4 、<footer></footer>
5、<main></main>（main在文档中只能出现一次，且不能被其他元素包着，只能包着其他元素）
6 、<aside></aside>
7 、<article></article>
8 、<figure>
<figcaption>独立流内容标题</figcaption>
独立流内容（图表、代码、图片、表格等）
</figure>
9 、<details>
<summary>概要、摘要</summary>
内容
</details>

内联元素：1、<progress value="进度值" min=“”最小值 max=“最大值”>
你的浏览器不支持此标签
</progress>
2、<meter value="" min="" max="" low="" high="" > your browser is not supported
</meter>
3、<time datetime="yyyy-mm-dd"></time>
4、 <mark>标记</mark>

3、新增表单控件

数据列表	<input type="" list="id"> <detalist id="id值"> <option value="值">文本</option> </detalist>
电子邮箱（提交时会自动验证 email 域的值）	<input type="email">
url（提交时会自动验证 url 域的值）	<input type="url"
数字域	<input type="number" step="规定合法的数字间隔" max=“规定允许最大值” min=“规定允许最小值” value=“默认值”>
搜索域	<input type="search">
手机号码	<input type="tel">
日期控件	年月日<input type="date">
	年月<input type="month">
	年周<input type="week"
	时间<input type="time"
	UTC时间<input type="datetime">
	本地时间<input type="date-local">
滑动条	<input type="range" step="规定合法的数字间隔" max=“规定允许最大值” min=“规定允许最小值” value=“默认值”>
颜色选择器	<input type="color">

pattern:模式（可设置输入字符的类型）

autofocus：自动获得焦点（autofocus="autofocus"或autofocus）

required：必填项（required="required"或required）

4、多媒体控件

音乐：<audio src=""></audio>

视频：<video src=""></video>

播放控件	control
静音	muted
自动播放	autoplay
循环播放	loop
设置封面	poster

视频兼容问题

<video>

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

音频兼容问题

<audio controls="controls">

<source src="song.ogg" type="audio/ogg">

<source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>