1.HTML5简介
HTML5 是 HTML（超文本标记语言）的第五个主要修订版本，由万维网联盟（W3C）和 Web Hypertext Application Technology Working Group（WHATWG）共同推动发展。它带来了许多新特性和改进，极大地提升了网页的功能和用户体验
HTML5新增特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形及特效特性，性能与集成特性，CSS特性。
2.HTML5新元素
2.1语义化标签
对于HTML5之前的布局，基本都是用div来做的，对于程序员来说，程序员任然能看得懂，然而div对于搜索引擎来说，是没有语义的，和普通标签没有区别
<div class="header"></div><div class="nav"></div><div class="content"></div><div class="footer"></div>新增语义化标签：
| <header> | 头部标签 |
| <nav> | 导航标签 |
| <article> | 内容标签 |
| <section> | 块级标签 |
| <aside> | 侧边栏标签 |
| <footer> | 尾部标签 |
HTML5布局：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</HTML></title><style>header,nav,article,aside{width: 100%;height: 120px;background-color: aqua;margin: 10px;}section{width: 20%;height: 50px;background-color: aquamarine;}</style></head>
<body><header>我是header</header>
<nav>我是nav</nav>
<article>我是article <section>我是section</section></article>
</body>
</html>
注意：
1.这些语义化标签主要是针对搜索引擎的
2.这些新标签在页面中可以使用多次
3.在IE9中，需要把这些元素转化为块级元素，只需要在<style>中加上display：block就可以了
2.2多媒体标签
<audio>音频标签
HTML5在不使用插件的情况下也可以支持音频格式文件的播放，但是支持的格式是有限的
当前，<audio>元素支持三种音频格式：Ogg Vorbis , MP3 , Wav
不同的浏览器支持的音频格式有所差异
对于不同浏览器支持的音频格式不同，有这样的解决方案（把多种音频格式都放进去）
<audio>
<source src="铃声.mp3" type="audio/mpeg">
<source src="铃声.mp3" type="audio/ogg">
<source src="铃声.mp3" type="audio/wav">
</audio>浏览器从上往下，支持哪个格式就使用哪个
<audio>音频标签常见属性
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则音频在就绪后立即播放 |
| controls | controls | 如果出现该属性，则显示控件 |
| loop | loop | 如果出现该属性，则会循环播放音频 |
| src | src | 要播放音频的URL |
<audio src="铃声.mp3"></audio>
<audio src="铃声.mp3" controls="controls"></audio>
不同的浏览器的控件也不同
<video>视频标签
不同的浏览器支持的视频格式有所差异
对于不同浏览器支持的音频格式不同，有这样的解决方案（把多种音频格式都放进去）
<video controls="controls"><source src="懒洋洋.mp4" type="video/mp4"><source src="懒洋洋.ogg" type="video/ogg"></video><video>视频标签常见属性
| 属性 | 值 | 描述 |
| autoplay | autoplay | 视频自动播放（谷歌浏览器需要添加muted 静音属性解决自动播放问题） |
| controls | controls | 向用户展示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 循环播放 |
| preload | auto（预先加载视频） none（不预加载视频） | 规定是否预加载视频（有autoplay就忽略该属性） |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
2.3input表单属性
| 属性值 | 说明 |
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入必须为URL类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
邮箱：
<form>邮箱：<input type="email"><input type="submit" value="提交">
</form>
email类型表单会自动检查email域的合法性
URL类型：time
<form>网址：<input type="url"><input type="submit" value="提交">
</form>
url类型表单会自动检查url域的合法性
date类型：
<li>日期：<input type="date"></li>
time类型：
<li>时间：<input type="time"></li>
month类型：
<li>月：<input type="month"></li>
week类型：
<li>周：<input type="week"></li>
number类型：
<li>数字：<input type="number"></li>
number在输入除数值以外的值时，是输不进去的，字母e除外
number类型设置输入的最大值和最小值
<li>数字：<input type="number" max="15" min="5"></li>
tel类型：
tel在pc端没有明显的效果，多用于手机端
<li>手机号码：<input type="tel"></li>
search类型:
<li>搜索：<input type="search"></li>
color类型：
<li>颜色：<input type="color"></li>
表单属性：
| 属性 | 值 | 说明 |
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 autocomplete="on"----打开 autocomplete=“off”----关闭 |
| multiple | multiple | 可以多选文件提交 |
required属性：
内容为必填
<form action="">text:<input type="text" required="required"><input type="submit" value="提交">
</form>
若提交内容为空，则会出现提示
placeholder属性：
提示信息
<form action="">text:<input type="text" required="required" placeholder="请输入内容"><input type="submit" value="提交">
</form>
虽然value也能做这个属性，但是
<form action=""><!-- text:<input type="text" required="required" placeholder="请输入内容"> -->text:<input type="text" value="请输入内容"><input type="submit" value="提交">
</form>
对比可以发现，placeholder的是灰色，value是黑色，placeholder输入内容后，提示内容会消失，而value需要自己删除，当placeholder域为空时，提示内容又会出现，而value的提示内容删除后就不会出现
autofocus属性：
光标定位
未加autofocus时
<form>用户名：<input type="text"><input type="submit" value="提交">
</form>
加上autofocus后
<form>用户名：<input type="text" autofocus="autofocus"><input type="submit" value="提交">
</form>
autocomplete属性：
提示过去输入的内容
<form>用户名：<input type="text" autofocus="autofocus" name="username" autocomplete="off"><input type="submit" value="提交">
</form>
multiple属性：
多选文件提交
未设置前：只能选择一个文件
<form>上传头像：<input type="file">
<input type="submit" value="提交">
</form>
设置后：
可以选择多个文件
<form>上传头像：<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
