Nhấn ← hoặc → để di chuyển qua lại giữa các trang.
Ctrl/Command và + hoặc - để phóng lớn hoặc thu nhỏ.
S Xem mã nguồn của trang.
T Thay đổi giao diện.
H Cú pháp nổi bật.
N Xem chi ghú.
3 Đổi hiệu ứng 3D.
0 Trợ giúp.
HTML5*
Đưa sự nghiệp phát triển Web lên tầm cao mới
Lịch sử phát triển của công nghệ web
1991HTML
1994HTML 2
1996CSS 1 + JavaScript
1997HTML 4
1998CSS 2
2000XHTML 1
2002Tableless Web Design
2005AJAX
2009HTML 5
HTML5 ~=
HTML
+
CSS
+
JS APIs
Nội dung trong slide này:
Lưu trữ
Expect the unexpected
JS
Lưu trữ dữ liệu
// 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');
Giá trị đoạn văn bản sẽ được lưu lại ở trình duyệt (crash-safe)
JS
Cở sở dữ liệu (Web SQL)
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
Bạn có thể xem CSDL từ menu: Developer > Developer Tools > Storage
(sử dụng Google Chrome)
JS
Lập chỉ mục DB
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.srcElement.result;
var transaction = db.transaction([], IDBTransaction.READ_ONLY);
var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
curRequest.onsuccess = ...;
};
JS
Bộ nhớ đệm
<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);
Full-duplex, bi-directional communication over the Web:
Both the server and client can send data at any time, or even at the same time.
Only the data itself is sent, without the overhead of HTTP headers, dramatically
reducing bandwidth.
Use the echo demo below to test a WebSocket connection from your browser.
Both the message you send and the response you receive travel over the same WebSocket connection.
Location:
Message:
Output:
Demo powered by
JS
Thông báo
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
Ghi chú: Click lại nút trên để hủy bỏ quyền cấp phát
Điền username của bạn trên twitter để hiển thị tweet mới nhất ở dạng thông báo
( đặt tính này chỉ làm việc được trên trình duyệt Google Chrome )
JS
FileSystem APIs
Đồng bộ ghi file vào sandboxed của hệ thống sử dụng JavaScript:
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);
( The FileSystem API chỉ được thực hiện trên Google Chrome 9+ )
JS
Geolocation
if (navigator.Xác định vị trí) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
JS
Ghép nhiều mảnh vô hướng
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
Ví dụ này chỉ hoạt động trên FF3.6+ hoặc Google Chrome
on a device with a built in accelerometer or iOS 4.2.
HTML
Đọc nội dung
<input type="text" x-webkit-speech />
Đọc văn bản không hoạt động trên trình duyệt này.
Sử dụng Google Chrome với --enable-speech-input được bật.
JS APIs
Khả năng lưu trữ ở phía người dùng (Web SQL Database, App Cache, Web Storage)
Khả năng trao đổi thông tin (Web Sockets, Worker Workers)
Sử dụng các kinh nghiệm dùng Desktop (Thông báo, các API kéo thả)
<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 5This slide deck teaches you everything you need to know about HTML 5.
<metermin="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress>
Download is:
<progress value="75" max="100">3/4 complete</progress>
Goal is:
<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>
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
In March 1936, an unusual confluence of forces occurred in
Santa Clara County.
A long cold winter delayed the blossoming of the millions of
cherry, apricot, peach, and prune plum trees covering hundreds
of square miles of the Valley floor. Then, unlike many years,
the rains that followed were light and too early to knock
the blossoms from their branches.
Instead, by the billions, they all burst open at once.
Seemingly overnight, the ocean of green that was the Valley
turned into a low, soft, dizzyingly perfumed cloud of pink
and white. Uncounted bees and yellow jackets, newly born,
raced out of their hives and holes, overwhelmed by this
impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly
uninhabited passes of the Santa Cruz Mountains and then,
flattening out, poured down into the great alluvial plains
of the Valley. A tidal bore of warm air, it tore along the
columns of trees, ripped the blossoms apart and carried them
off in a fluttering flood of petals like foam rolling up a
beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane
road with a streetcar line down its center, that was the main
road in the West Valley. It froze traffic, as drivers found
themselves lost in a soft, muted whiteout. Only the streetcar,
its path predetermined, passed on...
CSS
Text stroke
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
face: border-radius: 0px;
left eye: border-radius: 0px;
right eye: border-radius: 0px;
base white: border-radius: 0px;
mouth: border-radius: 0px;
nose: border-radius: 0px;
left black eye: border-radius: 0px;
right black eye: border-radius: 0px;
CSS
Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
@-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;
}
*Please make a better use of it. We don't want a new blink tag ;)
Pulse!
Nuts & Bolts
Improvements to the core platform
JS
New Selectors
Finding elements by class (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();
Finding elements by CSS syntax (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]
HTMLJS
Custom data-* attributes
Define, store, and retrieve custom data on the DOM.
// 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
Output:
<div id="main" class="rounded"></div>
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').innerText = event.state; // 'Contact Page Form'
});
-webkit-border-image: url(border_image_1.png) ;
border-width: 10px; 