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

五、引號(hào)還是不要引號(hào)

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

<pclasspclass=myClassid=someId>Startthereactor. 

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

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

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

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

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

<ulcontenteditableulcontenteditable=true> 

七、Email輸入(Inputs)

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

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

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

八、占位符(Placeholders)

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

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

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