Web基础之HTML5
+概述：HTML5是W3C 与 WHATWG 合作的结果。
+新特性：
1）canvas：用于绘画；
2）video/audio：用于媒体播放；
3）web离线存储；
4）新的特殊内容元素：article、footer、header、nav、section
5）新的表单控制项：calendar、date、time、email、url、search
+ <video src=「a.mp4」 controls=「controls」>
用于播放视频，支持的视频格式有：Ogg,MPEG4,WebM。但不是所有浏览器支持；
* 属性：
-> autoplay=「autoplay」：视频在就绪后马上播放；
-> controls=「controls」:显示控制项栏，功能包括：播放、暂停、定位、音量、全屏切换、字幕（如果要可用）、音轨（如果可用）
->width/height：播放器宽高
->loop=「loop」:视频在结束后重新开始
->preload=「preload」：视频在页面载入时进行载入，并预备播放（若使用了autoplay，则无效）
->src=「」：要播放的url;
* Dom操作video的方法及事件
方法：play() pause() load() canPlayType
属性：currentSrc currentTime videoWidth/videoHeight duration ended error paused muted seeking volume width/height
事件：play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata
+ <audio src="song.ogg" controls="controls">
播放音频：
* 属性：同Video
+ Drag/drop
用于对元素的拖放，是HTML5的标准组成，任何元素都能拖放。
* 使用步骤：
1）设置元素为可拖放。如：<img draggable="true" />
2)拖动什么。规定当元素拖动时的回调方法ondragstart和setData()。
<img id="drag1" src="img_logo.gif" draggable=「true" ondragstart=「drag(event)」/>
…
function drag(ev){ ev.dataTransfer.setData(「Text",ev.target.id); }
3）放到何处。在ondragover事件中规定放置何处。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。通过调用 ondragover 事件的 event.preventDefault() 方法；
4）进行放置。ondrop，当放置被拖元素时，会发生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
canvas：画布，使用JavaScript在网页上绘制图像；
1）创建：<canvas id="myCanvas" width_="200" height=「100"></canvas>
2）通过javaScript绘制：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
【cxt下的方法API类似于java下的Canvas的方法API】
+ SVG(Scalable Vector Graphics)：可伸缩矢量图形，在放大或改变尺寸的情况下其图形质量不会有损失，用于定义用于网路的基于矢量的图形，可用xml来定义。
1）与其他图像如jpg/gif的优势：
—> 可通过文本编辑器来创建和修改；
—> 可被搜索、索引、脚本化或压缩；
—> 可伸缩的；
—> 可在任何的解析度下被高质量地列印；
—> 可在图像质量不下降的情况下被放大；
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
stylex="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
【注：Canvas与SVG的区别】
Canvas：
—> 依赖解析度
—> 不支持事件处理器
—> 弱的文本渲染能力
—> 能够以 .png 或 .jpg 格式保存结果图像
—> 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
—> 不依赖解析度
—> 支持事件处理器
—> 最适合带有大型渲染区域的应用程序（比如谷歌地图）
—> 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
—> 不适合游戏应用
地理定位Geolocation:
Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
使用 ：getCurrentPosition() 方法来获得用户的位置。
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition); }
else{
x.innerHTML="Geolocation is not supported by this browser.";}
}
web存储
两种新方法：
1）localStorage：没有时间限制的数据存储
2）sessionStorage：针对一个session的数据存储；当用户关闭浏览器后，数据会被删除。
【注：这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对伺服器的请求来传递，这使得 cookie 速度很慢而且效率也不高。】
<script type="text/javascript">
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else {
localStorage.pagecount=1;}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
Application Cache:应用程序缓存。
* 三个优势：
->离线浏览；
->速度：已缓存资源载入更快；
->减小伺服器负载：浏览器将只从伺服器下载更新过或更改过的资源；
1）manifest：在html标签中包含manifest标签即可，<html manifest=「demo.appcache">
【注意：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）；manifest 文件的建议的文件扩展名是：」.appcache」；manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 伺服器上进行配置。】
包含三个部分：
1）CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2）NETWORK - 在此标题下列出的文件需要与伺服器的连接，且不会被缓存
3）FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
+ Web Worker：后台任务。是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
1)创建：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
2）监听：w.onmessage=function(event){document.getElementById(「result").innerHTML=event.data;};
3）终止：w.terminate();
【注意：由于web workder位于外部文件中，无法以访问：window对象、document、parent对象】
+ server-sent event：伺服器发送事件，允许网页获得来自伺服器的更新。
* 单向消息传递。除了IE外都支持。
1）创建一个EventSource对象，然后规定发送更新的页面的url;
2）每接收一次更新，就会发生onmessage事件
3）在onmessage事件中取出数据。
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br />";};
注意：伺服器端须将Content-Type设置为text/event-stream】
其他事件：
—> onopen：当与伺服器的连接被打开
—> onerror：当错误发生
+ Input元素新增类型：
—> email：用于应该包含 e-mail 地址的输入域。
—> url：应该包含 URL 地址的输入域。
—> number：用于应该包含数值的输入域(包括max、min、step、value属性)。
—> range：滑动条，包含一定范围内数字值的输入域。(包括max、min、step、value属性)
—> Date pickers：多个可供选取日期和时间的新输入类型：date(日/月/年)、month、week、time(时/分)、datetime(日/月/年/时/分)、datetime-local
—> search：用于搜索域
—> color:
+ Input/Form新增属性：
—> autocomplete：规定form或input域应该拥有自动完成功能，适用元素<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color
<form action="demo_form.asp" method="get" autocomplete=「on">
<input type="email" name="email" autocomplete="off" />
—> autofocus：规定在页面载入时，域自动获得焦点。
<input type="text" name="user_name" autofocus="autofocus" />
—> form：规定输入域所属的是一个或个全表单
<input type="text" name="lname" form="user_form" />
—> form overrides(formaction,formenctype,formmethod,formtarget)：即重写这些属性。适用于<input>下的：submit和image,如:
<input type="submit" formaction="demo_admin.asp" value="sure" />
—> height/width:规定用于 image 类型的 input 标签的图像高度和宽度。
—> list：规定输入域的 datalist。datalist 是输入域的选项列表。
—> min/max/step：用于为包含数字或日期的 input 类型规定限定（约束），适用于<input>下的：data pickers、number、range
—> multiple：规定输入域中可选择多个值。适用于<input>下的：email和file
—> pattern(regexp)：规定用于验证 input 域的模式（pattern）。适用于<input>下的：text, search, url, telephone, email 以及 password。
—> placeholder：提供一种提示（hint），描述输入域所期待的值.
—> required：规定必须在提交之前填写输入域（不能为空）。
<input type="text" name="usr_name" required="required" />
—> novalidate：规定在提交表单时不应该验证 form 或 input 域。适用于<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate=「true">
+ Form元素新增元素：
—> datalist：输入框下带一个选项列表，列表是通过 datalist 内的 option 元素创建的。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
【注意：option 元素永远都要设置 value 属性。】
—> keygen：密钥对生成器（key-pair generator）,是提供一种验证用户的可靠方法，当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到伺服器。公钥可用于之后验证用户的客户端证书（client certificate）。但各浏览器支持度都不是很好。
—> output：用于不同类型的输出，比如计算或脚本输出。
推荐阅读：
