一、什么是html5？
HTML5是指第5代HTML，也指用H5语言制作的一切数字产品。
所谓HTML是“超文本标记语言(Hyper Text Markup Language)”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
而“标记”指的是这些超文本必须由包含属性的开头与结尾的标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
二、html5的新特性
1.语义化标签
语义化标签其实就是让标签有自己的含义。
对比下面两个html的区别
传统标签
<div class="header">
我是头部
</div>
<div class="main">
我是正文
<div class="nav">
我是导航
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</div>
</div>
<div class="footer">
我是脚部
</div>
语义化标签
<header>
我是头部
</header>
<main>
我是正文
<nav>
我是导航
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</nav>
</main>
<footer>
我是脚部
</footer>
语义化标签的优势：
- 代码结构清晰，方便阅读，有利于团队合作开发。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式渲染网页。
- 有利于搜索引擎优化（SEO） 常见的语义化标签
<title>：页面主题内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。
2.表单功能增强
<form action="" method="get">
<p>邮箱标签: <input type="email"></p>
<p>数字标签: <input type="number"></p>
<p>滑动条标签: <input type="range"></p>
<p>搜索框标签: <input type="search"></p>
<p>日期框: <input type="date"></p>
<p>星期框: <input type="week"></p>
<p>月份框: <input type="month"></p>
<p>颜色框: <input type="color"></p>
<p>网址框: <input type="url"></p>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
3.音视频标签
音频 audio
视频 video
<audio src="1.mp3" controls autoplay>
当前浏览器不支持audio
</audio>
<video width="800" controls>
<source src="1.mp4" type="video/mp4"></source>
</video>
常用属性
autoplay #自动播放 默认false
loop #自动循环 默认false
muted #静音状态 默认false
volume #音量 默认1，取值范围0-1
paused #停止播放 默认true
duration #返回当前音视频的总时间
currentTime #返回当前播放时间
常用事件
audio实例
#监听前面+on
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
audio.ontimeupdate=function(){}#音视频时间改变的时候触发
audio.onended=function(){} #音视频播放结束的时候
audio.play()#播放
audio.pause()#暂停
audio.onvolumechange=function(){}#音量变化的时候执行
4.Canvas+SVG
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
后面单独出一期Canvas和SVG的详细讲解。
5.拖拽功能
拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
width: 120px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img
id="drag1"
src="img.png"
draggable="true"
ondragstart="drag(event)"
/>
</body>
</html>
6.本地存储
localStorage：这个特性主要是⽤来作为本地存储来使⽤的，解决了cookie存储空间不⾜的问题(cookie中每条cookie的存储空间为4k)，localStorage中⼀般浏览器⽀持的是5M⼤⼩，这个在不同的浏览器中localStorage会有所不同。
localStorage的使用：
var storage=window.localStorage;
//写⼊a字段
storage["a"]=1;
//写⼊b字段
storage.a=1;
//写⼊c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本⾝的特点有关，localStorage只⽀持string类型的存储。
//第⼀种⽅法读取
var a=storage.a;
console.log(a);
//第⼆种⽅法读取
var b=storage["b"];
console.log(b);
//第三种⽅法读取
var c=storage.getItem("c");
console.log(c);
//官⽅推荐的是getItem\setItem这两种⽅法对其进⾏存取
这⾥要特别说明⼀下 localStorage的使⽤也是遵循同源策略的，所以不同的⽹站直接是不能共⽤相同的localStorage
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第⼀次请求的数据直接存储到本地，这个相当于⼀个5M⼤⼩的针对于前端页⾯的数据库，相⽐于cookie可以节约带宽，但是这个却是只有在⾼版本的浏览器中才⽀持的
localStorage的局限
1、浏览器的⼤⼩不统⼀，并且在IE8以上的IE版本才⽀持localStorage这个属性
2、⽬前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们⽇常⽐较常见的JSON对象类型需要⼀些转换
3、localStorage在浏览器的隐私模式下⾯是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页⾯变卡
5、localStorage不能被爬⾍抓取到
localStorage与sessionStorage的唯⼀⼀点区别就是localStorage属于永久性存储，⽽sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
7.webWorker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：
- window 对象
- document 对象
- parent 对象
8.地理位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;
}
</script>
9.可编辑内容
内容切换编辑状态，可以通过这个属性实现
<div class="edit" contenteditable='true'></div>
