【HTML】HTML5详解

一、新增标签

1. 新增页面结构标签(最重要)

标签名	语义和功能	单标签还是双标签
header	页头	双标签
footer	页脚	双标签
nav	导航	双标签
section	页面或文章中的一部分	双标签
aside	侧边栏	双标签
article	文章	双标签
main	主要内容(IE不支持)	双标签

2. 新增状态标签(了解)

标签名	语义和功能	单标签还是双标签
meter	静态的度量	双标签
progress	动态的进度	双标签

meter 和 progress 什么区别：

1. meter 表示静态的度量，如电池电量、磁盘容量、温度等
2. 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个）

属性值	语义
email	验证邮箱
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	加载音频或者视频

1. chrome 规定，只有设置静音之后，自动播放才能生效
2. 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]-->