接上一篇，我們繼續學習...

六、內容可編輯

最新的瀏覽器有個很贊的新屬性可以應用到元素上，叫做contenteditable。顧名思義，就是允許用戶編輯元素內容包含的任意文本，包括子元素。類似的用途還有很多，像是簡單的待辦事項清單應用程序，可大大利用其本地存儲的優勢。

<ul contenteditable="true">

<li>反手摸到肚臍身材好</li>

<li>最帥售票員</li>

<li>帶著婚紗去蜜月</li>

</ul>

或者，根據前面所學到的一些技巧，我們可以把它寫成：

<ul contenteditable=true>

七、Email輸入(Inputs)

如果我們給表單輸入框應用名為”email”的type屬性，我們可以命令瀏覽器只允許符合有效的電子郵件地址結構的字符串。沒錯，內置表單驗證即將到來，由于一些顯而易見的原因，我們還不能100%依賴內置驗證，較舊的瀏覽器不認識這個”email”型，它們會簡單地退回到普通文本框。

<form action="" method="get">

<label for="email">郵箱:</label><input id="email" name="email" type="email" />

<button type="submit">確定</button>

</form>

還應當指出，當談到哪些元素和屬性支持和不支持時，當前所有的瀏覽器都有點靠不住的。例如Opera似乎支持電子郵件驗證，但僅在name屬性被指定的時候。而且，它不支持占位符屬性，這個我們將會在后面學到。底線是不依賴于這種形式的驗證…但你仍然可以使用它！

八、占位符(Placeholders)

Placeholders什么意思呢，就是文本框/文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失；失去焦點時如果內容為空，提示文字又出現。

這些表單控件里面顯示的些提示性的文字就是占位符。按照以往的做法，我們需要使用一點JavaScript代碼實現占位符效果，

當然，你需要設定一個初始的默認的value值，然后根據輸入內容進行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一切就輕松了。

<label for="email">郵箱:</label>

<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />

根據我的測試，目前僅webkit核心的瀏覽器支持placeholders屬性，像是Chrome5，Safari4

九、本地存儲(Local Storage)

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

IE8瀏覽器已經支持了本地存儲，盡管顯然不支持所有的瀏覽器，我們可以在Internet Explorer8時，Safari 4和Firefox 3.5下期待此

工作方式。請注意，為了彌補舊的瀏覽器將無法識別本地存儲，你應該先測試，以確定window.localStorage是否存在。

十、語義的Header和Footer

那些過往的日子：

<div id="header">

...

</div>

<div id="footer">

...

</div>

div嘛，很自然的，沒有語義化的結構——即使在應用了id后。現在，通過HTML5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：

<header>

...

</header>

<footer>

...

</footer>

它完全適合您有多個頁眉和頁腳的項目。

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

來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

總結

以上是生活随笔為你收集整理的HTML5新特征、窍门和技术（6~10）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。