1、新的html5文件類型,僅需申明在html的第一行,即 <!DOCTYPE html> 2、圖形元素 figure ,將<figure>與<figcaption>相結合,使圖片標題與圖片相搭配 3、不需要為鏈接和腳本標簽添加類型的屬性 4、h5中不需要用引號將屬性包裹起來 5、使得內容可編輯。" ...
1、新的html5文件類型,僅需申明在html的第一行,即 <!DOCTYPE html>
2、圖形元素 figure ,將<figure>與<figcaption>相結合,使圖片標題與圖片相搭配
1 <figure> 2 <img src="img/2.jpg"> 3 <figcaption> 4 <p>嘗試一下</p> 5 </figcaption> 6 </figure>
3、不需要為鏈接和腳本標簽添加類型的屬性
<script src=”script.js”></script>
4、h5中不需要用引號將屬性包裹起來
<p class=one></p>
5、使得內容可編輯。"contenteditable",它將允許用戶編輯元素(包括他的子元素)內包含的任何文本內容。
6、增加電子郵件的輸入類型
<input id=”email” name=”email” type=”email” />
註意:opera只有在指定了name屬性的前提下,才可以使用
7、占位符 paceholder=' '
<input name=”email” type=”email” placeholder=”[email protected]” />
8、本地儲存 local storage
9、語義性header和footer
在書寫代碼時可以使用<header>和<footer>標簽
註意:使用IE瀏覽器時,為了確保新的HTML5元素能夠以塊級元素正確顯示,有必要將它們用下麵的代碼定義風格:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
就算如此,IE還是不知道這些元素究竟是什麼,因而會無視這些格式,還需要用到下麵的代碼來解決這個問題:
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);
11、群組標題(hgroup)
將標題之間的關係更好的表達出來,不影響文章整體綱要
<hgroup> <h1>標題</h1> <h2>副標題</h2> </hgroup>
12、必要(require)屬性
兩種不同方式來聲明這個屬性: <input type=”text” name=”someInput” required> 或者,更嚴謹: <input type=”text” name=”someInput” required=”required”>
13、自動對焦(autofocus)屬性
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
14、音頻支持 <audio>
<audio autoplay=”autoplay” controls=”controls”> <source src=”file.ogg” /> <source src=”file.mp3″ /> <a href=”file.mp3″>Download this file.</a> </audio>
註意:Mozilla和Webkit都還沒有完全支持。Firefox支持 .ogg文件,Webkit瀏覽器只支持最常見的.mp3擴展名。這意味著說,至少目前為止,你應該創建兩個版本的音頻。當Safari載入頁面時,它認不出.ogg格式的文件,將會跳過並移到mp3版本上。請註意,IE並不支持它,Opera 10 或更低的版本只支持 .wav文件。
15、視頻支持<video>
Safari和IE9可以支持H.264 格式的視頻,Firefox 和Opera卻仍然堅持Theora 和Vorbis格式。因此,顯示HTML5視頻的時候,你必須提供兩種格式。
16、視頻預載入
設置 preload=”preload”來預先載入視頻,或者之間添加preload
17、正則表達式規定新模式的屬性 pattern=”[A-Za-z]{4,10}”
18、檢測瀏覽器的屬性支持
兩種方法:a、使用Modernizr(這是一個Javascript庫)檢測;
b、創建並剖析這些元素來看看瀏覽器都有什麼能力。
例如,在前面的例子里,如果我們要確定瀏覽器是否能夠執行pattern屬性,就可以在頁面上添加JavaScript:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
19、Mark元素
<mark> 元素的主要功能就是在頁面中高亮顯示那些需要在視覺上向用戶突出其重要性的文字。包裹在此標簽里的字元串必須與用戶當前的行為相關。例如,如果我在一些博客中搜索"Open your Mind" ,我可以使用在<mark>標簽里使用JavaScript 來包裹每一次動作。