1.HTML5 是 W3C 与 WHATWG 合作的结果,为HTML5建立的一些规则有:
(1)新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
(2)减少对外部插件的需求(比如 Flash)
(3)更优秀的错误处理
(4)更多取代脚本的标记
(5)HTML5 应该独立于设备
(6)开发进程应对公众透明
2.HTML5 中的一些有趣的新特性
(1)用于绘画的 canvas 元素
(2)用于媒介回放的 video 和 audio 元素
(3)对本地离线存储的更好的支持
(4)新的特殊内容元素,比如 article、footer、header、nav、section
(5)新的表单控件,比如 calendar、date、time、email、url、search
3.HTML5提供了展示视频的标准,通过video元素包含视频,video元素支持三种视频格式:Ogg、MPEG4、WebM,使用如下:
<video src="movie.ogg" width="320" height="240" controls="controls"> //control 属性供添加播放、暂停和音量控件。
Your browser does not support the video tag.
</video>
video提供的方法:play(),pause()等
video提供的属性:paused,height,width等
4.HTML5提供了播放音频的标准,audio元素支持三种音频格式:Ogg Vorbis、MP3、Wav,使用如下:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
audio标签属性有:autoplay, controls,loop等
5.HTML5提供了拖放的标准(Drag 和 drop)
(1)设置元素可拖放:
<img draggable="true" />
(2)拖动什么:
<img ondragstart="drag(event)"/>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
(3)放到何处:
<div ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
ev.preventDefault(); //允许放置命令
}
(4)进行放置:
<div ondrop="drop(event)"></div>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
6.HTML5提供canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制每一像素使用如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id寻找canvas元素
var cxt=c.getContext("2d");//getContext("2d")是html5内置对象拥有多种画图方法
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); //从左上角开始绘制一个150*75的矩形
</script>
7.HTML5 支持内联 SVG
(1)什么是SVG:
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
(2)SVG的优势:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
8.HTML5 Geolocation(地理定位)用于定位用户的位置
一个简单的地理定位实例如下:
<script>
var x=document.getElementById("demo");
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;
}
</script>
9.HTML 5 Web 存储
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能,HTML5 使用 JavaScript 来存储和访问数据。
HTML5 提供了两种在客户端存储数据的新方法:
(1)localStorage - 没有时间限制的数据存储
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates"); //创建localStorage
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");}//访问localStorage
else {
document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
</script>
(2)sessionStorage - 针对一个 session 的数据存储
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;//创建sessionStorage
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; //访问sessionStorage
} else {
document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
}
</script>
10.HTML 5 应用程序缓存
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
应用程序缓存为应用带来三个优势:
(1)离线浏览 - 用户可在应用离线时使用它们
(2)速度 - 已缓存资源加载得更快
(3)减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest 文件可分为三个部分:
(1)CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
(2)NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
更新缓存,一旦应用被缓存,它就会保持缓存直到发生下列情况:
(1)用户清空浏览器缓存
(2)manifest 文件被修改(参阅下面的提示)
(3)由程序来更新应用缓存
11.HTML 5 Web Workers
Web Workers:当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
Web Workers实例:
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined") //检测用户浏览器是否支持
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/demo_workers.js"); //外部js文件为计数脚本
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
12.HTML 5 服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
接收 Server-Sent 事件通知实例:
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("/example/html5/demo_sse.php"); //EventSource 对象用于接收服务器发送事件通知
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}
else
{
document.getElementById("result").innerHTML="抱歉,您的浏览器不支持 server-sent 事件 ...";
}
</script>