html5
HTML5 建立的规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5 中的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
视频格式
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：
<video> 标签的属性
|
属性 |
值 |
描述 |
|
autoplay |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
|
controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
height |
pixels |
设置视频播放器的高度。 |
|
loop |
loop |
如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
|
preload |
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
src |
url |
要播放的视频的 URL。 |
|
width |
pixels |
设置视频播放器的宽度。 |
HTML5 <video> 元素拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：
|
方法 |
属性 |
事件 |
|
play() |
currentSrc |
play |
|
pause() |
currentTime |
pause |
|
load() |
videoWidth |
progress |
|
canPlayType |
videoHeight |
error |
|
|
duration |
timeupdate |
|
|
ended |
ended |
|
|
error |
abort |
|
|
paused |
empty |
|
|
muted |
emptied |
|
|
seeking |
waiting |
|
|
volume |
loadedmetadata |
|
|
height |
|
|
|
width |
|
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
audio 元素能够播放声音文件或者音频流。
audio 元素支持三种音频格式：
|
|
IE 9 |
Firefox 3.5 |
Opera 10.5 |
Chrome 3.0 |
Safari 3.0 |
|
Ogg Vorbis |
|
√ |
√ |
√ |
|
|
MP3 |
√ |
|
|
√ |
√ |
|
Wav |
|
√ |
√ |
|
√ |
<audio src="song.ogg" controls="controls">
</audio>
control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。
<audio> 标签的属性
|
属性 |
值 |
描述 |
|
autoplay |
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
loop |
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
preload |
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
src |
url |
要播放的音频的 URL。 |
为了使元素可拖动，把 draggable 属性设置为 true
ondragstart 和 setData()规定当元素被拖动时，会发生什么。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
当放置被拖数据时，会发生 drop 事件。
drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
canvas 元素用于在网页上绘制图形。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 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>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
x=e.clientX;
y=e.clientY;
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
HTML5 支持内联 SVG。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG优点
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<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"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
HTML5 Geolocation（地理定位）用于定位用户的位置。
使用 getCurrentPosition() 方法来获得用户的位置。
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
错误代码：
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
|
coords.latitude |
十进制数的纬度 |
|
coords.longitude |
十进制数的经度 |
|
coords.accuracy |
位置精度 |
|
coords.altitude |
海拔，海平面以上以米计 |
|
coords.altitudeAccuracy |
位置的海拔精度 |
|
coords.heading |
方向，从正北开始以度计 |
|
coords.speed |
速度，以米/每秒计 |
|
timestamp |
响应的日期/时间 |
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
getCurrentPosition() 方法 - 返回数据
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
- localStorage.lastname
- localStorage.pagecount
- sessionStorage.lastname
- sessionStorage.pagecount
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
<html manifest="demo.appcache">
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
- 可以使用星号来指示所有其他资源/文件都需要因特网连接：
- NETWORK:
- *
\
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
所有主流浏览器均支持 web worker，除了 Internet Explorer。
Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
- window 对象
- document 对象
- parent 对象
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知：
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了
EventSource 对象
在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：
|
事件 |
描述 |
|
onopen |
当通往服务器的连接被打开 |
|
onmessage |
当接收到消息 |
|
onerror |
当错误发生 |
表单：
浏览器支持
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
|
No |
4.0 |
9.0 |
10.0 |
No |
|
url |
No |
4.0 |
9.0 |
10.0 |
No |
|
number |
No |
No |
9.0 |
7.0 |
No |
|
range |
No |
No |
9.0 |
4.0 |
4.0 |
|
Date pickers |
No |
No |
9.0 |
10.0 |
No |
|
search |
No |
4.0 |
11.0 |
10.0 |
No |
|
color |
No |
No |
11.0 |
No |
No |
注释：Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规
Input 类型 - number
|
属性 |
值 |
描述 |
|
max |
number |
规定允许的最大值 |
|
min |
number |
规定允许的最小值 |
|
step |
number |
规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
|
value |
number |
规定默认值 |
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
|
属性 |
值 |
描述 |
|
max |
number |
规定允许的最大值 |
|
min |
number |
规定允许的最小值 |
|
step |
number |
规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
|
value |
number |
规定默认值 |
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
- Date: <input type="date" name="user_date" />
HTML5 拥有若干涉及表单的元素和属性。
- datalist
- keygen
- output
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
datalist |
No |
No |
9.5 |
No |
No |
|
keygen |
No |
No |
10.5 |
3.0 |
No |
|
output |
No |
No |
9.5 |
No |
No |
datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
<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>
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
Encryption: <keygen name="security" />
HTML5 的新的表单属性
新的 form 属性：
- autocomplete
- novalidate
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
新的 input 属性：
浏览器支持
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
autofocus |
No |
No |
10.0 |
3.0 |
4.0 |
|
form |
No |
No |
9.5 |
No |
No |
|
form overrides |
No |
No |
10.5 |
No |
No |
|
height and width |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
list |
No |
No |
9.5 |
No |
No |
|
min, max and step |
No |
No |
9.5 |
3.0 |
No |
|
multiple |
No |
3.5 |
No |
3.0 |
4.0 |
|
novalidate |
No |
No |
No |
No |
No |
|
pattern |
No |
No |
9.5 |
3.0 |
No |
|
placeholder |
No |
No |
No |
3.0 |
3.0 |
|
required |
No |
No |
9.5 |
3.0 |
No |
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
form 属性
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
表单重写属性
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
pattern 属性规定用于验证 input 域的模式（pattern）。
pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
