一、新增标签
1. 新增页面结构标签(最重要)
标签名 | 语义和功能 | 单标签还是双标签 |
---|---|---|
header | 页头 | 双标签 |
footer | 页脚 | 双标签 |
nav | 导航 | 双标签 |
section | 页面或文章中的一部分 | 双标签 |
aside | 侧边栏 | 双标签 |
article | 文章 | 双标签 |
main | 主要内容(IE不支持) | 双标签 |
2. 新增状态标签(了解)
标签名 | 语义和功能 | 单标签还是双标签 |
---|---|---|
meter | 静态的度量 | 双标签 |
progress | 动态的进度 | 双标签 |
meter 和 progress 什么区别:
- meter 表示静态的度量,如电池电量、磁盘容量、温度等
- progress 表示动态的进度,如进度条
3. 新增注释标签(注音标签)
标签名 | 语义和功能 | 单标签还是双标签 |
---|---|---|
ruby | 注音包裹标签 | 双标签 |
rt | 注音 | 双标签 |
<ruby>
饕餮
<rt>taotie</rt>
</ruby>
4. 新增文本标签
标签名 | 语义和功能 | 单标签还是双标签 |
---|---|---|
mark | 标记标签 | 双标签 |
可以用于搜索结果中关键字的标记
二、表单新增功能
1. 表单控件新增属性
旧标准存在的表单控件属性:
name
value
disabled
新标准增加的表单控件属性:
属性 | 语义 |
---|---|
placeholder | 设置提示文字,用于输入框类、文本域 |
required | 设置必选或必填, 不需要设置值 |
autofocus | 自动获取焦点,不需要设置值 |
autocomplete | 设置浏览器是否对输入框记录,值: on(默认)、off |
pattern | 使用正则表达四对输入框或文本域的内容进行验证 |
2. input 标签的 type 属性新增的值(新增的表单控件类型)
旧标准 input 标签 type 属性的值:
属性值 | 语义 |
---|---|
text | 文本输入 |
password | 密码输入 |
radio | 单选框 |
checkbox | 复选框 |
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮 |
file | 文件上传 |
2.1 输入框类(5个)
属性值 | 语义 |
---|---|
验证邮箱 | |
number | 数字 |
URL | 网址 |
tel | 电话号码 |
search | 搜索框 |
<!-- 邮箱 提交表单的时候进行验证,如果不填写就不验证-->
<input type="email" placeholder="请输入邮箱" name="" id="">
<!-- 数字 -->
<input type="number" name="" id="">
<input type="number" min="-100" max="200" name="" id="">
<input type="number" min="-100" max="200" step="10" name="" id="">
<input type="number" step=".01" name="" id="">
<!-- URL -->
<input type="url" placeholder="请输入网址" name="" id="">
<!-- 电话号码 不会进行验证,在移动端点击弹出数字键盘-->
<input type="tel" placeholder="请输入您的电话" name="" id="">
<!-- 搜索框 -->
<input type="search" name="" id="">
2.2 范围选择框(1个)
属性值 | 语义 |
---|---|
range | 范围选择 |
<input type="range" name="range_number2" id="">
<input type="range" name="range_number2" max="500" min="-500" id="">
<input type="range" name="range_number3" max="500" min="-500" step="100" id="">
2.3 颜色选择框(1个)
属性值 | 语义 |
---|---|
color | 颜色选择 |
<input type="color" name="" id="">
2.4 日期时间选择框类(5个)
属性值 | 语义 |
---|---|
month | 选择年月 |
week | 选择哪一年的第几周 |
date | 选择年 月 日 |
time | 时间 |
datetime-local | 选择日期时间 |
<!-- 选择年月 -->
<input type="month" name="" id="">
<!-- 选择哪一年的第几周 -->
<input type="week" name="" id="">
<!-- 日期: 选择年 月 日 -->
<input type="date">
<!-- 时间 -->
<input type="time" name="" id="">
<!-- 选择日期时间 -->
<input type="datetime-local" name="" id="">
3. form 标签新增属性
novalidate
让表单不进行验证,该属性无需设置值
三、音视频
1. 音视频标签
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
video | 在页面中引入视频 | src:设置视频文件地址。 controls:显示控制条,无需设置值。 muted:设置默认静音,无需设置值。 autoplay:设置自动播放,无需设置值。 preload:设置预先加载,无需设置值。 loop:设置循环播放,无需设置值。 poster:设置封面图片的地址。 width:设置宽度。 height:设置高度 | 双标签 |
audio | 在页面中引入音频 | src:设置音频文件地址。 controls:显示控制条,无需设置值。 muted:设置默认静音,无需设置值。 autoplay:设置自动播放,无需设置值。 preload:设置预先加载,无需设置值。 loop:设置循环播放,无需设置值。 | 双标签 |
source | 加载音频或者视频 |
- chrome 规定,只有设置静音之后,自动播放才能生效
- chrome 规定,音频不能自动播放
2. 浏览器支持的音视频格式
类型 | 格式 |
---|---|
视频 | mp4(推荐) webm ogg |
音频 | mp3(推荐) wav ogg |
四、新增全局属性
旧标准中的全局属性:
属性 | 语义 |
---|---|
name | 设置名字 |
id | 设置唯一标识 |
class | 设置类名,css中使用 |
style | 设置css样式 |
title | 设置鼠标悬停之后的文字提示 |
lang | 设置语言,值:cn、en |
HTML5 标准新增的全局属性
属性 | 语义 |
---|---|
hidden | 隐藏元素,该属性无需设置值 |
a 标签新增的属性:
属性 | 语义 |
---|---|
download | 浏览器能够打开的文件,点击也会下载(文件在本地),该属性无需设置值 |
五、兼容性方案
1. 设置元信息
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签
<!--[if lt ie 9]>
<script src="../js/html5shiv.js"></script>
<![endif]-->