这里写自定义目录标题
- 1、新标签-语义标签
- 2、新增的多媒体标签
- 3、新增的 input 类型
- 4、新增的表单元素
- 5、新增的表单属性
- 6、其他新增
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
