什么是HTML5
HTML5将成为HTML、XHTML以及HTML DOM的新标准。
HTML5是如何起步的?
W3C与WHATWG合作的结果。
W3C: World Wide Web Consortium，万维网联盟。
WHATWG: Web Hypertext Application Technology Working Group。
新特性
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如article、footer、header、nav、section
- 新的表单控件，比如calendar,date,time,email,url,search
视频
HTML5规定了一种通过video元素来包含视频的标准方法而不是通过外部控件。当前video元素支持三种视频格式：
- Ogg
带有Theora视频编码和Vorbis音频编码的Ogg文件 - MPEG4
带有H.264视频编码和AAC音频编码的MPEG 4文件 - WebM
带有VP8视频编码和Vorbis音频编码的WebM文件
代码举例:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
上面的代码中有 多个source，浏览器将使用第一个可识别的格式。
video标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autoplay”，则忽略该属性。 |
| src | url | 要播放的视频的URL。 |
| width | pixels | 设置视频播放器的宽度。 |
video支持的视频方法、属性和事件
| 方法 | 属性 | 事件 |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | vieoWidth | progress |
| canPlayType | videoHeight | error |
| \ | duration | timeupdate |
| \ | ended | ended |
| \ | error | abort |
| \ | paused | empty |
| \ | muted | emptied |
| \ | seeking | waiting |
| \ | volume | loadedmetadata |
| \ | height | |
| \ | width |
在所有属性中，只有videoWidth和videoHeight属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
音频
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
audio支持三种音频格式：
- Ogg Vorbis
- MP3
- Wav
audio标签使用方法与video标签类似。
audio标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用”autoplay”，则忽略该属性。 |
| src | url | 要播放的音频的URL。 |
画布
SVG
地理定位
Web存储
HTML5提供了两种在客户端存储数据的新方法：
- localStorage – 没有时间限制的数据存储
- sessionStorage – 针对一个session的数据存储
之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5使用JavaScript来存储和访问数据。
localStorage方法
localStorage方法存储的数据没有时间限制。
sessionStorage方法##
sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会删除。
应用缓存
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览-用户可在应用离线时使用它们
- 速度-已缓存资源加载得更快
- 减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
HTML5 Cache Manifest实例
下面的例子展示了带有cache manifest的HTML文档(供离线浏览):
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Cache Manifest基础
如需启用应用程序缓存，请在文档的标签中包含manifest属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存(除非在manifest文件中直接指定了该页面)。
manifest文件的建议的文件扩展名是: “.appcache”。
请注意：manifest文件需要配置正确的MIME-type，即”text/cache-manifest”。必须在web服务器上进行配置。
Manifest文件
manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest文件可分为三个部分：
- CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK – 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
完整的Manifest文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户情况浏览器缓存
- manifest文件被修改
- 由程序来更新应用缓存
由于一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。所以为了确保浏览器更新缓存，您需要更新manifest文件(譬如更新上面的以”#”开头的注释行中的日期和版本号)。
Web Workers
当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时web worker在后台运行。
检测Web Worker支持
在创建web worker之前，检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
创建web worker文件
web worker线程的代码写在一个外部js文件中，比如”demo_worker.js”。
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
postMessage()方法用于向HTML页面传回一段消息。
创建web worker对象
有了web worker文件，现在从HTML页面调用它。
下面代码检测是否存在worker，如果不存在，创建一个新的web worker对象，然后运行”demo_worker.js”中的代码：
if(typeof(w)=="undefined"){
w=new Worker("demo_workers.js");
}
然后向web worker添加一个”onmessage”事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML = event.data;
};
当web worker传递消息时，会执行事件监听器中的代码。event.data中存有来自event.data的数据。
终止web worker
当我们创建web worker对象后，它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止web worker，并释放浏览器/计算机资源，请使用terminate()方法：
w.terminate();
Web Workers和DOM
由于web worker位于外部文件中，它们无法访问下列Javascript对象：
- window对象
- document对象
- parent对象
服务器发送事件
Server-Sent事件 单向消息传递##
Server-Sent事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
接收Server-Sent事件通知
EventSource对象用于接收服务器发送事件通知：
实例
var source = new EventSource("demo_sse.php");
source.onmessage = function(event){
document.getElementById("result").innerHTML += event.data + "<br />";
}
检测Server-Sent事件支持
可通过下面代码检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource) !== "undefined"){
// 支持
}else{
// 不支持
}
服务器端代码实例
服务器端事件流的语法非常简单，把”Content-Type”报头设置为”text/event-stream”即可。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
EventSource对象
除了onmessage事件来获取消息，还可以使用其他事件。
| 事件 | 描述 |
|---|---|
| onopen | 当通往服务器的连接被打开 |
| onmessage | 当接收到消息 |
| onerror | 当错误发生 |
HTML5表单
HTML5支持一系列新的输入类型。
- Input类型-email
email类型应用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。
E-mail: <input type="email" name="user_email" />
- Input类型-url
url类型应用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。
Homepage: <input type="url" name="user_url" />
- Input类型-number
number类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
Points: <input type="number" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定：
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定运行的最小值 |
| step | number | 规定合法的数字间隔(如果step=”3″,则合法的数是-3, 0, 3, 6等) |
| value | number | 规定默认值 |
- Input类型-range
range类型用于应该包含一定范围内数字值得输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定。
<input type="range" name="points" min="1" max="10" />
和number一样，可使用相应的属性来规定对数字类型的限定。
- Input类型-Date Pickers(日期选择器)
HTML5拥有多个可供选取日期和时间的新输入类型：- date – 选取日、月、年
- month – 选取月、年
- week – 选取周和年
- time – 选取时间(小时和分钟)
- datetime – 选取时间、日、月、年(UTC时间)
Date: <input type="date" name="user_date" />
- Input类型-search
search类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。
近期评论