HTML5新特性
1.Canvas
1.1矩形和线条的绘制
通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas可以使用clearRect。上述三个方法的参数相同：x,y, width, height。前两个参数设定(x,y) 坐标，后两个参数设置矩形的高度和宽度。可以使用lineWidth属性改变线条粗细。
context.fillStyle = ‘#00f’;//blue context.strokeSyle = ‘#f00’;//red context.lineWidth = 4; //draw some rectangles context.fillRect(0,0,150,50); context.strokeRect(0,60,150,50); context.clearRect(30,25,90,60); context.strokeRect(30,25,90,60);
路径：
//绘制三角形 context.fillStyle = ‘#00f’;//blue context.strokeSyle = ‘#f00’;//red context.lineWidth = 4; context.beginPath();//开始绘制 context.moveTo(10,10);//(x,y)坐标 context.lineTo(100,10); context.lineTo(10,100); context.lineTo(10,10); context.fill(); context.stroke(); context.closePath();//结束绘制
1.2插入图片
drawImage 方法允许在 canvas 中插入其他图像。( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法可以有3个、5个或9个参数。
3个参数：最基本的 drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
context.drawImage(img_elem,dx,dy);
5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (改变图像大小)。
context.drawImage(img_elem,dx,dy,dw,dh);
9个参数：最复杂 drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
context.drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
1.3像素操作
2D Context API 提供了三个方法用于像素级操作：createImageData,getImageData, 和putImageData。ImageData对象保存了图像像素值。每个对象有三个属性:width, height 和data。data 属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。
· 绘制红色矩形
var imgd = context.creatImageData(50,50);
var pix = imgd.data;
for(var i=0;n<pix.length,i<n;i+=4){
pix[i]=255;
pix[i+3]=127;
}
Context.putImageData(imgd,0,0);
· 颜色反转滤镜
var imgd = context.getImageData(x,y,width,height);
var pix = imgd.data;
for(var i=0,n=pix.length;i<n;i+=4){
pix[i]=255-pix[i];
pix[i+1]=255-pix[i+1];
pix[i+2]=255-pix[i+2];
}
context.putImageDate(imgd,x,y);
1.4文字写入
context对象可以设置以下 text 属性：
font：文字字体，类似于CSS的font-family；
textAlign：文字水平对齐方式。可取属性值: start，end，left，right，center。默认值:start。
textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic
· 有两个方法可以绘制文字：
fillText：绘制带 fillStyle 填充的文字。
strokeText：绘制只有 strokeStyle 边框的文字。两者的参数相同：
要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。
· 阴影效果：
Chrome浏览器不支持，Firefox支持。
Shadows API的属性为：
shadowColor：阴影颜色。其值和 CSS 颜色值一致。
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop 的高斯模糊滤镜相同。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。
例子：
context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=4; context.shadowColor=‘rgba(255,0,0,0.5)’; context.fillStyle=‘#00f’; context.fillRect(20,20,150,100);
1.5颜色渐变
除了CSS 颜色，fillStyle和strokeStyle 属性可以设置为CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。
var gradient1 = context.creatLinearGradient(sx,sy,dx,dy);//开始点和结束点
//变化是从0至1
gradient1.addColorStop(0,‘#f00’);//red
gradient1.addColorStop(0.5,‘#ff0’);//yellow
gradient1.addColorStop(1,‘#00f’);//blue\
//创建圆形的渐变需要指明圆的中心点，也包括起始和结束，以及圆的半径
var gradient2 =context.creatRadialGradient(sx,sy,sr,dx,dy,dr);
//增添颜色和线性的一样
2.Form
2.1type=number
type=number的HTML表单元素是可以用按键的方式改变文本框中的值。
人数：
<input type=”number” value=”1”/>
2.2type=range
type=range意为可以选择某个值的区域范围。
<input type=”range” value=”50”/>
2.3type=data以及其它时间控件
type=data意为时间选择器控件。
选择日期：<input type=”data”value=”2011-11-14”>
2.4type=color
type=color意为颜色选择器控件。
选取颜色：<input type=”color”value=”#34538b”>
2.5type=search
type=search意为搜索功能。
2.6datalist元素和list属性
datalist是实现数据列表下拉效果的。
<input type="text" list="mydata" placeholder="热门电影排行"/>
<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
3.视频与音频
3.1Video
Ogg是带有Theora视频编码和Vorbis音频编码的文件；
MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件；
WebM是VP8视频编码和Vorbis音频编码的文件；
HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。
Safari和IE9预期支持H.264格式的视频，Firefox和Opera坚持开源的Theora和Vorbis格式，所以需要提供两种格式。
Video支持三种视频格式：Ogg，MPEG4，WebM。
例：
<video controls=”preload”>
//此属性表示视频在页面加载时进行加载，预备播放。如果设置为”autoplay”，就忽略该属性。
//controls用于显示如播放按钮的控件
<source src=”cohagenPhoneCall.ogv” type=”video/ogg;codecs=’vorbis,theora’”/>
<source src=”cohagenPhoneCall.mp4”
type=”vide0/mp4; codecs=’avc1.42E01E,mp4a.40.2’”/>
<p>你的浏览器太旧了。<a href=”cohagenPhoneCall.mp4”>下载这个视频。</a></p>
</video>
注：
· 技术上是不需要设置type属性的，但是不这样做的话，浏览器就会自己去寻找类型，为了节省一些带宽，最好还是声明下。
· 不是所有的浏览器都支持HTML5，所以在资源元素的下面，可以提供一个下载链接或者嵌入视频的flash版本替代，这取决于个人。
· 如果想要所有的浏览器都支持HTML5标签，只要链接一个js文件就可以。在页面的头部或底部写上：
<script src=” http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>
</script>
对于HTML部分，使用：
<video src=”video.mp4” width=”320” height=”240”controls=”autobuffer”>
</video>
3.2Audio
无需再依赖第三方产检区渲染音频了，因为HTML5提供了<audio>元素。
以MOozilla核心的Firefox浏览器只支持.ogg文件，webkit核心的浏览器支持.mp3扩展，safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。
Audio支持三种音频格式：Ogg Vorbis，MP3，Wav。
例：
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg”/>
<source src=”file.mp3”/>
</audio>
//标签的属性与video相同。没有height与width。
4.Web存储
4.1localStorage
localStorage可以长期存储数据而没有时间限制。
4.2sessionStorage
SessionStorage不能长期存储数据，数据会随着浏览器的关闭而删除。
5.HTML5的特征
5.1.1新的Doctype
<!DOCTYPE html>
5.1.2图形元素
<img src=”path/to/image” alt=”About image”>
<p>Image of Mars</p>
文字裹在p的标签中，与img标签各行其道，让人很难联想到这就是标题。HTML5通过采用figure元素进行改正。当和figcaption组合使用时，就能够语义化的联想到这就是图片相对应的标题。
<figure>
<img src=”path/to/image” alt=”About image”/>
<figcaption>
<p>This is an image of somethinginteresting</p>
</figcaption>
</figure>
5.1.3<small>重新定义
<small>元素不再被用来创建靠近logo且相关的副标题。在html5中，<small>被重新定义，指小字。
5.1.4脚本（scripts）和链接（links）无需type
<link rel=”stylesheet” href=”path/to/stylesheet.css”type=”text/css”/>
<script type=”text/javascript”src=”path/to/script.js”></script>
在html5中：
<link rel=”stylesheet”href=”path/to/stylesheet.css”>
<script src=”path/to/script.js”></script>
5.1.5引号问题
Html5不是XHTML，所以可以不需要引号。
<p class="myclass" id=someID>Startthe reactor
但是如果倾向结构化，还是需要把引号加上的。
5.1.6内容可以编辑
contenteditable元素顾名思义就是允许用户可以编辑元素内容包含的任意文本。
<ul contenteditable=” true”>
<li>hello</li>
<li>Beijing</li>
<li>trs</li>
</ul>
5.1.7email输入（input）
在表单输入框应用名为”email”的type属性可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。但是较旧的浏览器不识别，它们会简单的退回到普通文本框。
<form action=”” method=”get”> <label for=”email”>邮箱：</label><input id=”email”name=”email” type=”email”/> <button type=”submit”>确定</button> </form>
5.1.8占位符（placeholders）
placeholders意为文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字就会消失；失去焦点时如果内容为空，提示文字又出现。在表单控件里面显示的提示性文字就是占位符。
如果是以前需要一些javascript代码实现占位符的操作，而html5却使得其非常轻松：
<label for=”email”>邮箱：</label>
<input id=”email” type=”email” placeholder=”[email protected]”size=”26”/>
一般webkit核心的浏览器支持此特性，如chrome、safari。
5.1.9本地存储（localStorage）
传统的HTML使用的是众所周知的cookie，各种浏览器都支持，直接用js就可以调用，很方便。但是传统的cookie也有它本身的缺陷和不足。比如存储空间小，每个站点大小限制在4kb左右，又有时间期限，而且在请求网页的时候cookie会被附在每个HTTP请求的header中，所以无形中增加了流量。HTTP请求中cookie是明文传递的，所以存有安全性问题，入股用SSL（Secure Sockets Layer 安全套接层；是为网络通信提供安全及数据完整性的一种安全协议）通道另当别论。cookie也很容易受到跨站较稳的攻击。在一个链接后面加上”?cookie=document.cookie”就可以轻易获得用户的cookie信息。HTML5的本地存储也可能会有跨站脚本攻击XSS（cross site script,跨站脚本攻击。恶意攻击者往Web中插入恶意html代码，当用户浏览该页时，嵌入其中web里面的html代码会被执行。）的问题。
HTML5的本地存储可以存储5M大小的数据，甚至还多。它主要有四种：localStorage,sessionStorage,webSQL,indexDB
例子：
//HTML代码：
<ul id=”edit” contenteditable=” true”>
<li><li>
</ul>
//JS代码：
var edit=document.getElementById(edit);
edit.onblur=function(){
localStorage.setItem(“tododata”, this.innerHtml);
};
If(localStorage.getItem(“tododata”)){
Edit.innerHTML = localStorage.getItem(“tododata”);
}
5.2.0语义的Header和Footer
以往：
<div id=”header”>
…
</div>
<div id=”footer”>
…
</div>
有了HTML5，可直接替换成;
<header>
…
</header.
<footer>
…
</footer>
5.2.1IE和HTML5
所有元素有个默认的inline的display。为了确保所有新的元素都以block正确的渲染，需要这样定义：
header,footer,article,section,nav,menu,hgroup{
display:block;
}
但是由于IE不识别某些标签，如header，就会忽略这些样式，所以需要创建元素：
document.creatElement(“artical”);
document.creatElement(“footer”);
document.creatElement(“header”);
document.creatElement(“nav”);
document.creatElement(“menu”);
document.creatElement(“hgroup”);
另解：
<!—[ if IE]>
<script src=” http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->
5.2.2文档某一部分的信息（hgroup）
使用hgroup元素可以将标题组合在一起。
<header>
<hgroup>
<h1>recall fan page</h1>
<h2>only for people whowant the memory of a lifetime.</h2>
</hgroup>
</header>
5.2.3必要的属性（required attribute）
<input type=”text” name=”someInput” required>
或者使用更结构化的方法:
<input type=”text” name=”someInput”required=”required”>
如果”someInput”文本框是空白，表单就不会被提交。
<form action=”” method=”get”>
<lable for=”name”>姓名：</label>
<input id=”name” name=”name” type=”text”placeholder=”trs” required=”required”/>
<button type=”submit”>提交<button>
</form>
如果input里面内容是空白，在表单提交的时候，文本框的框会高亮显示，但是好像只是在chrome里有此效果。
5.2.4autocomplete属性
autocomplete属性规定form或者input域应该拥有自动完成的功能。
它使用于<form>标签，以及以下类型的<input>标签：text，search,url,telephone,email,password,datapickers,range以及color。
<form action=”” method=”get” autocomplete=”on”>
<label for=”email”>邮箱：</label>
<input type=”email” name=”email”autocomplete=”off”/>
</form>
5.2.5正则表达式
使用正则表达式能够轻松的验证一个特定的文本。
<form action=”” method=”get”>
<label for=”username”>姓名：</label>
<input id=”username ” name=”username” type=”text”placeholder=”4-10个英文字母”
Pattern=”[A-Za-z]{4,10}”required=”required” autofocus/>
<button type=”submit”>提交</button>
</form>
在[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。此特性好像只在chrome浏览器中支持。
5.2.6属性支持检测
利用优秀的Modernizr库（ http://www.modernizr.com/ ）可以检测浏览器是否支持某些属性。
只要创建和分析这些元素，就可以确定浏览器的能力。事实上，这是一种确定浏览器兼容的常用方法。比如确定pattern属性，在javascrip中添加一小段代码：
alert(‘pattern’ in document.creatElement(‘input’));//Boolean
//创建了一个新的input元素，并确定了里面的pattern属性浏览器是否支持。
也可以：
<script>
If(!’pattern’ in document.creatElement(‘input’)){
//做操作
}
</script>
5.2.7mark元素（Mark Element）
<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。
5.2.8div
div应该用在没有更好的元素的时候。比如需要包裹一段代码块在对内容定位处理的包装单元内。但是如果是文章，最好用<artical>，如果是链接列表，就用<nav>。
5.2.9小知识
· SVG（scalable vector graphics）不是HTML5，它是基于可扩展标记语言（XML），用于描述二维矢量图的一种图形格式。
· Geolocation不是HTML5，它意味地理位置，通过HTML5能够使web应用程序确定位置并提供更多相关信息。
· 检索自定义属性的价值：
5.3.0data属性
Html代码部分：<div id=”myDiv”data-custom-attr=”My Value”>lady嘎嘎</div>
检索：
var theDiv = document.getElementById(“myDiv”);
var attr = theDiv.getAttribute(“data-custom-attr”);
alert(attr);//My Value
· 此属性在CSS中的应用
CSS代码:
.data_custom{display:inline-block;position:relative;}
.data_custom:hover{color:ransparent;}
.data_custom:hover:after{
content:attr(data-hover-response);
color:black;
position:absolute;
left:0;
}
HTML代码：
<a class=”data_custom”data-hover-response=”我说过不要碰我！”href=”#”>不要碰我，嘎嘎</a>
注：浏览器支持伪类after一季content的attr的前提下。
5.3.1使用区域input创建滑块
HTML5引进了range类型的input。
<input type=”range”>,它可以接收min，max，step和value属性等。
· 标签
<form method=”post”>
<h4>音量控制</h4>
<input type=”range” name=”range” min=”0” max=”10” step=”1”value=””/>
<output name=”result”></output>
</form>
· CSS
使用:before和:after告知用户指定的最大值和最小值
input {font-size:14px;font-weight:bold;}
input[type=range]:before{content:attr(min):padding-right:5px;}
input[type=range]:after{content:attr(max):padding-left:5px}
output{
display:block;
font-size:5.5em;
font-weight:bold;
}
· JavaScript
l 检测浏览器是否能够识别rangeinput，如果不识别就显示提示信息；
l 当用户移动滑块的时候，动态的改变output的值；
l 监听，当用户离开滑块的时候，就插入值，同时本地存储；
l 然后当刷新页面的时候，选择的区域和值会自动地设置成最后一次的选择。
(function(){
var f =document.forms[0],//返回对象中对所有文档的引用
range=f[‘range’],
result=f[‘result’],
cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;
//检测浏览器是否足够酷
//识别range input
var o =document.creatElement(‘input’);
o.type=’range’;
if(o.type==’text’)
alert(‘不好意思，你的浏览器还不够酷，试试最新的chrome浏览器吧！’);
//设置初始值
//无论是否本地存储了，都设置为5
range.value=cachedRangeValue;
result.value=cachedRangeValue;
//当用户选择了一个值，更新本地存储
range.addEventListener(“mouseup”,function(){
alert(“你的选择是：”+range.value+”我现在正在用本地存储保存此值。在浏览器上刷新验证。”);
localStorage?(localStorage.rangeValue=range.value):alert(“数据保存到了数据库或是其它地方。”);
}， false);
//滑动显示选择的值
range.addEventListner(“change”,function(){
result.value=range.value;
}, false);
})();
元素。以MOozilla核心的Firefox浏览器只支持.ogg文件，webkit核心的浏览器支持.mp3扩展，safari不承认.ogg,它会跳过并移到MP3版本。所以需要创建两个版本的音频。Audio支持三种音频格式：Ogg Vorbis，MP3，Wav。例：//标签的属性与video相同。没有height与width。4.Web存储Edit4.1localStorageEditlocalStorage可以长期存储数据而没有时间限制。4.2sessionStorageEditSessionStorage不能长期存储数据，数据会随着浏览器的关闭而删除。5.HTML5的特征Edit5.1.1新的DoctypeEdit5.1.2图形元素Edit
Image of Mars
文字裹在p的标签中，与img标签各行其道，让人很难联想到这就是标题。HTML5通过采用figure元素进行改正。当和figcaption组合使用时，就能够语义化的联想到这就是图片相对应的标题。This is an image of something interesting
5.1.3 重新定义Edit 元素不再被用来创建靠近logo且相关的副标题。在html5中， 被重新定义，指小字。5.1.4脚本（scripts）和链接（links）无需typeEdit在html5中：5.1.5引号问题EditHtml5不是XHTML，所以可以不需要引号。Start the reactor但是如果倾向结构化，还是需要把引号加上的。5.1.6内容可以编辑Editcontenteditable元素顾名思义就是允许用户可以编辑元素内容包含的任意文本。
- hello
- Beijing
- trs