HTML5和HTML4的区别
新增的结构元素
- section元素—定义文档或应用程序中的一个区段，且有标题和内容。
- article元素—表示文档中的一块独立的内容
- header元素—表示页面中的一个内容区块或整个页面的标题
- nav元素—表示导航链接的部分
- footer元素—表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的名字、文档的创作日期以及创建者的联系信息。
- address元素—作者的详细联系方式，可以是邮箱、链接等。
新增的块级的语义元素
- aside元素—表示article元素的内容之外（页面或站点全局的附属信息部分，如友情链接）与article元素的内容的相关内容（主要内容的附属信息部分）。
- figure元素—表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用<figcaption>元素为figure元素组添加标题。将其从网页上移除后不会对其他内容产生影响。
- dialog元素—定义对话。
新增的行内的语义元素
- mark元素—用来在视觉上突出显示或高亮显示文字。
- time元素—表示时间或日期，也可以同时表示两者。
- datetime—机器可读部分，日期和时间中间用T隔开，时间上加上Z，表示给机器编码时使用UTC标准时间。
- pudate—表示特定的<time>是一篇<article>或整个<body>内容的发布日期。
- meter元素—表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。
- progress元素—表示运行中的进程。可以用progress元素来显示JavaScript中耗费时间的函数的进程。
新增的嵌入多媒体元素和交互性元素
- video和audio元素，分别用来插入视频和声音，在开始标签和结束标签放置文本内容可以在不支持的浏览器中显示不支持该标签的信息。
- details元素—表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用。Summary元素提供标题或图例，是details元素的第一个子元素。标题是可见的，用户单击标题时，就会显示出details。是一种替代JavaScript的方法，主要提供了一个展开/收缩区域。可选地接受open属性，来确保页面载入时该元素时可打开的。
- datagrid元素—表示可选数据的列表，通常用于显示树列表。
- menu元素—表示菜单列表，通常用于列出表单控件。
- command元素—表示命令按钮，如单选按钮、复选框及普通按钮。
新增的input元素的类型
- email类型—用于应该包含E-mail地址的输入域。
- url类型—用于应该包含URL地址的输入域。
- number类型—用于应该包含数值的输入域。
- range类型--用于应该包含一定范围内数字值的输入域。
- Data Pickers（数据检出器）
- search类型—用于搜索域。search域显示为常规的文本域。
- 日期和时间的新输入类型：
- date—选取日、月、年。
- month—选取月、年。
- week—选取周和年。
- time—选取时间（小时和分钟）。
- datetime—选取时间、日、月、年（UTC时间）。
- datetime-local—选取时间、日、月、年（本地时间）。
废除的元素
- 能使用CSS代替的元素—basefont、big、center、font、s、strike、tt、u等。
- 不在使用frame框架，只支持iframe框架，废除了frameset、frame和noframes。
- 只有部分浏览器支持的元素：applet（embed代替）、bgsound（audio代替）、blink、marquee。
全局属性
所谓全局属性，是指可以对任何元素都使用的属性。
- contentEditable属性—表示该元素中的内容允许编辑，指定true、false，不指定为inherit，由inherit状态决定。
- designMode属性—指定整个页面是否可以编辑。该属性只能在JavaScript脚本中被编辑修改。值取值有on、off。
- hidden属性—布尔类型属性。
- spellcheck属性—布尔型，告诉浏览器检查元素的拼写和语法。
- tabindex属性
CSS
属性之间用分号隔开；
属性的值多余一个值用引号括起来。
JavaScript
Canvas绘制图形
在网页上使用canvas元素时，它会创建一块矩形区域，默认宽为300像素，高为150像素。
创建：
<canvas id="djx" style="border:1px solid #cccccc;" width="200px" height="200px"></canvas>
定义一个id来获取对canvas对象的访问权，然调用canvas对象的getContent方法，同时串入使用的canvas类型，目前唯一可用的 就是传入一个“2d”。
具体代码：
var canvas = document.getElementById("djx");
var context = canvas.getContext("2d");
填充与绘制边框：
context.fill(); à填充
context.stroke();à绘制边框
绘制矩形
具体代码：
var canvas = document.getElementById("djx");
var context = canvas.getContext("2d");
context.fillStyle="#FF0000";
context.strokeStyle ="red";
context.lineWidth="1";
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
解释：
1、var canvas = document.getElementById("djx"); --得到canvas元素。
2、var context = canvas.getContext("2d");--获得图形上下文对象，同时传入使用的canvas类型，“2d”。
3、context.fillStyle="#FF0000";--设定填充图形的样式，设置填充的颜色。（填充是指填满图形内部）
4、context.strokeStyle ="red";--设定图形边框的样式，设置边框的颜色。（只绘制图形的边框）
5、context.lineWidth="1";--指定线宽，绘制的直线的宽度。
6、context.fillRect(x,y,width,height);--绘制矩形，填充矩形。x指矩形起点的横坐标，y指矩形起点的纵坐标，width指矩形的宽，height指矩形的高。
7、context.strokeRect(x,y,width,height);--绘制矩形，绘制矩形边框。x指矩形起点的横坐标，y指矩形起点的纵坐标，width指矩形的宽，height指矩形的高。
绘制圆形
要绘制其他图形，需要使用路径。
具体代码：
context.beginPath();
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
context.closePath();
context.fillStyle="#FF0000";
context.fill();
解释：
1、context.beginPath();--开始创建路径
2、context.arc(x,y,radius,startAngle,endAngle,anticlockwise);--创建圆形路径，使用arc方法，该方法有6个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。（绘制半径和弧时指定的参数为开始弧度和结束弧度（0~Math.PI*2），若习惯用角度，var radius = degrees*Math.PI/180）
3、context.closePath();--创建路径完成后，关闭路径。
4、context.fillStyle="#FF0000";
5、context.fill();--设定绘制样式，并进行圆形绘制。
其他绘制图像用到的方法
moveTo()(x,y) :不绘制，只是将当前位置移动到新的目标坐标（x，y）；
lineTo（x,y）：不仅将当前位置移动到新的目标坐标（x,y），而且还在两个坐标之间画一条直线。
贝塞尔和二次方曲线
贝塞尔曲线可以是二次或三次方的形式。
方法：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
该方法将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。
有6个参数，需要两个控制点，cp1x为第一个控制点的横坐标,cp1y为第一个控制点的纵坐标,cp2x为第二个控制点的横坐标,cp2y为第二个控制点的纵坐标,x为贝塞尔曲线的终点横坐标，y为贝塞尔曲线的终点纵坐标。
二次样条曲线
方法：quadracticCurveTo(cp1x,cp1y,x,y);
透明度与线型Line styles
透明度：
方法：context.globalAlpha=value；
解释：value的取值范围为0.0（完全透明）~1.0（完全不透明，默认值）。
线型：
方法：context. lineWidth =value；
属性
1、lineWidth = value；--绘线的粗细，属性值必须为正数，默认值是1.0
2、lineCap = type;--决定了线段端点的显示的样式。有三种取值：
- butt：默认
- round：端点处加上了半径为一半线宽的半圆
- square：端点处加上了等宽且高度为一半线宽的方块
3、lineJoin = type;--决定了 图形中两段线段连接处所显示的样子。有三种取值：
- round
- bevel
- miter
4、miterLimit = value;--设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果就会变成bevel。
绘制渐变图形
方法：
1、var lingrad = context.creatLinearGradient(xStart,yStart,xEnd,yEnd);-- 绘制线性渐变
var radgrad = context.creatRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); -- 绘制径向渐变—径向渐变指的以圆心沿着圆形的半径方向向外进行扩散的渐变方式。
--创建一个渐变对象。xStart为渐变起始点的横坐标，xEnd为渐变结束点的横坐标，radiusStart为开始圆的半径。
2、lingrad.addColorStop(offset,color);
lingrad.addColorStop(offset,color);
lingrad.addColorStop(offset,color);
--定义渐变的颜色。Offset为所设定的颜色离开渐变起点的偏移量，取值0（起始点）~1（结束的）之间的浮点值。
3、context.fillStyle = lingrad;--定义渐变后只是保存在内存中，不会画出任何东西。
- context.fillRect(x,y,width,height);--绘制图形
绘制变形图形
平移：context.translate(x,y)
缩放：context.scale(x,y)
旋转：context.rotate(angle)(单位deg)
倾斜：context.skew(Xangle,Yangle) (单位deg)
裁剪：context.clip()—先创建路径，绘制裁剪图形，路径创建完成后进行裁剪。
CSS中：(要进行浏览器适配)
2D：
transform： translate(x,y);
transform： scale(x,y);
transform ：rotate(angle)(单位deg)
transform ：skew(Xangle,Yangle) (单位deg)
3D：
transform ：rotateX(angle)
transform ：rotateY(angle)
浏览器适配：
-webkit-transform:translate(100px,100px);/*chorme safari*/
-ms-transform:translate(100px,100px);/*IE*/
-o-transform:translate(100px,100px);/*opera*/
-moz-transform:translate(100px,100px);/*firefox*/
组合图形和绘制阴影
组合：
方法：context.globalCompositeOperation = type;
解释：决定了两个有重叠部分图形的显示形式。
绘制阴影：
context.shadowOffsetX ---阴影的横向位移量
context. shadowOffsetY ---阴影的纵向位移量
context. shadowBlur---阴影的模糊范围
context.Color ---阴影的颜色
绘制图像
方法：
image = new Image（）；
image.src= “”;
image.onload = function(){
context.drawImage (image,x,y,width,height);
}
方法：
- drawImage(image,x,y)
第一个出纳室可以是img元素，一个video元素，或JavaScript中的image对象，使用该参数代表的实际对象来装载图像文件，x，y为绘制时该图像在画布中的起始坐标。
- drawImage(image,x,y,width,height)
width height 为绘制图像的大小
- drawImage(image,sx,sy, sWidth,sHeight,dx,dy,dWidth,dHeight)
sx sy 表示源图像的被复制区域在画布中的起始坐标
sWidth,sHeight 表示被复制区域的宽度和高度
dx,dy 表示复制后的目标图像在画布中的起始坐标
dWidth,dHeight 表示复制后的目标图像的宽高
该方法可以局部区域进行处理。
图像平铺：
context.creatPattern(image,type)
type:
no-repeat:不平铺
repeat：全方向平铺
repeat-x：x方向平铺
repeat-y：y方向平铺
绘制文字
方法：
context.fillText(text,x,y[,maxWidth]);--填充方式绘制字符串
context.strokeText(text,x,y[,maxWidth]); --轮廓方式绘制字符串
解释：
text 绘制的文本内容
x ， y 绘制文字的起点坐标
maxWidth 可选参数，表示显示文字的最大宽度，防止文字溢出。
文件的保存
方法：window.location = canvas.toDateURL(“image/jpeg”);
计时器—设计动画
计时方法；
- setInterval(function(){调用函数}，毫秒) –间隔指定毫秒数不停地执行指定的代码
clearInterval()—停止setInterval()方法执行的函数代码
- setTimeout(function(){调用函数}，毫秒)—暂停指定的毫秒数后执行指定的代码
cleaTimeout ()—停止setTimeout()方法执行的函数代码