* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
Web 技术路线图
1991HTML
1994HTML 2
1996CSS 1 + JavaScript
1997HTML 4
1998CSS 2
2000XHTML 1
2002Tableless Web Design
2005AJAX
2009HTML 5
HTML5 ~= HTML + CSS + JS
主题：
离线存储
迎接意外
JS
Web Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
Save text value on the client side (crash-safe)
JS
Web SQL Database
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
查看数据库：Developer > Developer Tools > Storage
JS
IndexedDB
var idbRequest = window.indexedDB.open('DatabaseName');
idbRequest.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['ObjectStoreName'], 'readonly');
var curRequest = transaction.objectStore('ObjectStoreName').openCursor();
curRequest.onsuccess = ...;
};
idbRequest.onupgradeneeded = function(event) {
var db = event.target.result
var objectStore = db.createObjectStore('ObjectStoreName');
}
JS
Application Cache
<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
// fs.root is a DirectoryEntry object.
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) { // writer is a FileWriter object.
writer.onwrite = function(e) { ... };
writer.onerror = function(e) { ... };
var bb = new BlobBuilder();
bb.append('Hello World!');
writer.write(bb.getBlob('text/plain'));
}, opt_errorHandler);
}
}, opt_errorHandler);
仅仅支持Google Chrome 9+
JS
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var map = new BMap.Map("allmap");
var point = new BMap.Point(
position.coords.latitude, position.coords.longitude);
map.centerAndZoom(point,15);
}, errorHandler);
}
需要Google服务，可能无法正常工作，你懂的
JS
Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
X axis:x
Y axis:y
Z axis:z
需要 FF3.6+ 或者 Google Chrome 并且设备支持方向传感器
HTML
Speech Input
<input type="text" speechx-webkit-speech />
该功能在Chrome中因为安全原因，已经被废弃
新SpeechRecognition，仅支持Chrome 22+
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
......
}
recognition.start();
点击下面的输入框，然后说话试试
JS
Speech Synthesis API
var msg = new SpeechSynthesisUtterance('Hello World');
speechSynthesis.speak(msg);
<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
<menu>
<command type="command" disabled label="Publish" />
</menu>
<details>
<summary>HTML 5</summary>
This slide deck teaches you everything you need to know about HTML 5.
</details>
HTML 5Web 开发的未来之路
<metermin="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress>
下载：
<progress value="75" max="100">3/4 complete</progress>
目标完成：
<script>
var t = document.querySelector('#template-sample');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>
Template used: 0
HTML
HTML's New Template Tag
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
<x-foo></x-foo>
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
var xFoo = new XFoo();
document.body.appendChild(xFoo);
var MegaButton = document.registerElement('mega-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
<button is="mega-button">
var megaButton = document.createElement('button', 'mega-button');
var megaButton = new MegaButton();
document.body.appendChild(megaButton);
自定义标签名必须包含“-”
HTML
Shadow DOM
<button id="hello-shadow">Hello, Shadow!</button>
<script>
var host = document.querySelector('#hello-shadow');
var root = host.createShadowRoot();
root.textContent = '欢迎来到影子世界！';
</script>
潘昊
Hi! My name is
Halo9Pan
HTML
Microdata
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
@-webkit-keyframespulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
放缩！
性能
越来越快
JS
New Selectors
通过类查找元素 (DOM API)
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
通过CSS选择器寻找页面元素 (Selectors API)
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]
// Add new data attributes via JS.
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');
var html = [];
for (var key in el.dataset) {
html.push(key, ': ', el.dataset[key], '<br>');
}
el.innerHTML = html.join('');
Output:
id: good
name: joe
screenName: user1
foo: bar
JS
Element.classList
<div id="main" class="shadow rounded"></div>
var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');
console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true
document.addEventListener('visibilitychange', function(e) {
// Start or stop processing depending on state
if(document.hidden) {
...
}
}, false);
开始演示
JS
History API
link.addEventListener('click', function(event) {
// manually add a value to the history stack
// without making the browser load any new page
history.pushState('Contact Page Form', 'Contact Page', '/contact');
});
// capture navigation in case we want to change,
// for instance, some content when it changes
window.addEventListener('popstate', function(event) {
document.querySelector('h1').innerHTML = event.state; // 'Contact Page Form'
});
