一、基础常识
1. <!DOCTYPE html>文档类型声明简写 HTML5 DOCTYPE缩写
2. 原来文档编码声明为：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
现在可以缩写为：
<meta charset="utf-8">
3. 新增<header>标签
以前我们在div css布局中常常把网页大致分为头部、内容、底部而头部常常使用<div id=”header”></div>或<div class=”header”></div>进行布局。正应为大家公认html布局中对“header”为常用命名，所以在HTML5新增了个header标签元素。
<header>头部内容区</header>
> 兼容性：
因为header标签是HTML5新增标签元素，所以旧版本浏览器均不支持，需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。所以，建议还是使用常规DIV+CSS布局html网页。
4. 新增<footer>标签
在以前html5版本以前布局网页底部版权时，习惯使用id=”footer”或class=”footer”。在html5开发使用footer标签时，把当作普通div标签对待即可。一般情况下一篇网页只有一个底部区，所以使用最好只使用一次footer即可。
5. 新增<nav>标签
在html5中特地将以前常用命名nav作为一个新标签元素。此标签常用于导航处布局。
<nav>内容</nav>
Nav是与导航相关的，所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用<nav>标签可添加id或class，而与div标签又有不同处是，此标签一般只用于导航相关地方使用，所以在一个html网页布局中可能就使用在导航条处，或与导航条相关的地方布局使用。
6. 新增表单标签
新增type类型：
<input type="email"/> <input type="url"/> <input type="number"/> <input type="range"/> //范围内数字的输入域 滑动条 <input type="date"/> //日期选择器 <input type="tel"/> <input type="color"/> //选色器
7. canvas
canvas 用于在页面上 绘制图形，canvas是一个画布，在画布上绘制 路径 矩形 圆形…
注意：Canvas本身没有绘图能力， 绘制工作都是在javascript中完成。
1）创建canvas
<canvas id width height></canvas>
2） js 得到元素
3）元素.getContext(“2d”) html5的内建对象，绘制2d图形 拥有 绘制矩形 路径 圆形 字符…等方法
cxt.fillStyle = "#ff0000"; //设置填充色样式, fillStyle默认设置是#000000（黑色）。
cxt.fillRect(25,10,150,75);//画出矩形， 其中：x,y,w,h 确定形状 25,10 起点坐标
<body>
<canvas id="canva" width="500" height="500">
您的浏览器不支持canvas
</canvas>
</body>
<script>
window.onload=function(){
var canva=document.getElementById("canva"); //得到元素对象，相当于画布
var cxt = canva.getContext("2d"); //得到内建对象，相当于画笔
cxt.fillStyle = "#ff0000"; //设置图像的填充色
cxt.fillRect(25,10,150,75); //画出图形
};
</script>
效果图：
a） 直线
cxt.moveTo(10,10); //原始起点 cxt.lineTo(150,50); //原始起点的终点，是同一个2d图形的 下一条直线 起点 cxt.stroke(); //输出
b）矩形
cxt.strokeStyle = "#ff0000"; 矩形边框色 cxt.strokeRect(10,10, 50, 50); 绘制矩形坐标 cxt.fillStyle = "#ff0000";填充颜色 cxt.fillRect(10,10,150,150);填充位置
c）圆形
cxt.arc(x,y,radius,startAngle,endAngle,其他参数(true 逆时针 false 顺时针)) x,y 起点 radius 半径 startAngle 起点度数 endAngle 终点度数
<body>
<canvas id="canva" width="500" height="500">
您的浏览器不支持canvas
</canvas>
</body>
<script>
window.onload=function(){
var c=document.getElementById("canva");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
};
</script>
效果图：
d）canvas 绘制文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
<body>
<canvas id="canva" width="500" height="500">
您的浏览器不支持canvas
</canvas>
</body>
<script>
window.onload=function(){
var c=document.getElementById("canva");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,90);
};
</script>
效果图：
d）Canvas - 渐变
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
> 创建一个线性渐变。使用渐变填充矩形:
<body>
<canvas id="canva" width="500" height="500">
您的浏览器不支持canvas
</canvas>
</body>
<script>
window.onload=function(){
var c=document.getElementById("canva");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
};
</script>
案例效果：
学过PS的都知道，线性渐变需要确定起点和终点就可以通过渐变工具实现渐变色的填充。这里也是类似。
注：设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
> 创建一个径向/圆渐变。使用渐变填充矩形：
<body>
<canvas id="canva" width="500" height="500">
您的浏览器不支持canvas
</canvas>
</body>
<script>
window.onload=function(){
var c=document.getElementById("canva");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
};
</script>
案例效果：
提示：当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:
- x：表示渐变的开始圆的 x 坐标
- y：表示渐变的开始圆的 y 坐标
- r：表示开始圆的半径
- x1：表示渐变的结束圆的 x 坐标
- y1：表示渐变的结束圆的 y 坐标
- r1：表示结束圆的半径
4）清除画布
Cxt.clearRect(x,y，width，height) 清除 从(x,y) 宽高范围内的画布 元素
5）不支持canvas
<canvas id="myCanvas" width="200" height="100">
您的浏览器不支持canvas
</canvas>
-------------------------------------------------------------------------------------------------------------------------
免责声明：以上内容来自互联网。
----2018年6月18日