HTML5 新增标签
HTML5 新增标签
1.1 新增页面布局标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| header | 页头 | 双标签 | |
| footer | 页脚 | 双标签 | |
| nav | 导航条 | 双标签 | |
| section | 页面中一部分或者文章一小节 | 双标签 | |
| aside | 侧边栏 | 双标签 | |
| article | 文章、新闻、博客、评论等 | 双标签 | |
| main | 页面主要内容区域 | 双标签 |
注意： IE 浏览器不支持 main 标签！
1.2 新增状态标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| meter | 表示静态地度量 | max、min、value、low、high 等 | 双标签 |
| progress | 表示动态地进度 | max、value | 双标签 |
meter 和 progress 什么区别：
1. meter 表示静态地度量，如温度、湿度、磁盘容量、电池电量等
2. progess 表示动态地进度，如进度条
1.3 新增注音标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| ruby | 注音包裹元素 | 双标签 | |
| rt | 写具体的注音 | 双标签 |
<ruby>
饕餮
<rt>taotie</rt>
</ruby>
1.4 新增文本标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| mark | 标记 | 双标签 |
mark 标签可以用于对搜索结果列表进行标记
2 HTML5 表单新增功能
2.1 表单控件新增属性
旧标准存在的表单控件属性：
name
value
disabled
新标准增加的表单控件属性：
placeholder 输入框、文本域的提示文字
required 必填或者必选，否则表单无法提交
autofocus 自动获取焦点
autocomplete 是否显示输入记录，值:on（默认值）、off
pattern 值是正则表达式，对文本框或文本域进行验证，表单提交的时候验证
form 该属性的值可以指定form标签的id，与form标签关联，表单控件可以写在form标签的外面
2.2 input 标签的 type 属性新增的值(新增的表单控件类型)
旧标准 input 标签 type 属性的值：
text、password、radio、checkbox、submit、reset、button
① 输入框类（5个）
<!-- 邮箱 提交表单验证 -->
<input type="email" placeholder="请输入邮箱">
<!-- URL 提交表单验证-->
<input type="url" placeholder="请输入网址">
<!-- 数字 非数字无法输入，提交表单验证数字范围 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="16" min="-10" placeholder="请输入数字">
<input type="number" step=".1" min=".1" placeholder="小数">
<!-- 电话 不会进行验证，移动端点击弹出数字键盘-->
<input type="tel" placeholder="请输入电话">
<!-- 搜索框 没有验证功能-->
<input type="search" placeholder="搜索框">
② 范围选择框（1个）
<input type="range" name="num01">
<input type="range" max="1000" min="-1000" name="num02" value="-1000">
<input type="range" max="10" min="0" step="2" name="num03">
③ 颜色选择框（1个）
<input type="color">
④ 日期时间选择框类（5个）
<!-- 选择年月日 -->
<input type="date">
<!-- 选择年月 -->
<input type="month">
<!-- 选择年周 -->
<input type="week">
<!-- 选择时间 -->
<input type="time">
<!-- 选择日期和时间 -->
<input type="datetime-local">
2.3 form 标签新增属性
novalidate 让表单不进行验证，该属性不要值
2.4 输入框的搜索提示
<input type="search" list="searchData">
<datalist id="searchData">
<option value="hello world"></option>
<option value="hello xiaole"></option>
<option value="nihao"></opti on>
<option value="ab"></option>
<option value="aaa"></option>
<option value="abc"></option>
<option value="abb"></option>
</datalist>
3 HTML5 音视频
3.1 音视频标签
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| video | 引入视频 | src：设置视频地址。 width：设置视频宽度。 height：设置视频高度。 controls：显示控制条，不需要值 muted：静音，不需要值 autoplay：自动播放，不需要值 loop：循环播放，不需要值 preload：预先加载，不需要值 poster：设置视频封面图片地址。 |
双标签 |
| audio | 引入音频 | scr：设置音频地址。 constrols：显示控制条，不需要值 muted：静音，不需要值 autoplay：自动播放，不需要值 loop：循环播放，不需要值 preload：预先加载，不需要值 |
双标签 |
| source | 引入音频或视频 | src：设置音频或视频文件的地址。 type：设置音频或视频文件的类型 |
单标签 |
<video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
很抱歉，您的浏览器不支持HTML5 视频
</video>
注意：
- 视频自动播放生效的前提是，设置静音。
- 音频不允许自动播放。
3.2 浏览器支持的音视频格式
① 视频格式
mp4
webm
ogg
② 音频格式
mp3
wav
ogg
4 HTML5 新增全局属性
旧标准中的全局属性：
title
lang
id
class
style
HTML5 标准新增的全局属性
hidden 隐藏元素，该属性不要值
a 标签新增的属性：
download 如果设置了该属性，不论目标文件浏览器是否能打开，点击超链接都会下载。该属性不需要值。
注意： 目标文件与当前文件在同一服务器下，才能实现点击下载！
5 HTML5 兼容性方案
5.1 设置元信息
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
5.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签
<!--[if lt ie 9]>
<script src="../js/html5shiv.js"></script>
<![endif]-->
