Html5总结
HTML 的上一个版本（HTML4）诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 诞生于2008年，目前仍处于完善之中，当前大部分现代浏览器已经实现了某些HTML5的功能；
一.DOCTYPE definition的改变：
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
HTML5:
<!DOCTYPE html>
二.META definition的变化：
HTML4:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
HTML5:
<meta charset="utf-8">
三.增加了一些用于页面布局新的标签：header footer section article aside nav...
四.增加了一些新的选择器（类似于Jquery）：
现在可以像jqyery一样，适用class/伪类进行元素的选择了
View Code
var elements = document.querySelectorAll("#result td"); var element = document.querySelector("input.error") ; var hoverdTd = document.querySelector("td:hover");
五.关于input的一些变化：
以前作为表单中的控件，必须被form标签包裹，现在可以放到表单外面啦，而且一个控件还可以属于多个表单哦，同时可以指定提交方式(get/post)，在input中设定的method属性会覆盖form的method属性值。
<input type="submit" name="s1" formaction="s1.jsp" formmethod="post"> <input type="submit" name="s2" formaction="s2.jsp" formmethod="get">
以前input标签是可以不闭合的，现在增加了datalist标签，可以配合input标签来使用，功能类似于输入框与选择框的合体，既可以选择也可以输入，但是此功能只有firefox和Opera两个浏览器支持
View Code
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
详细变化列表：
| 属性 | 值 | 描述 |
|---|---|---|
| autocomplete |
|
规定是否使用输入字段的自动完成功能。 |
| autofocus | autofocus |
规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） |
| form | formname | 规定输入字段所属的一个或多个表单。 |
| formaction | URL |
覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） |
| formenctype | 见注释 |
覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） |
| formmethod |
|
覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 |
| formtarget |
|
覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） |
| height |
|
定义 input 字段的高度。（适用于 type="image"） |
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
| max |
|
规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 |
| min |
|
规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 |
| multiple | multiple | 如果使用该属性，则允许一个以上的值。 |
| pattern | regexp_pattern |
规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| required | required | 指示输入字段的值是必需的。 |
| step | number | 规定输入字的的合法数字间隔。 |
| width |
|
定义 input 字段的宽度。（适用于 type="image"） |
| type |
|
输入email的控件 |
六.Canvas
Canvas，画布，Html5最强大的功能之一,
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。具体应用可以参考玩转html5<canvas>画图,写的非常完整，在此不再多说
七.SVG(Scable Vector Graphics)
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG VS Canvas
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
| Canvas | SVG |
| 依赖分辨率 | 不支持事件处理器 |
| 弱的文本渲染能力 | 能够以 .png 或 .jpg 格式保存结果图像 |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不依赖分辨率 |
| 支持事件处理器 | 最适合带有大型渲染区域的应用程序（比如谷歌地图） |
| 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） | 不适合游戏应用 |
