HTML5?語義元素
什么是語義元素?
一個語義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者及汉。
無語義?元素實例:?<div> 和 <span> - 無需考慮內容.
HTML5 <section> 元素
<section> 標簽定義文檔中的節(jié)（section沮趣、區(qū)段）。比如章節(jié)坷随、頁眉房铭、頁腳或文檔中的其他部分。
根據(jù)W3C HTML5文檔: section 包含了一組內容及其標題温眉。
<section>?
?<h1>WWF</h1>?
?<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
HTML5 <article> 元素
<article> 標簽定義獨立的內容缸匪。.
<article> 元素使用實例:
Forum post
Blog post
News story
Comment
<article>?
?<h1>Internet Explorer 9</h1> ?
<p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)布。</p>
</article>
HTML5 <nav> 元素
<nav> 標簽定義導航鏈接的部分类溢。
<nav> 元素用于定義頁面的導航鏈接部分區(qū)域凌蔬，但是，不是所有的鏈接都需要包含在 <nav> 元素中!
<nav> <a href="/html/">HTML</a> |
? ? <a href="/css/">CSS</a> |
? ? <a href="/js/">JavaScript</a> |
? ? <a href="/jquery/">jQuery</a>
</nav>
HTML5 <aside> 元素
<aside> 標簽定義頁面主區(qū)域內容之外的內容（比如側邊欄）闯冷。aside 標簽的內容應與主區(qū)域的內容相關.
<p>My family and I visited The Epcot center this summer.</p>?
<aside>?
?<h4>Epcot Center</h4>?
?<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
HTML5 <header> 元素
<header>元素描述了文檔的頭部區(qū)域砂心，<header>元素主要用于定義內容的介紹展示區(qū)域.在頁面中你可以使用多個<header> 元素，以下實例定義了文章的頭部:
<article>?
?????<header>?
?????????<h1>Internet Explorer 9</h1>?
?????????<p><time pubdate datetime="2011-03-15"></time></p>?
?????</header>?
?????<p>Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p>
</article>
HTML5 <footer> 元素
<footer> 元素描述了文檔的底部區(qū)域蛇耀，<footer> 元素應該包含它的包含元素辩诞，一個頁腳通常包含文檔的作者，著作權信息纺涤，鏈接的使用條款译暂，聯(lián)系信息等抠忘，文檔中你可以使用多個 <footer>元素.
<footer>?
?????<p>Posted by: Hege Refsnes</p>?
?????<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
HTML5 <figure> 和 <figcaption> 元素
<figure>標簽規(guī)定獨立的流內容（圖像、圖表秧秉、照片褐桌、代碼等等）。
<figure> 元素的內容應該與主內容相關象迎，但如果被刪除荧嵌，則不應對文檔流產(chǎn)生影響。
<figcaption> 標簽定義 <figure> 元素的標題.
<figcaption>元素應該被置于 "figure" 元素的第一個或最后一個子元素的位置砾淌。
<figure>?
?????<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">?
?????<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
我們可以開始使用這些語義元素嗎?
以上的元素都是塊元素(除了<figcaption>).
為了讓這些塊及元素在所有版本的瀏覽器中生效啦撮，你需要在樣式表文件中設置一下屬性 (以下樣式代碼可以讓舊版本瀏覽器支持本章介紹的塊級元素):
header, section, footer, aside, nav, article, figure
{
????display: block;
}
Internet Explorer 8 及更早IE版本中的問題
IE8 及更早IE版本無法在這些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解決辦法:?你可以使用HTML5 Shiv Javascript腳本來解決IE的兼容問題汪厨。HTML5 Shiv下載地址：https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
以上代碼在瀏覽器小于IE9版本時會加載html5shiv.js文件. 你必須將其放置于<head> 元素中赃春，因為 IE瀏覽器需要在頭部加載后渲染這些HTML5的新元素
HTML5?Web 存儲
什么是 HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。
早些時候,本地存儲使用的是 cookie劫乱。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務器上织中，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.
數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用衷戈。
localStorage 和 sessionStorage?
客戶端存儲數(shù)據(jù)的兩個對象為：
localStorage - 用于長久保存整個網(wǎng)站的數(shù)據(jù)狭吼，保存的數(shù)據(jù)沒有過期時間，直到手動去除殖妇。
sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)刁笙，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。
localStorage 對象
localStorage 對象存儲的數(shù)據(jù)沒有時間限制谦趣。第二天疲吸、第二周或下一年之后，數(shù)據(jù)依然可用前鹅。
localStorage.sitename="菜鳥教程";
document.getElementById("result").innerHTML="網(wǎng)站名：" + localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
不管是 localStorage摘悴，還是 sessionStorage，可使用的API都相同舰绘，常用的有如下幾個（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
實例展示了用戶點擊按鈕的次數(shù)烦租。
if (localStorage.clickcount){?
?????????????localStorage.clickcount=Number(localStorage.clickcount)+1;}
????????else{ ????
????????????????localStorage.clickcount=1;}
document.getElementById("result").innerHTML=" 你已經(jīng)點擊了按鈕 " + localStorage.clickcount + " 次 ";
Web Storage 開發(fā)一個簡單的網(wǎng)站列表程序
網(wǎng)站列表程序實現(xiàn)以下功能：
? ??可以輸入網(wǎng)站名，網(wǎng)址除盏，以網(wǎng)站名作為key存入localStorage叉橱；
? ??根據(jù)網(wǎng)站名，查找網(wǎng)址者蠕；
? ??列出當前已保存的所有網(wǎng)站窃祝；
//保存數(shù)據(jù) function save(){
? ? var siteurl = document.getElementById("siteurl").value;?
? ? var sitename = document.getElementById("sitename").value;?
? ? localStorage.setItem(sitename, siteurl);
? ? alert("添加成功");}
//查找數(shù)據(jù)? function find(){?
? ? var search_site = document.getElementById("search_site").value;?
? ? var sitename = localStorage.getItem(search_site);?
? ? var find_result = document.getElementById("find_result");?
? ? find_result.innerHTML = search_site + "的網(wǎng)址是：" + sitename;? }
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
? ? <label for="sitename">網(wǎng)站名(key)：</label>?
? ? <input type="text" id="sitename" name="sitename" class="text"/>?
? ? <br/>?
? ? <label for="siteurl">網(wǎng) 址(value)：</label>?
? ? <input type="text" id="siteurl" name="siteurl"/>?
? ? <br/>?
? ? <input type="button" onclick="save()" value="新增記錄"/>?
? ? <hr/>?
? ? <label for="search_site">輸入網(wǎng)站名：</label>?
? ? <input type="text" id="search_site" name="search_site"/>?
? ? <input type="button" onclick="find()" value="查找網(wǎng)站"/>?
? ? <p id="find_result"><br/></p>? </div>
HTML5 Web SQL 數(shù)據(jù)庫
Web SQL 數(shù)據(jù)庫 API 并不是 HTML5 規(guī)范的一部分，但是它是一個獨立的規(guī)范踱侣，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫的 APIs粪小。如果你是一個 Web 后端程序員大磺，應該很容易理解 SQL 的操作。Web SQL 數(shù)據(jù)庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作探膊。
核心方法
以下是規(guī)范中定義的三個核心方法：
1杠愧，openDatabase：這個方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)庫對象。
2逞壁，transaction：這個方法讓我們能夠控制一個事務流济，以及基于這種情況執(zhí)行提交或者回滾。
3腌闯，executeSql：這個方法用于執(zhí)行實際的 SQL 查詢绳瘟。
打開數(shù)據(jù)庫
我們可以使用 openDatabase() 方法來打開已存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在姿骏，則會創(chuàng)建一個新的數(shù)據(jù)庫糖声，
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法對應的五個參數(shù)說明：
1，數(shù)據(jù)庫名稱
2分瘦，版本號
3蘸泻，描述文本
4，數(shù)據(jù)庫大小
5嘲玫，創(chuàng)建回調(會在創(chuàng)建數(shù)據(jù)庫后被調用)
執(zhí)行查詢操作
執(zhí)行操作使用 database.transaction() 函數(shù)：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
? tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');});
插入數(shù)據(jù)
在執(zhí)行上面的創(chuàng)建表語句后悦施，我們可以插入一些數(shù)據(jù)：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {?
?tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
? tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
? tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');});
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
? tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
? tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);});
讀取數(shù)據(jù)
以下實例演示了如何讀取數(shù)據(jù)庫中已經(jīng)存在的數(shù)據(jù)：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {?
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
? tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
? tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');});
db.transaction(function (tx) {??
?tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {? ? ??
????????var len = results.rows.length, i;
? ? ? msg = "<p>查詢記錄條數(shù): " + len + "</p>";
? ? ? document.querySelector('#status').innerHTML +=? msg;
? ? ? for (i = 0; i < len; i++){? ? ? ?
?????????????alert(results.rows.item(i).log );
? ? ? }? ?
? }, null);});
刪除記錄
刪除記錄使用的格式如下：
db.transaction(function (tx) {?
?tx.executeSql('DELETE FROM LOGS WHERE id=1');});
刪除指定的數(shù)據(jù)id也可以是動態(tài)的：
db.transaction(function(tx) {?
?tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);});
更新記錄
更新記錄使用的格式如下：
db.transaction(function (tx) {?
?tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');});
更新指定的數(shù)據(jù)id也可以是動態(tài)的：
db.transaction(function(tx) {?
?tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);});
