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

九、本地存儲(LocalStorage)

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

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

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

十、語(yǔ)義的Header和Footer

那些過(guò)往的日子：

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

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

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

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

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

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

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

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

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

不幸的是，IE仍舊忽略這些樣式，因為它不知道這些標簽從哪里來(lái)的，好比是header元素。幸運的是，有一個(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)單將此應用到每個(gè)新的應用過(guò)程中，雷米夏普(Remy Sharp)創(chuàng )建了一個(gè)腳本，通常稱(chēng)為HTML 5 shiv。該腳本同樣修復了些顯示問(wèn)題。

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

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

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