DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5的初級技巧 之第六課
HTML5的初級技巧 之第六課
編輯:HTML5詳解     

19. 使用正則表達式

在Html5中,我們可以直接使用正則表達式。

<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. 檢測浏覽器對Html5屬性的支持

由於各浏覽器對Html5屬性的支持度不同,這就造成了一些兼容問題。但是可以使用方法來檢測該浏覽器是否支持這些屬性,上例中的代碼如果要檢測pattern屬性是否被浏覽器識別,可以使用Javascript代碼來檢測。

alert( 'pattern' in document.createElement('input') ) // boolean;

其實這是確定浏覽器兼容常用的方法,jQuery庫就經常使用這種方法。上面的代碼中創建了一個input標簽,並檢測pattern屬性是否被浏覽器支持,如果能支持的話,浏覽器就支持這個功能,否則就不支持。

<script> 
 if (!'pattern' in document.createElement('input') ) { 
    // do clIEnt/server side validation 
 } 
</script>

21. Mark標簽

<mark>標簽用於高亮顯示那些需要在視覺上向用戶突出其重要性的文字,包裹在此標簽裡的字符串必須與用戶當前的行為相關。例如,如果我在一些博客中搜索“Open your Mind” ,我可以使用在<mark>標簽裡使用JavaScript 來包裹每一次動作。

<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>

22. 該如何正確的使用div標簽

有些人可能會有疑問,有了<header>和<footer>等這些標簽,<div>標簽在Html5中還有用嗎?答案是肯定的,比如你想創建一個能包裹特殊內容的容器自由靈活的<div>肯定是首選,而你要創建一篇文章或者一個導航菜單,建議你使用更有語義的<article>和<nav>標簽。

很多人認為HTML5可能還是很遙遠的事,所以直接無視,其實不然,現在很多網站都已經開始使用HTML5了,事實上,HTML5的一些新增屬性和功能是讓代碼變得更簡潔,這總歸是一件好事,應該值得我們推崇。最後感謝你閱讀了這篇Html5的入門級文章,希望能為你進一步學習Html5提供一些幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved