HTML5學(xué)前熱身 實(shí)用技巧及應(yīng)用詳解

九、本地存儲(chǔ)(LocalStorage)

多虧了本地存儲(chǔ)(非正式的HTML5，本著方便歸納的目的)，我們可以讓高級(jí)瀏覽器記住我們的編輯后的內(nèi)容，即使瀏覽器被關(guān)掉或是頁面刷新。

IE8瀏覽器已經(jīng)支持了本地存儲(chǔ)，如下截圖所示：

盡管顯然不支持所有的瀏覽器，我們可以在InternetExplorer8時(shí)，Safari4和Firefox3.5下期待此工作方式。請(qǐng)注意，為了彌補(bǔ)舊的瀏覽器將無法識(shí)別本地存儲(chǔ)，你應(yīng)該先測(cè)試，以確定window.localStorage是否存在。

十、語義的Header和Footer

那些過往的日子：

<dividdivid="header"> 
...  
</div> 
<dividdivid="footer"> 
...  
</div> 

這就是div，很自然的，沒有語義化的結(jié)構(gòu)——即使在應(yīng)用了id后?，F(xiàn)在，通過HTML 5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：

<header>...</header> 
<footer>...</footer> 

盡量不要混淆”header”和”footer”這些元素。他們只是指他們的容器。因此，將博客底部的，例如，元信息放在footer元素內(nèi)部是說得通的。這同樣也適用于header。

十一、更多HTML5表單特征(MoreHTML5FormFeatures)

您可以通過下面視頻學(xué)習(xí)更多有用的HTML 5表單特征：

十二、IE和HTML 5(InternetExplorer and HTML 5)

不幸的是，討厭的IE瀏覽器需要?jiǎng)狱c(diǎn)小手術(shù)才能理解新的HTML5元素。為了確保所有新的HTML5元素能以block水平的元素正確地渲染，有必要對(duì)其做如下定義：

header,footer,article,section,nav,menu,hgroup{  
       display:block;  
} 

不幸的是，IE仍舊忽略這些樣式，因?yàn)樗恢肋@些標(biāo)簽從哪里來的，好比是header元素。幸運(yùn)的是，有一個(gè)簡(jiǎn)單的解決辦法：

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu"); 

奇怪的是，這段代碼似乎觸發(fā)IE瀏覽器。為了更簡(jiǎn)單將此應(yīng)用到每個(gè)新的應(yīng)用過程中，雷米夏普(Remy Sharp)創(chuàng)建了一個(gè)腳本，通常稱為HTML 5 shiv。該腳本同樣修復(fù)了些顯示問題。

十三、文檔某一部分的信息(hgroup)

想象一下，在我的網(wǎng)站的標(biāo)題，我有我的站點(diǎn)的名稱，隨后立即由一個(gè)副標(biāo)題。雖然我們可以使用一個(gè)<h1>和<h2>標(biāo)簽，為其分別創(chuàng)造標(biāo)記，但是依舊沒有(因?yàn)镠TML 4)一個(gè)簡(jiǎn)單的方法來語義上說明了兩者之間的關(guān)系。此外，一個(gè)h2標(biāo)記的使用提出了更多的問題，在層次結(jié)構(gòu)上，當(dāng)涉及到其他網(wǎng)頁上顯示的標(biāo)題時(shí)。通過使用不影響文檔的大綱流hgroup元素，我們可以將這些標(biāo)題組合在一起。

<header> 
<hgroup> 
<h1>RecallFanPage</h1> 
<h2>Onlyforpeoplewhowantthememoryofalifetime.</h2> 
</hgroup> 
</header>