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

五、引號還是不要引號

這確實(shí)是個問題。記住，HTML 5不是XHTML，要是你不愿意，你沒有必要非得用引號標(biāo)記包裹你的屬性，沒有必要非得閉合元素。換句話說，只要你自己覺得舒服，就沒有什么對錯之分。對于我自己來說就是如此。

<pclasspclass=myClassid=someId>Startthereactor. 

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

六、內(nèi)容可編輯

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

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

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

<ulcontenteditableulcontenteditable=true> 

七、Email輸入(Inputs)

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

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

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

八、占位符(Placeholders)

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

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

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