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

五、引號還是不要引號

這確實(shí)是個(gè)問(wèn)題。記住，HTML 5不是XHTML，要是你不愿意，你沒(méi)有必要非得用引號標記包裹你的屬性，沒(méi)有必要非得閉合元素。換句話(huà)說(shuō)，只要你自己覺(jué)得舒服，就沒(méi)有什么對錯之分。對于我自己來(lái)說(shuō)就是如此。

<pclasspclass=myClassid=someId>Startthereactor. 

對此取舍你還得自己拿主意。如果你更傾向于結構化的文檔，就算天塌下來(lái)，也要把引號牢牢拽在懷里。

六、內容可編輯

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

<ulcontenteditableulcontenteditable="true"> 
<li>悼念遇難香港同胞</li> 
<li>深圳特區30周年</li> 
<li>伊春空難</li></ul> 

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

<ulcontenteditableulcontenteditable=true> 

七、Email輸入(Inputs)

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

<formactionformaction=""method="get"> 
     <labelforlabelfor="email">郵箱:</label> 
     <inputidinputid="email"name="email"type="email"/> 
     <buttontypebuttontype="submit">確定</button> 
</form> 

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

八、占位符(Placeholders)

Placeholders的意思，就是文本框/文本域空間默認會(huì )有個(gè)文字提示，獲得焦點(diǎn)時(shí)，此提示文字消失;失去焦點(diǎn)時(shí)如果內容為空，提示文字又出現。如下圖所示：

這些表單控件里面顯示的些提示性的文字就是占位符。按照以往的做法，我們需要使用一點(diǎn)JavaScript代碼實(shí)現占位符效果，例如我之前的“文本框/域文字提示自動(dòng)顯示隱藏jQuery小插件”一文所展示的。當然，你需要設定一個(gè)初始的默認的value值，然后根據輸入內容進(jìn)行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一切就輕松了。

<labelforlabelfor="email">郵箱:</label> 
<inputidinputid="email"type="email"placeholder="zhangxinxu@zhangxinxu.com"size="26"/>