HTML5是新一代的标准，其工作原理主要包括3部分：
1.不破坏web
在web中使用HTML5的标准不应该让已经存在的网页无法工作。
2.修补牛蹄子路
HTML5将使用频率很高，但是不是官方的技术作为一个目标，在某种程度上确实是最 实际解决问题的途径。
3.实用至上
1.1文档声明
虽然即使不加<html><head><body> 浏览器依旧能够识别html的标签元素，但是如果不加<!doctype html> 文档说明，浏览器就会以一种混杂模式去渲染网页，不同的浏览器混杂模式不同，渲染页面差别很大，加入文档声明以后，浏览器会以 更严格的标准模式去渲染页面，以保证以一致的格式和布局显示网页。浏览器不关心你有哪种文档声明，它只要检测到文档声明即可。HTML5文档声明很简单
<!doctype html> /<!DOCTYPE html> html5不区分大小写，大写小写无所谓。
1.2语言和编码
使用选择的语言，只需要在<html lang="en/zh-CN"> 中自己添加要使用的语言即可，en 代表英文，zh-CN代表中文。
编码建议采用utf-8 这种编码简单，转换速度快，支持任何非英文字符，当然包含中文。使用如下：
<meta charset="utf-8">
1.3 引入css样式和javascript
推荐外联式引入css,javascript,可以使html5页面结构清晰，便于修改和维护，css的引入内联式和行间样式不推荐使用，js的内联式也不推荐使用。
外联式 ：
<link rel="stylesheet" href="css/1.csss">
<script src="js/1.js"></script>
css的引入只能在<head></head> 中，js用<script></script>引入，但是可以放在页面的任何部分，建议放在页面的底部，这样做是要页面加载完以后，再加载交互部分。
2.html5新增的元素
新增的元素有的是添加了功能，有的是形成语义元素，让页面结构更清晰，所有语义元素都有一个特点：不真正做任何事。但是却有一定的用处：容易修改和维护、无障碍性（现代web，让任何人都能无障碍的访问网页）、搜索引擎优化。
2.1构建页面的元素
<article></article> 一块文章、新闻区域。
<aside></aside> 添加附注
<figcaption></figcaption> 插图标题
<figure></figure> 应用插图
<footer></footer> 标示页脚
<header></header> 头部
<hgroup></hgroup> 标题 里面放主标题、副标题，别的不放
<hgroup>
<h1>efgwerwq3</h1>
<h2>efgwerwq3</h2>
</hgroup>
<nav></nav> 标示一组导航
<section></section>
<details></details>
<summary></summary>
对于不识别这些新元素的浏览器 ，浏览器默认是显示为line元素。对于不认识的元素，应该显示为块级元素。有两种方式：
1.自定义
article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{
display:block;
}
2.引入
这里是使用的boostrap中兼容的小于IE9以下的浏览器
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>2.2标示文本
<mark>awfa</mark> 标记文本 ,默认是有黄色背景
<time>2017-7-1</time> 其实跟不同文本没区别，添加样式很方便
2.3web表单及交互
表单：就是一组文本框、列表、按钮及其他可以点击的小控件，通过这些小控件收集有关访客的某些信息。
2.3.1 input
<input type="text"> 添加了很多类型 button color image email number url tel range datatime data month week time color等
用placeholder=""添加提示信息，默认为灰色
<input type="text" placeholder="请输入.....">
用autofocus 自动获取焦点，表单中只能有一个
<input type="text" autofocus>
用required 验证非空,此为必填的字段。若添加这个属性的表单元素为空，当提交后，会有提示信息。
<input type="text" required>
可添加样式,与伪类结合以体验更好的体验：
必填时的样式
input:required{ background:red;
}
当提交会，无效时显示的样式
input:required:invalid{ background:blue;
}
更好的验证方式是正则表达式
2.3.2
<datalist id="id"></datalist> 用作下拉框，与input 一起使用，input中 指定list="id",即可选择，又可以手动输入。
<progress></progress> 进度条
<command>
<menu></menu>
<output></output> 用于js计算后，放一些数据的占位符，通常用span,现在可以用output
2.4音频、视频、插件
<audio src=""></audio>
<video src=""></video>
controls 属性可以允许用户控制音量，进度，暂停，播放等功能。autoplay 自动播放，背景播放，将controls 去掉就行。 loop循环播放。
video 比audio 多了几个属性 width=“300” height=“200” poster = "1.png" 视频的替换图片（视频出现问题时替换，例如找不到视频文件、第一帧没加载成功）
<audio src="1.mp3" controls autoplay loop ></audio>
<video src="2.mp4" controls autoplay loop width=“300” height=“200” poster = "1.png" ></video>
为了试用不同的浏览器，最好是将每种格式都列出来，这是就不要在元素上使用src,而是嵌套一组source,如下：
<audio controls>
<source src="1.mp3" type="audio/mp3" />
<source src="1.ogg" type="audio/ogg" />
</audio>
<embed src="" type=""> 插件方式
2.5画布
<canvas></canvas> 独特的地方就是用javascript去操作，可以开发炫酷的图形。其在HTML5中，只要3个属性就可以用了。
<canvas id="canvasDemo" width="300" height="300"></canvas> 基本单位为px
在js中使用，
1.首先要获取canvas对象：
var canvas = document.getElementById("canvasDemo");2.获取二维绘图上下文
var context = canvas.getContext("2d");画直线的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvasDemo" width="300" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var context = canvas.getContext("2d");
context.moveTo(10, 10); //直线起点
context.lineTo(100,100); //直线终点 context.lineWidth = 10; // 线的宽度 默认单位为px
context.strokeStyle = "#abcd"; //线的颜色
context.lineCap = "butt"; //默认是butt round(圆头) square(长方头)
context.stroke(); //划线
</script>
</body>
</html>当要绘制多个路线时，后面的样式会将前面的覆盖掉，因此应该在两个不同样式的图上面和下面（两个都必须用，否则后面依旧会覆盖前面的）用beginPath()开始画图、closePath()关闭画图。注意只用单个beginPath() 隔开也是可以的，但是不推荐，都加上，容易区分。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvasDemo" width="300" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var context = canvas.getContext("2d");
// context.beginPath();
context.moveTo(10, 10);
context.lineTo(100,100);
context.lineWidth = 200;
context.strokeStyle = "yellow"; //被后面的blue 覆盖
context.lineCap = "butt";
context.stroke();
context.closePath(); //没用
//context.beginPath();
context.moveTo(100, 10);
context.lineTo(200,200);
context.lineWidth = 10; // 线的宽度 默认单位为px
context.strokeStyle = "blue"; //线的颜色
context.lineCap = "round"; //默认是butt round(圆头) square(长方头)
context.stroke();
context.closePath(); //没用
context.beginPath();
context.moveTo(120, 120);
context.lineTo(130,160);
context.lineWidth = 10;
context.strokeStyle = "red";
context.lineCap = "square";
context.stroke();
context.closePath();
</script>
</body>
</html>绘制圆：
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var context = canvas.getContext("2d");
context.beginPath();
var centerX = 150; //圆心x坐标
var centerY = 300; //圆心y坐标
var radius = 50; //半径 50
var startAngle = 0; //绘图起点角度
var endAngle = 2*Math.PI; //终点角度
context.arc(centerX, centerY, radius, startAngle, endAngle); //画圆
context.strokeStyle = "red"; //轮廓填充颜色
context.fillStyle = "#abcdef"; // 内部填充颜色
context.fill(); //内部填充
context.stroke(); // 绘图
context.closePath();
</script>贝塞尔曲线：
http://www.j--d.com 可动态调整曲线弯度和相应的代码。
2.转移坐标
如果在画布上存在很多的相同的图形，可以直接转移坐标系，达到在不同的位置画相同的图形。
例如：平移 translate(x,y) 将坐标系移到这个位置
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var context = canvas.getContext("2d");
context.rect(30, 30, 40, 40);
context.translate(100, 100); //坐标系转移到100 ，100的位置
context.rect(30, 30, 40, 40);
context.stroke();
</script>
旋转 rotate(deg)
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var context = canvas.getContext("2d");
context.translate(100, 100); //坐标系转移到100 ，100的位置
var copies = 10;
for(var i=0 ; i<copies;i++){
context.rotate(2*Math.PI*1/(copies-1)); //旋转角度
context.rect(0, 0, 40, 40);
};
context.stroke();
</script>
3.web存储
web存储都是存储在计算机上，分为本地存储localStorage,会话存储sessionStorage
localStorage长期保存在本地，不删除一直存在，限制在5MB；sessionStorage临时保存在一个打开的窗口的数据，在关闭窗口之前数据一直存在。
3.1 存储数据
localStorage["key"] = data sessionStorage["key"] = data
3.2 读取数据
localStorage['key'] sessionStorage["key"]
3.3 删除数据
localStorage.removeItem('key') sessionStorage.removeItem('key')
3.4清空数据
localStorage.clear（） sessionStorage.clear（）
注意默认的存储为文本形式，对于其他，例如数字，应该转换类型，否则会出错。
转化为数字 Number（localStroge['key']）
3.5 文件上传
本身不能做什么，要想保存数据，可以通过保存在本地或者是上传服务器。
4.离线应用
当网络中断时，之前的工作全部丢失，离线应用可以将网页暂时保存在本地，虽然部分功能不能用，但是等到有网时可以继续。
1.首先在网页的根目录下，建立一个.manifest的文件
2.在文件中，写入你要缓存的文件
CACHE MANIFEST
1.html
2.html
3.png
4.css
3.在要缓存的网页 1.html 2.html
的<html mainfest="文件名.manifest"></html>
