HTML5 – Web开发步入新阶段
演变历程
1991 HTML
1994 HTML 2
1996 CSS 1 + Javascript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless
2005 AJAX
2009 HTML5
91 94 96 97 98 00 02 05 09
HTML5是什么
ì 广义上:一套技术标准的集合
语义化 SEMANTICS
语义化标签
<h1>HTML5</h1> <h2>Web开发步入新阶段</h2> <p>......</p>
<hgroup> <h1>HTML5</h1> <h2>Web开发步入新阶段</h2> </hgroup> <p>......</p>
语义化标签
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容</p>
<footer>
<a href="?comments=1">评论</a>
</footer>
</article>
语义化标签
<p>以下代码展示了如何通过JS创建一个元素。</p>
<figure id="l4”>
<figcaption>代码14:创建元素</figcaption>
<pre><code>document.createElement("div");</code></pre>
</figure>
语义化标签
语义化标签
应用相关标签
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
<progress>正在处理</progress>
<progress value="75" max="100”>完成75%</progress>
应用相关标签
<menu> <command type="command">另存为...</command> </menu>
<details> <summary>fileInfo</summary> <summary>metadata</summary> <summary>camera data</summary> </details>
表单标签
<input type="email" value="[email protected]" />
<input type="date" min="2010-‐08-‐14" max="2011-‐08-‐14" value="2010-‐08-‐14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
表单标签
<input type="tel" placeholder="(555) 555-‐5555"
pattern="^\(?\d{3}\)?[-‐\s]\d{3}[-‐\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-‐5" max="10" value="0" />
表单标签
<style>
[required] {
border-‐color: #88a;
-‐webkit-‐box-‐shadow: 0 0 3px rgba(0, 0, 255, .5);
}
:invalid {
border-‐color: #e88;
-‐webkit-‐box-‐shadow: 0 0 5px rgba(255, 0, 0, .8);
}
</style>
移动平台上的表单标签
type="email" type="tel"
离线存储 OFFLINE & STORAGE
Once upon a time⋯
Cookies的问题
ì 速度
ì 安全
ì 容量
Web Storage
<input type="text" id="name" />
sessionStorage.setItem("username", document.getElementById("name").value)
<!-‐-‐ on next page -‐-‐>
alert(sessionStorage.getItem("username"))
Web Storage
localStorage.setItem('lng', map.getCenter().lng);
localStorage.setItem('lat', map.getCenter().lat);
localStorage.setItem('mapZoom', map.getZoom());
Web SQL Database
var db = window.openDatabase('MyDB', '1.0', 'my database', 5 * 1024 * 1024);
db.transaction(function(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS test (id unique, text)");
tx.executeSql("INSERT INTO test (id, text) VALUES (1, 'my data')");
tx.executeSql("SELECT * FROM test", [], successCallback);
});
但是⋯
ì W3C已经停止了规范更新
Indexed Database
var idbReq = window.indexedDB.open("My Database");
idbReq.onsuccess = function(event){
var db = event.srcElement.result;
// do something here
}
Application Cache
<html manifest="cache.appcache">
cache.appcache文件内容(MIME Type:text/cache-manifest):
CACHE MANIFEST index.html style.css images/logo.png scripts/main.js
设备访问 DEVICE ACCESS
设备访问
ì 与操作系统集成的更紧密
ì 文件、硬件信息访问
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos){
alert(pos.coords.latitude + ',' + pos.coords.longitude);
})
}
Geolocation
Native Drag & Drop
span.addEventListener("dragstart", function(e){
e.dataTransfer.setData("text", this.innerHTML);
});
drop.addEventListener('drop', function(e){
this.innerHTML = e.dataTransfer.getData('text');
}, false);
File API(Desktop Drag-In)
holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.style.background = 'url(' + event.target.result + ') no-‐repeat center'; }; reader.readAsDataURL(file); return false; };
File API(Desktop Drag-In)
holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.innerHTML = event.target.result; }; reader.readAsText(file); return false; };
File API(Desktop Drag-Out)
<a href="pic.png" id="dragout" draggable="true" data-‐downloadurl="application/octet-‐stream:pic.png:URI">A Picture</a>
var file = document.getElementById('dragout'); file.ondragstart = function(e){ e.dataTransfer.setData('DownloadURL', file.dataset.downloadurl); }
Device Orientation
window.addEventListener("deviceorientation", function(e){
var a = e.alpha;
var b = e.beta;
var g = e.gamma;
}, false);
Speech Input
<input type="text" x-‐webkit-‐speech />
数据连通 CONNECTIVITY
数据连通
ì 改善前后数据交互
WebSocket
ì 减少header traffic
ì 不需要轮询
ì 全双工
WebSocket
var socket = new WebSocket(host);
socket.send(message);
socket.onmessage = function(message){alert(message.data);}
WebSocket
Web Workers
ì 浏览器单线程工作
ì background thread
Web Workers
var worker = new Worker('worker.js'); worker.onmessage = function(event){ document.getElementById('result').text = event.data; };
worker.js var n = 1; search: while(true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) continue search; } postMessage(n); }
Notifications
function RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function showNotification(){ if (window.webkitNotifications.checkPermission() > 0) { RequestPermission(showNotification); } else { window.webkitNotifications.createNotification("header.png", "Title", "Body").show(); } }
Notifications
新消息提示
新邮件提示
多媒体 MULTIMEDIA
Audio & Video
<audio /> <video />
优酷的代码
<object type="application/x-‐shockwave-‐flash" data="http://static.youku.com/v1.0.0161/v/swf/player.swf" id="movie_player" height="100%" width="100%”> <param name="allowFullScreen" value="true"> <param name="wmode" value="opaque"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="VideoIDS=XMjczNzc3NDI4&ShowId=0&Cp=0&Light=on&THX=off&Tid=0&isAutoPlay=true&Version=/v1.0.0668&show_ce=1&winType=interior&Type=Folder&Fid=6190074&Pt=0&Ob=1"> <param name="movie" value=http://static.youku.com/v1.0.0161/v/swf/player.swf> </object>
Audio
<audio src="vincent.mp3" controls="controls" />
Audio格式兼容
format IE9 Firefox 3.5 Opera 10.5 Chrome 3 Safari 3 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes WAV No Yes Yes No Yes
Video
<video src="mapapi.mp4" controls="controls" />
Video格式兼容
format IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MP4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No
三维,图形和特效 3D, GRAPHICS, EFFECTS
canvas
ì 绘图界面
ì 像素级别控制
canvas
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
Inline SVG
<body> <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100 fill="url(#myGradient) onmousedown="alert('hello');"/> </svg> </body>
WebGL
var context = canvas.getContext("experimental-‐webgl");
More WebGL Demos at hNp://www.chromeexperiments.com/
性能与集成 PERFORMANCE & INTEGRATION
XMLHttpRequest 2
ì 改进XMLHttpRequest
ì cross origin
ì progress event
ì byte stream
样式 CSS3
CSS3 Selector
.row:nth-‐child(even){
background: #dde;
}
.row:nth-‐child(odd){
background: white;
}
CSS3 Selector
button:not([DISABLED])
*:not(span)
:enabled
:required
Font Resources
@font-‐face { font-‐family: Gentium; src: url(http://example.com/fonts/Gentium.ttf); }
p { font-‐family: Gentium, serif; }
Text stroke
div {
-‐webkit-‐text-‐fill-‐color: white;
-‐webkit-‐text-‐stroke-‐color: black;
-‐webkit-‐text-‐stroke-‐width: 1px;
}
Vendor Prefixes
ì -‐webkit-‐xxxx
ì -‐moz-‐xxxx
ì -‐o-‐xxxx
Vendor Prefixes
div {
-‐webkit-‐box-‐shadow: 1px 1px 5px #888
-‐moz-‐box-‐shadow: 1px 1px 5px #888;
box-‐shadow: 1px 1px 5px #888;
}
Color Opacity
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.25);
圆角和渐变
border-‐radius: 10px
background-‐image: -‐moz-‐linear-‐gradient(#fff, #000);
background-‐image: -‐moz-‐linear-‐gradient(30deg, #000, #fff 75%, #000);
圆角和渐变
圆角和渐变
阴影
text-‐shadow: 4px 4px 1px #aaa;
box-‐shadow: 1px 1px 2px #fff;
box-‐shadow: inset 0 0 10px #000;
Transition
.left{background: red;left:0px}
.right{background: green;left:1000px}
#myDiv {
-‐webkit-‐transition: left 1s ease-‐in-‐out, background 1s ease-‐in-‐out;
}
Transform
-‐webkit-‐transform: rotateY(45deg);
-‐webkit-‐transform: scaleX(2);
-‐webkit-‐transform: translate3d(0, 0, 90deg);
Animation
@-‐webkit-‐keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
.box2{ -‐webkit-‐animation:movingbox 5s infinite; }
HTML5学习资源
hNp://dev.w3.org/html5/spec/Overview.html hNp://www.html5rocks.com/en/ hNp://diveintohtml5.org/ hNp://www.sitepoint.com/tag/html5/ hNp://www.css3.info/
Q&A