前端学习（五）HTML5部分新特性

最新推荐文章于 2025-10-23 10:00:00 发布

原创最新推荐文章于 2025-10-23 10:00:00 发布 · 7.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #前端

前端专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨HTML5的新增功能，包括语义化标签、音视频处理、输入表单增强等，解析其对现代网页设计的影响及跨浏览器兼容性问题。

什么是HTML5

定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，是下一代的HTML

概念：

它是一个新版本的HTML语言，定义了新的标签、特性和属性
拥有一个强大的技术集，这些技术集合是指：HTML5 CSS3 javascript，这是广义上的HTML5

拓展内容：

语义化标签：例如header、nav、article等
本地存储
兼容特性
2D、3D
动画、过渡
CSS3特性
性能与集成

现状：

大多数属性已经被浏览器支持，是大势所趋

HTML5的新增标签

语义化标签

头部标签：header
导航栏标签：nav
内容标签：article
块级标签：section
侧边栏标签：aside
尾部标签：footer

音频标签audio

audio目前支持的三种格式

格式	IE9	火狐3.5	opera10.5	谷歌3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio的标签

属性	值	描述
autoplay	autoplay	该音频就绪后，马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	当播放结束时，重新开始播放
src	url	要播放音量的url或者路径

示例：

<audio autoplay="autoplay" loop="loop" controls="controls">
    <source src="media/snow.mp3"/>
    <source src="media/snow.opp"/> 
</audio>

除了src标签，其余标签的值都可以省略，只写属性即可，一般推荐放多个source标签，以支持所有的浏览器

视频标签video

支持的视频格式：

格式	IE	FireFox	Opera	Chrome	Sarifa
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

video标签的属性

属性	值	描述
autoplay	autoplay	视频就绪时自动播放
controls	controls	向用户显示控件
width	pixers 像素	播放器宽度
height	pixers 像素	播放器高度
loop	loop	播放完后重新播放
preload	auto（预先加载） none（不预先加载）	规定是否预先加载视频
src	url	视频地址
poster	img-url	加载等待的画面图片
muted	muted	静音播放

示例：

<video autoplay controls loop muted width="400px" preload="auto" poster="img/dog.jpg">
    <source src="media/mi.mp4"  type="video/mp4"/>
    <source src="media/mi.ogg"  type="video/ogg"/>
</video>

音视频标签总结

音频标签与视频标签的使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器的音视频标签禁止自动播放，除非打开mute静音属性

输入标签input

新增type属性

属性	描述
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

新增属性

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本（占位符）	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomlete	on/off	当用户在字段开始键入时，浏览器基于之前键入过的值，显示历史输入，默认是打开的，需要在表单内加上name属性
multiple	multiple	可以选择多个文件提交

示例：

<form action="get">
    <input type="email" name="124" required="required" autocomplete="off"><br>
    <input type="url" name="124" autofocus="autofocus"><br>
    <input type="date" name="124"><br>
    <input type="time" name="124"><br>
    <input type="month" name="124"><br>
    <input type="week" name="124"><br>
    <input type="number" name="124"><br>
    <input type="tel" name="124"><br>
    <input type="search" name="124" placeholder="nihao"><br>
    <input type="color" name="124"><br>
    <input type="file" name="124" multiple="multiple"><br>
    <input type="submit"><br>
</form>