整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5可不是什么虚幻的概念，与其高谈阔论的讨论HTML5未来的趋势和价值，不如一起研究一下现在的HTML5可以做出哪些成果，可以让我们做出出色的产品。
Form Follows Function就是一個展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。
1、散景（Bokeh）
一种图像的焦外效果，通过HTML5实现的这种效果可以加载在背景、字体浮现。
2、3D效果
3D西红柿罐头汤，可通过鼠标进行旋转操作，同时底部有一个倒影效果，一个很优秀的交互效果示范。
3、宇宙全景图
设定整个宇宙的场景，可以用360度观察整个宇宙星云，这种实现方式呈现出的效果更接近Google的街景地图。
4、像素化效果
这种效果用于图片很有趣，而实际可利用到的领域，还有待探索。
5、螺旋效果
字体的旋转效果，简单的近乎一张GIF图片，不过通过对文章的替换，可以轻易的转换成各种各样的文案展示。
6、结晶化滤镜
通过鼠标可选择结晶化的范围，用于网页可对界面直接做出更多的交互视觉效果。
7、色相混合
随着鼠标移动而改变各个位置的色相，一种很简单就能汇聚用户视线的交互效果，不过在简单的背景才更能体现这种效果的价值。
8、翻转时钟
一种时钟的展示效果，结构非常简单，而看上去也很清晰明了，适合嵌入到很多不同的页面中作为实时时间的展示。
9、水纹倒影
一种视觉效果，在这个Demo中可以调节倒影波动的速度。这种效果适合制作Logo以及主页的展示。
10、自由落体
“下雨的人”展示了一种自由落体的效果，可以用鼠标条件调节飘落的角度，提供了一种带有物理效果的交互操作。这种功能特别用于游戏。
11、水面波纹
同样是一种物理效果，可通过鼠标刺激水面波纹，在网页上就能轻松实现。
12、树的成长
一种应激操作的交互方式，点击一次长出一棵树，可用于网页展示的附加效果。这种效果在视觉上有多种用法，网页、游戏都可以。
13、字母雨刷
在屏幕上扫除字母的雨刷效果，初次看见感觉像是网页刷新的过度画面。
14、渐显效果
通过一些杂乱无章的线逐渐显现出一幅画，中间的显现过程很适合作为网页加载的等待界面。
原文链接：http://www.gbtags.com/gb/share/2595.htm
html5Canvas的知识点，是开发的必备技能，在实际工作中也常常会涉及到。
最近熬夜总结html5Canvas相关的知识点，大家一起看一下吧：
Canvas使用的场景有：1，动画；2，H5游戏；3，图表。
效果动画，加载Loading:
H5游戏效果：
对于Canvas需要掌握：
Canvas坐标体系
画直线，矩形和原型
beginPath和closePath
描边和填充样式
Canvas中的图形变换，渐变，文字和图片
Canvas中的图形变换
图形变换都是针对坐标系来说的：
save和restore
用来保存和恢复上下文的环境ctx，一般成对出现
Canvas中的渐变
(xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart)是第一个圆的原心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的原心，radiusEnd是第二个圆的半径
第一圆到第二个圆之间的颜色呈现渐变。
Canvas中的文字
描边文字：ctx.strokeText(text,x,y)
填充文字：ctx.fillText(text,x,y);
设置字体样式：ctx.font
设置垂直对齐方式：ctx.textBaseline
Canvas图片
绘制图片3种方法
在image加载完成之后绘制：
示例：
var img = new Image();img.src = 'logo.png';img.onload = function() { ctx.drawImage(img,0,0,40,40,0,0,80,80);}Canvas绘制
Canvas图形画刷
ctx.createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的填充。
type取值:
Canvas像素操作
var imageData = ctx.getImageData(x,y,w,h)返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]ctx.putImageData(imageData,x,y)把imageData放在(x,y)处ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域Canvas阴影绘制
Canvas剪辑区域
Canvas绘制曲线
狐线：
context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圆心(x,y) 半径radius从starAngle到endAngleanticlockwise代表是否逆时针方向生成工具
Canvas Quadratic Curve Example
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次样条曲线：
context.quadraticCurveTo(qcpx,qcpy, qx,qy)贝塞尔曲线：
context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)清除(x,y)点起， 宽width,高height的区域，用于重新绘制
离屏技术是什么：通过在离屏Canvas中绘制元素，再复制到显示Canvas中，从而大幅提高性能的一种技术。
使用离屏技术：
离屏技术：
一个Canvas中的图形绘制到另一个Canvas方法：
ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高hctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh对canvas插件的相关了解
什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件
（图表）Chart.js插件：https://www.chartjs.org/
Chartist.js插件是一个简单的响应式图表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）
HighCharts.js插件：方便快捷的HTML5交互性图标库：https://www.highcharts.com/
Chartist.js插件与HighCharts.js插件
响应式布局，它的用户体验友好，响应式网站可以根据不同终端，不同尺寸和不同应用环境，自动调整界面布局，展示内容，提供非常好的视觉效果。响应式布局就是一个网站能够兼容多个终端
示例：
<style>#canva { border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 绘制宽高200的canvas</div>在开始绘图时，先要获取Canvas元素的对象，在获取一个绘图的上下文。
获取Canvas对象 ,使用document对象的getElementById()方法获取。
var canvas = document.getElementById("canvas")可以使用通过标签名称来获取对象的getElementsByTagName方法使用getContext()方法来获取
var context = canvas.getContext("2d")context.font="98px 黑体"; // 文字样式context.fillStyle="red"; // 文字颜色context.textAlign = "center"; // 文字对齐方式// 绘制文字context.fillText("达达前端"，100, 123, 234);绘制图像：
使用drawImage()方法可以将图像添加到Canvas画布中，绘制一幅图像，需要有三个重载的方法：
使用：
drawImage(image, x, y) // 在画布上定位图像// 方法在画布上绘制图像、画布或视频。// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。drawImage(image, x, y, width, height)// 在画布上定位图像，并规定图像的宽度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切图像，并在画布上定位被剪切的部分参数：
参数描述image规定要使用的图像，画布或视频sourceX开始剪切的x坐标位置sourceY开始剪切的y坐标位置sourceWidth被剪切图像的宽度sourceHeight被剪切图像的高度destX在画布上放置图像的 x 坐标位置destY在画布上放置图像的 y 坐标位置destWidth要使用的图像的宽度destHeight要使用的图像的高度
插入图像：
function Draw() { // 获取canvas对象 var canvas = document.getElementById("canvas"); // 获取2d上下文绘图对象 var context = canvas.getContext("2d"); // 使用Image()构造函数创建图像对象 var newImg = new Image(); // 指定图像的文件地址 newImg.src = "../images/dadaqianduan.jpg"; newImg.onload = function () { // 左上角开始绘制图像 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250, 100, 150, 200); context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120); }}在Canvas中绘制文字“达达前端”:
// canvas 宽高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas { border: 2px solid #ccc;}</style><script> // 获取canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 设置字体 context.font="98px 黑体"; // 填充 context.fillStyle="#036"; // 文本水平位置 context.textAlign="center"; // 执行绘制 context.fillText("达达前端",100, 120, 200);</script>两个方法：
绘制矩形边框，使用strokeStyle方法：
// 绘制矩形边框strokeRect(x,y, width, height);填充矩形区域，使用fillRect()方法：
// 填充矩形区域fillRect(x,y,width,height);绘制矩形
// 绘制矩形function drawRect() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 描边 context.strokeStyle = "#000"; // 线条宽度 context.lineWidth = 1; // 矩形边框 context.strokeRect(50,50, 150, 100); // 填充 context.fillStyle="#f90"; // 矩形 context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);使用clearRect方法，可以擦除指定的矩形区域：
// 擦除指定的矩形区域context.clearRect(x,y,width,height)在实际开发中，画布是默认300*150的大小。
示例：
// 为画布设置边框canvas { border: 1px solid #ccc;}// 准备画布，默认是300*150// 设置画布的大小<canvas width="1200" height="800"></canvas>// 准备绘制工具<script>// 获取元素var myCanvas = document.querySelector('canvas');// 获取上下文，绘制工具箱var ctx = myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线，轨迹ctx.lineTo(200,100);// 描边ctx.stroke()向 HTML5 页面添加 canvas 元素
// 规定元素的 id、宽度和高度<canvas id="myCanvas" width="200" height="100"></canvas>图形绘制
需要理解些概念：
设置样式
矩形绘制
圆弧绘制
绘制文本
绘制图片
坐标变换
创建绘图路径
使用方法：beginPath()和closePath()，分别表示开始一个新的路径和关闭当前的路径
closePath方法关闭当前路径
绘制网格，网格大小
var grid = 10;// 画多少条x轴方向的线，横向的条数，画布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 画布宽高ctx.canvas.widthctx.canvas.height// 网格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 总线条var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) { ctx.beginPath(); ctx.moveTo(0, i*gridSize-0.5); ctx.lineTo(canvasWidth, i*gridSize-0.5); ctx.strokeStyle='#eee'; ctx.stroke();}// 画多少条y轴方向的线var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) { ctx.beginPath(); ctx.moveTo(i*gridSize-0.5,0); ctx.lineTo(i*gridSize-0.5,canvasHeight); ctx.strokeStyle='#eee'; ctx.stroke();}绘制坐标系，确定圆点，确定离画布旁边的距离，确定坐标轴的长度，确定箭头的大小，绘制箭头填充。
// 绘制坐标系var space = 20;var arrowSize = 10;// 画布宽高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐标系var x0 = space;var y0 = canvasHeight - space;// 绘制x轴ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭头ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 绘制y轴ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭头ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 绘制点var coordinate = { x: 146, y: 356}// 点尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();arc方法和rect方法
arc创建一个圆形，rect创建一个矩形，最后调用stroke()方法和fill()方法
// 圆形context.arc(100,100,30,0,Math.PI*2,true);使用beginPath()方法可以新创建一个子路径，closePath()方法用来闭合路径的。
绘制两条直线
function DrawLine() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 创建绘制过程 context.beginPath(); context.moveTo(50,50); context.lineTo(120,120); context.lineTo(120,60); context.closePath(); context.strokeStyle="#000"; // 执行绘制 context.stroke();}如果不用beginPath()方法，绘制图形时不再创建子路径，第一次的图形在执行过程中会被绘制填充两次。
图形组合
属性 globalCompositeOperation 设置如何在画布上组合颜色
12中组合类型：
值说明copy只绘制新图形，删除其他所有内容darker在图形重叠的地方，颜色由两个颜色值相减后决定destination-atop已有的内容只在它和新的图形重叠的地方保留，新图形绘制在内容后destination-in在新图形和已有画布重叠的地方，已有内容都保留，所有其他内容成为透明destination-out在新图形和已有内容不重叠的地方，已有内容保留所有其他内容成为透明destination-over新图形绘制于已有内容的后面lighter在图形重叠的地方，颜色由两种颜色值的叠加值来决定source-atop只在新图形和已有内容重叠的地方才绘制新图形source-in在新图形和已有内容重叠的地方，新图形才会被绘制，所有其他内容成为透明source-out只在和已有图形不重叠的地方绘制新图形source-over新图形绘制于已有图形的顶部xor在重置和正常绘制的其他地方，图形都成为透明
绘制曲线
// 圆形，曲线arc(x, y, radius, startAngle, endAngle, counterclockwise);<style>// 画布背景颜色#canvas { background: #000;}</style>// 画布宽度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 开始 context.beginPath(); // 绘制圆形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 关闭 context.closePath(); // 填充颜色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>如果使用css设置宽高，画布会按照300*150的比例进行缩放，将300*150的页面显示在400*400的容器中。
// 设置画布宽度var cx = canvas.width = 400;var cy = canvas.height = 400;使用js动态设置宽高。
建议使用HTML中的width和height，或者js动态设置宽高
创建一个canvas标签，第一步：
// 获取这个canvas的上下文对象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');方法：
辅助线绘制弧线：arcTo() 方法
语法：
// 辅助线绘制弧线arcTo(x1, y1, x2, y2, radius)arcTo()方法绘制一条弧线
代码：
// 绘制一条弧线function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动点 context.moveTo(80, 120); // 绘制线条 context.lineTo(150, 60); context.lineTo(180, 130); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; context.lineWidth=2; context.stroke(); context.beginPath(); context.moveTo(80,120); context.arcTo(150,60,180,130,50); context.strolkeStyle="rgba(255,135,0,1)"; context.stroke();}quadraticCurveTo()方法：
quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制点的坐标，x, y描述了曲线的终点坐标bezierCurveTo()方法：它是应用于二维图形应用程序的数学曲线。
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一个控制点的坐标 // cp2X, cp2Y 表示第二个控制点的坐标 // x, y表示曲线的终点坐标绘制曲线：
function draw() { // 绘制曲线 var canvas = document..getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动 context.moveTo(100,180); // 连线 context.lineTo(110,80); context.moveTo(260,100); context.lineTo(300,200); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; // 设置宽度 context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(100,180); // 绘制贝济埃曲线 context.bezierCurveTo(110,80,260,100,300,200); // 设置宽度 context.lineWidth = 3; context.strokeStyle="rgba(255,135,0,1)"; context.stroke();}var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 画布宽度200var canX = canvas.width = 200var canY = canvas.height = 200;// 开始绘制context.beginPath();// 四分之一圆context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();设置阴影，shadowBlur -context.shadowBlur = 20
gradient.addColorStop(stop,color)使用三种方法插入图像
function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // image实例 var newImg = new Image(); newImg.src='../images/dada.jpg' // 指定图像的文件地址 newImg.onload = function(){ // 绘图 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250,100, 150,200); context.drawImage(newImg, 90,80,100,100,0,0,120,120); }}在插入图像之前，需要考虑图像加载的时间，如果图像没加载完成就已经执行drawImage()方法，就不会显示任何图片。
提供了两种渐变的创建的方法：
// 创建线性渐变createLinearGradient()方法// 创建径向渐变createRadialGradient()方法设置渐变颜色和过渡方式
语法如下：
addColorStop(offset, color);function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 创建渐变对象，线性渐变 var grd = context.createLinearGradient(0,0,300,0) // 设置渐变颜色 grd.addColorStop(0, '#xxx'); // 设置颜色 grd.addColorStop(1, '#xxx'); // 设置颜色 // 将填充样式设置为线性渐变对象 context.fillStyle = grd; context.fillRect(0,0,300,80);}function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 径向渐变 var grd = context.createRadialGradient(50,50,0,100,100,90); // 设置渐变颜色以及方式 grd.addColorStop(0,'#xxx'); grd.addColorStop(1,'#xxx'); context.fillStyle = grd; context.beginPath(); // 圆形 context.arc(100,100,90,0,Math.PI*2,true); context.fill();}线帽属性：lineCap，表示指定线条的末端如何绘制值：lineCap: butt, round, square，当线条具有一定的宽度才能表现出来。
butt// 定义了线段没有线帽round// 定义了线段的末端为一个半圆形的线帽square// 定义了线段的末端为一个矩形的线帽线条的连接属性lineJoin，用于两条线条到的连接方式：
miter两条线段的外边缘一直延伸到它们相交，属性miterLimit是用来描述如何绘制两条线段的交点，是表示延伸长度和线条长度的比值。
默认为10，只有miter使用时有效
lineJoin = [value];round // 两条线段的外边缘应该和一个填充的弧结合bevel // 两条线段的外边缘应该和一个填充的三角形相交语法如下：
createPattern(image, repetitionStyle)function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var img = new Image(); // 使用Image()构造函数创建图像对象 img.src='../images/xxx' // 指定图像的文件地址 img.onload = function() { // 绘图模式 var ptrn = context.createPattern(img, 'repeat'); // 填充样式 context.fillStyle = ptrn; // 填充矩形 context.fillReat(0,0,500,200); }}移动变化：
// 移动translate(dx,dy);// 绘制function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 设置移动偏移量 context.translate(200, 200); // 绘制一个圆形 ArcFace(context);}// 绘制一个圆形function ArcFace(context) { // 绘制一个圆形边框 context.beginPath(); // 绘制圆形 context.arc(0,0,90,0,Math.PI*2,true); // 线宽 context.lineWidth=5; // 描边 context.strokeStyle='#f90'; context.stroke(); // 绘制 context.beginPath(); context.moveTo(-30, -30); context.lineTo(-30, -20); context.moveTo(30, -30); context.lineTo(30, -20); context.moveTo(-20, 30); // 曲线 context.bezierCurveTo(-20, 44, 20, 30, 30, 20); context.strokeStyle='#000'; context.lineWidth=10; context.lineCap = 'round'; // 笑脸 context.stroke();}缩放变换，语法如下：
scale(sx, sy);// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子// 示例function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContent('2d') // 移动 context.translate(200,200); // 缩放 context.scale(0.5,0.5); ArcFace(context);}旋转变换：
rotate(angle)// 旋转例子function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') context.translate(200,200); // 旋转 context.rotate(Math.PI/6); context.scale(0.5, 0.5) ArcFace(context)}矩形变形，语法如下：
transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转1. 移动translate (dx, dy)2. 缩放scale (sx,sy)3. 旋转rotate (A)TML5不仅仅是HTML规范的当前最新版本，也代表了一系列Web相关技术的总称，它把代码重复率很高的功能提取为<header>、<nav>标签等，它的核心理念是将一切新特性与原有功
能保持平滑过渡，HTML5的优势：
html5的优势
HTML5进化的重大意义还在于，它从技术层面带来了8个类别的革新：
1.语义网(Semantics)：提供了一组丰富的语义化标签。
2.离线&存储(Ofline & Storage)：HTML5 App Cache、Local Storage、Indexed DB和File API使Web应用程序更加迅速，并提供了离线使用的能力。
3.设备访问(Device Access)：增强了设备感知能力，使得Web应用在电脑、Pad、手机上均能使用。
4.通信(Connectivity)：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。
5.多媒体(Multimedia)：音频视频能力的增强是HTML5的最大突破。
6.图形和特效(3D,Graphics & Effects)：Canvas、SVG和WebGL等功能使得图形渲染更高效、页面效果更加炫酷。
7.性能和集成(Performance &Integration)：Web Worker使浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能。
8.呈现(CSS3)：CSS3可以很高效地实现页面特效，并不会影响页面的语义和性能。
HTML5以“简单至上，尽可能简化”为原则做了改进，具体介绍如下：
1.简化了DOCTYPE和字符集声明。
2.强化了HTML5API，使页面设计更加简单。
3.以浏览器的原生能力代替复杂的JavaScript代码。
4.精确定义的错误恢复机制，如果页面中有错误，也不会影响整个页面的显示。
HTML5以“用户至上”为宗旨，具体介绍如下：
1.在遇到冲突时，规范的优先级为：用户>页面作者>实现者(浏览器)>规范开发者(W3C/WHATWG)>纯理论。
2.HTML5还引入了一种新的安全模型来保证HTML5足够安全。
3.各大览器对HTML5的支持正在不断完善，越来越多的开发者尝试在项目中使用HTML5。
*请认真填写需求信息，我们会在24小时内与您取得联系。
