HTML基础知识（二）：HTML5新特性-CSDN博客

本文详细介绍了HTML5的新增特性，包括语义化的标签如<header>、<nav>等，增强了网页内容结构；新增的<audio>和<video>多媒体标签，使得在网页中直接播放音频和视频变得简单；还讨论了新增的<input>类型，如'email'、'url'等，提高了用户输入的规范性；此外，还提及了新增的表单元素如<datalist>、<progress>等，以及表单属性如'autocomplete'、'required'等，提升了表单交互体验。这些特性在现代浏览器中得到了广泛支持，但要注意IE9及以下的兼容性问题。

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

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

1、新标签-语义标签

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：定义文档某个区域
< aside>：侧边栏标签
< footer>：尾部标签

<details>	定义用户可以看到或者隐藏的额外细节
<summary>	标签包含details元素的标题 
<dialog>	定义对话框 
<figure>	定义自包含内容，如图表
<main>	    定义文档主内容
<mark>	    定义文档的主内容
<time>	    定义日期/时间

2、新增的多媒体标签

新增的多媒体标签主要包含两个：使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

音频：< audio>
视频：< video>
HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前元素支持三种视频格式：尽量使用 mp4格式

 <video src="文件地址" controls="controls">< /video> 
 <video controls="controls"  width="300"> 
      <source src="move.ogg" type="video/ogg" > 
      <source src="move.mp4" type="video/mp4" >       
      您的浏览器暂不支持 <video> 标签播放视频   
</video>

视频 video——常见属性

属性	值	描述
autoplay	autoplay	视频自动播放
controls	controls	向用户显示播放控件
width	px像素	设置播放器宽度
height	px像素	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto、none	auto预先加载视频 none 不预先加视频
src	url	视频url地址
poster	img	url加载等待的画面图片
muted	muted	静音播放

<audio src="文件地址" controls="controls"></audio>
  <audio controls="controls"  > 
      <source src="happy.mp3" type="audio/mpeg" > 
      <source src="happy.ogg" type="audio/ogg" >      
       您的浏览器暂不支持 <audio> 标签。   
    </audio>

视频 audio ——常见属性

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

谷歌浏览器把音频和视频自动播放禁止了
要想视频自动播放需要添加muted来解决

多媒体标签总结
音频标签和视频标签使用方式基本一致，浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了，我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

3、新增的 input 类型

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

重点记住： number tel search 这三个

4、新增的表单元素

html5新增了五个表单元素（form里面的元素）

<datalist>	用户会在他们输入数据时看到预定义选项的下拉列表
<progress>	进度条，展示连接/下载进度
<meter>	    刻度值，用于某些计量，例如温度、重量等
<keygen>	提供一种验证用户的可靠方法、生成一个公钥和私钥
<output>	用于不同类型的输出、比如尖酸或脚本输出

5、新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器会基于之前入过的值，应该显示出在字段中填写的选项默认已经打开，需要放在表单内，同时加上name属性，同时提交成功
multiple	multiple	可以多选文件提交
pattern	自定义正则表达式	描述一个正则表达式验证输入的值
min/max	自定义数字	设置元素最小/最大值
step	自定义数字	为输入域规定合法的数字间隔
height/wdith	自定义数值	用于image类型< input >标签图像高度/宽度

//可以通过以下设置方式修改placeholder里面的字体颜色： 
input::placeholder {             
	color: pink;        
 }

6、其他新增

canvas绘图
svg绘图
地理定位
拖放API
Web Worker
Web Storage
WebSocket