19. 使用正則表達(dá)式
在HTML5中,我們可以直接使用正則表達(dá)式。
<form method=post action="">
<label for="username">create a username: </label>
<input id="username" type="text" name="username" placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}">
<button type="submit">Go </button>
</form>
20. 檢測(cè)瀏覽器對(duì)HTML5屬性的支持
由于各瀏覽器對(duì)HTML5屬性的支持度不同,這就造成了一些兼容問(wèn)題。但是可以使用方法來(lái)檢測(cè)該瀏覽器是否支持這些屬性,上例中的代碼如果要檢測(cè)pattern屬性是否被瀏覽器識(shí)別,可以使用Javascript代碼來(lái)檢測(cè)。
alert( 'pattern' in document.createElement('input') ) // boolean;
其實(shí)這是確定瀏覽器兼容常用的方法,jQuery庫(kù)就經(jīng)常使用這種方法。上面的代碼中創(chuàng)建了一個(gè)input標(biāo)簽,并檢測(cè)pattern屬性是否被瀏覽器支持,如果能支持的話,瀏覽器就支持這個(gè)功能,否則就不支持。
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
21. Mark標(biāo)簽
<mark>標(biāo)簽用于高亮顯示那些需要在視覺(jué)上向用戶(hù)突出其重要性的文字,包裹在此標(biāo)簽里的字符串必須與用戶(hù)當(dāng)前的行為相關(guān)。例如,如果我在一些博客中搜索“Open your Mind” ,我可以使用在<mark>標(biāo)簽里使用JavaScript 來(lái)包裹每一次動(dòng)作。
<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>
22. 該如何正確的使用div標(biāo)簽
有些人可能會(huì)有疑問(wèn),有了<header>和<footer>等這些標(biāo)簽,<div>標(biāo)簽在HTML5中還有用嗎?答案是肯定的,比如你想創(chuàng)建一個(gè)能包裹特殊內(nèi)容的容器自由靈活的<div>肯定是首選,而你要?jiǎng)?chuàng)建一篇文章或者一個(gè)導(dǎo)航菜單,建議你使用更有語(yǔ)義的<article>和<nav>標(biāo)簽。
很多人認(rèn)為HTML5可能還是很遙遠(yuǎn)的事,所以直接無(wú)視,其實(shí)不然,現(xiàn)在很多網(wǎng)站都已經(jīng)開(kāi)始使用HTML5了,事實(shí)上,HTML5的一些新增屬性和功能是讓代碼變得更簡(jiǎn)潔,這總歸是一件好事,應(yīng)該值得我們推崇。最后感謝你閱讀了這篇HTML5的入門(mén)級(jí)文章,希望能為你進(jìn)一步學(xué)習(xí)HTML5提供一些幫助。