HTML5学前热身 实用技巧及应用详解

九、本地存储(LocalStorage)

多亏了本地存储(非正式的HTML5，本着方便归纳的目的)，我们可以让高级浏览器记住我们的编辑后的内容，即使浏览器被关掉或是页面刷新。

IE8浏览器已经支持了本地存储，如下截图所示：

尽管显然不支持所有的浏览器，我们可以在InternetExplorer8时，Safari4和Firefox3.5下期待此工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定window.localStorage是否存在。

十、语义的Header和Footer

那些过往的日子：

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

这就是div，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML 5，我们可以使用<header>和<footer>元素。以上的代码可以替换成：

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

尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。

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

您可以通过下面视频学习更多有用的HTML 5表单特征：

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

不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：

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

不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。幸运的是，有一个简单的解决办法：

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

奇怪的是，这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML 5 shiv。该脚本同样修复了些显示问题。

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

想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。虽然我们可以使用一个<h1>和<h2>标签，为其分别创造标记，但是依旧没有(因为HTML 4)一个简单的方法来语义上说明了两者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。

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