HTML5
2016年2月4日
1 目标：改进HTML，增加多媒体支持（视频、音频、Canvas绘图、3D等）。
2 原理：在HTML（第四版）的基础上修改，增加HTML相关标签，由各浏览器负责实现。
删除过时内容，增加新内容，改善效率。
参考：
3 流程：多媒体（视频、音频、绘图），地理位置，存储，缓存，多线程，服务器推送。
4 方法
参考：http://www.w3school.com.cn/html5
4.1 视频：video标签。
参考：http://www.cnblogs.com/shn11160/archive/2012/12/21/2828205.html
大小：width,height属性。
<videosrc="a.mp4" controls="controls" width="400px"height="400px"></video>
控制器：controls。
数据源：src。
自动播放：autoplay。true/false。
循环播放：loop。true/false。
示例：
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<video src="a.mp4"controls="controls" width="400px"height="400px"></video>
</body>
</html>
4.2 音频：audio标签
控制器：controls。
数据源：src。
自动播放：autoplay。true/false。
循环播放：loop。true/false。
示例：
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<audio src="a.mp4"controls="controls" autoplay="true" loop="true"></audio>
</body>
</html>
4.3 拖放：dragand drop
4.3.1目标：将一个元素拖动，放置到指定位置。
4.3.2原理：H5中所有元素可以拖放,拖放行为都有相应的事件，通过event传递数据。
4.3.3流程：将拖动元素设置为可拖放（draggable），拖动开始时（ondragstart）记录数据（元素id）拖动结束时（ondragover）,目标元素阻止默认行为（默认不能放置元素）。放置开始时(ondrop)读取数据，处理元素（放置到目标位置）。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
<style type="text/css">
#div1{width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#drag1{width:200px;height:200px:}
</style>
</head>
<body>
Hello World!
<divid="div1" οndrοp="drop(event)"οndragοver="dragOver(event)"></div><imgid="drag1" src="a.gif" draggable="true" οndragstart="dragStart(event)"/>
<scripttype="text/javascript">
function dragStart(event){
console.log("dargStart=");
console.log(event);
event.dataTransfer.setData("Text",event.target.id);
}
function dragOver(event){
console.log("dargOver=");
console.log(event);
event.preventDefault();
}
function drop(event){
console.log("drop=");
console.log(event);
event.preventDefault();
varid=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(id));
}
</script>
</body>
</html>
4.4 2D绘图:canvas标签。
4.4.1目标：具有GUI的基本功能，能够使用GUI进行绘图。
4.4.2原理：升级的div，具有向浏览器请求系统GUI能力。使用JavaScript控制系统GUI进行绘图。
4.4.3流程：设置canvas元素，在javascript中使用canvas元素获取GUI（getContext(),当前只支持2d），使用gui进行绘制。
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<canvas id="mygui" width="400px"height="300px" style="border:1px solidred"></canvas>
<scripttype="text/javascript">
var c=document.getElementById("mygui");
varg=c.getContext("2d");
g.fillStyle="blue";
g.fillRect(0,10,100,50);
</script>
</body>
</html>
4.4.4方法： HTML5内置GUI对象getContext(“2d”)。
具有通过的绘制功能。
详见：http://www.w3school.com.cn/tags/html_ref_canvas.asp
4.5 2D绘图:SVG。
目标：以DOM形式绘制图形，所有图形都是DOM元素，适合于关注元素的情况，但是由于DOM限制速度，不适合大型应用。
详见：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
4.6 3D绘图：WebGL和three.js
参见：Web3D.docx
4.7 地理位置navigator.geolocation.getCurrentPosition(位置回调，错误回调)
浏览器提供的地理位置定位功能（chrome自动阻止了，IE和android可用）。
可以获取类似GPS的信息，并且能够使用watchPosition（）获取持续更新的位置。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="getLocation()">pos</button>
<scripttype="text/javascript">
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos,showError);
}
else{
console.log("notsupport.");
}
}
function showPos(pos){
console.log(pos.coords.latitude+","+pos.coords.longitude);
console.log(pos);
}
function showError(error){
console.log(error);
}
</script>
</body>
</html>
4.8 本地存储：localStorage和sessionStorage。
4.8.1目标：建立本地存储数据功能，不使用网络。可以存储长期数据和连接数据。
4.8.2原理：浏览器内建本地数据存储map，长期数据使用localStorage，连接数据使用sessionStorage。
localStorage:长期有效。
sessionStorage：关闭页面后清空。
4.8.3流程：读写localStorage/sessionStorage的key-value键值对。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="store()">pos</button>
<scripttype="text/javascript">
function store(){
if(localStorage.lkey1){
localStorage.lkey1=Number(localStorage.lkey1) +1;
}else{
localStorage.lkey1=1;
}
if(sessionStorage.skey1){
sessionStorage.skey1=Number(sessionStorage.skey1) +1;
}else{
sessionStorage.skey1=1;
}
}
</script>
</body>
</html>
4.8.4方法：删除removeItem()。清空clear（）。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="store()">pos</button>
<buttonοnclick="rem()">rem</button>
<scripttype="text/javascript">
function store(){
if(localStorage.lkey1){
localStorage.lkey1=Number(localStorage.lkey1)+1;
}else{
localStorage.lkey1=1;
}
if(sessionStorage.skey1){
sessionStorage.skey1=Number(sessionStorage.skey1)+1;
}else{
sessionStorage.skey1=1;
}
console.log(localStorage);
console.log(sessionStorage);
}
function rem(){
localStorage.removeItem('lkey1');
}
</script>
</body>
</html>
参考：
4.9 Web缓存manifest。
4.9.1目标：在本地缓存指定的内容，再次请求时不再重新加载。
4.9.2原理：指定manifest缓存文件，指定缓存内容。
4.9.3流程：在html中指定mainfest缓存文件，设置缓存内容、不缓存内容、错误替代页面。
//h5.html
<!DOCTYPEHTML>
<htmlmanifest="demo.appcache">
<body>
The content of thedocument......
</body>
</html>
//demo.appcache
CACHE MANIFEST
# 2012-02-21v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
4.10 多线程：工作线程WebWorker
4.10.1目标：使用工作线程处理耗时工作，不影响UI交互。
4.10.2原理：使用Worker对象生成一个后台线程完成工作。worker对象生成后自动工作。
4.10.3流程：创建工作js文件，创建Worker对象，接收Worker对象的消息，结束线程。
创建工作js文件：执行耗时操作，通过postMessage(data)向UI主线程发送消息。
//w.js
var i=0;
functiontimedCount(){
console.log("timedCount");
postMessage(i++);
setTimeout("timedCount()",500);
}
timedCount();
创建Worker对象：使用工作js文件创建Worker对象。
w=new Worker("w.js");
接收Worker对象的消息：设置onmessage响应函数。
w.onmessage=function(event){
console.log(event.data);
};
结束线程：Worker的terminate()函数。
w.terminate();
示例：计数器
//w.js
var i=0;
functiontimedCount(){
console.log("timedCount");
postMessage(i++);
setTimeout("timedCount()",500);
}
timedCount();
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="start()">start</button>
<buttonοnclick="stop()">stop</button>
<scripttype="text/javascript">
var w=null;
function start(){
if(typeof(Worker)!=="undefined"){
console.log("Workersupport!");
console.log(Worker);
w=newWorker("w.js");
w.onmessage=function(event){
console.log(event.data);
};
}else{
console.log("Worker notsupport!");
}
}
function stop(){
w.terminate();
}
</script>
</body>
</html>
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="start()">start</button>
<buttonοnclick="stop()">stop</button>
<scripttype="text/javascript">
var w=null;
function start(){
if(typeof(Worker)!=="undefined"){
console.log("Workersupport!");
console.log(Worker);
if(null==w){
w=newWorker("w.js");
w.onmessage=function(event){
console.log(event.data);
};
}else{
stop();
start();
}
}else{
console.log("Worker notsupport!");
}
}
function stop(){
if(w){
w.terminate();
w=null;
}
}
</script>
</body>
</html>
4.11 服务器推送：EventSource
4.11.1目标：接受来自服务器的消息并响应。
4.11.2原理：使用EventSource监听URL的消息，如果有消息(传递数据)，则使用回调函数响应。
4.11.3流程：创建消息源，设置响应函数。
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
Hello World!
<buttonοnclick="start()">start</button>
<scripttype="text/javascript">
var w=null;
function start(){
var source=newEventSource("http://www.w3school.com.cn/example/html5/demo_sse.php");
source.onmessage=function(event){
console.log(event.data);
};
}
</script>
</body>
</html>
5 方法：表单
5.1 input类型：email,url,number,range,Date pickers，search，color。
邮件email,URL地址url，搜索search:文本框，可以由不同平台自动提供输入的相关固定内容，如@，.com等。
数值number，数值滑块range:提供一个范围的不同表现形式，可以设置最大/小值（max/min），默认值（value），步进值（step）。
颜色选择color：可以设置默认颜色（value）。
日期时间Data picker：年月日date，年月month,年周week,日间time,UTC年月日时间datetime,本地年月日时间datetime-local。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
HelloWorld!<br/>
<input type="email"/>
<input type="url"/><br/>
<input type="number" min="1"max="6" step="2" value="3"/>
<input type="range" min="1"max="6" step="2" value="3"/><br/>
<input type="search"/>
<input type="color"value="#FF0000"/>
<br/>
<input type="date"/><inputtype="month"/><input type="week"/><inputtype="time"/><input type="datetime"/><inputtype="datetime-local"/>
<scripttype="text/javascript">
</script>
</body>
</html>
5.2 下拉框：datalist
指定input的list为datalist的id指定下拉内容。
选项为option标签，需要设置label和value属性。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
HelloWorld!<br/>
<inputtype="url" list="mylist"/><br/>
<datalist id="mylist">
<option label="o1" value="http://www.google.com.cn"/>
<option label="o2"value="http://www.baidu.com"/>
</datalist>
<scripttype="text/javascript">
</script>
</body>
</html>
5.3 密钥生成器keygen
5.4 输出元素output：暂不支持。
5.5 form新属性：自动完成autocomplete，取消各种验证novalidate（包括必填、验证等）。
5.6 input新属性：
5.6.1自动完成autocomplete,自动获得焦点autofocus，指定formid(form)，重写form属性（formaction，formenctype，formmethod,formnovalidate,formtarget）,下拉列表list，正则表达式pattern，必填项required，提示符placehoder。
//h5.html
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Html5</title>
</head>
<body>
HelloWorld!<br/>
<form method="get"autocomplete="on" id="user_form">
<input type="text"autofocus="autofocus" name="fname"required="required"placeholder="abc111288778"/><br/>
<inputtype="submit" />
</form>
<input type="text" name="lname"form="user_form" pattern="\d"/>
<scripttype="text/javascript">
</script>
</body>
</html>
扫一扫
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
