詳解H5非常重要的28個新特性,新技巧與新技術

HTML5有很多的新功能.新程式碼.非常不錯.現在總結一下.僅供參考1. 新的Doctype
#儘管使用8b05045a5be5764f313ed5b9168a17e6，即使瀏覽器不懂這句話也會依照標準模式去渲染
2. Figure元素
用24203f2f45e6606542ba09fd2181843a和614eb9dc63b3fb809437a716aa228d24來語意表示有標題的圖片
< ;figure>
90acc3533502c3d42292e3dd9a88d945
614eb9dc63b3fb809437a716aa228d24
e388a4556c0f65e1904146cc1a846beeThis is an image of something interesting. e388a4556c0f65e1904146cc1a846beeThis is an image of something interesting. < ;/p>
c03477f35900935b9be6780eb373f61c
44cb5dd5d12e801e7386125f9c811d57
3. 重新定義的d015d241ae6d34c34210679b5204fe85
#d015d241ae6d34c34210679b5204fe85已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明
4. 去掉link和script標籤裡面的type屬性
5. 加/不加括號
HTML5沒有嚴格的要求屬性必須加引號，閉合不閉合，但是建議加上引號和閉合標籤
6. 讓你的內容可編輯，只需要加一個contenteditable屬性
7. Email Inputs
如果我們給Input的type設定為email，瀏覽器就會驗證這個輸入是否是email類型，當然不能只依賴前端的校驗，後端也得有對應的校驗
8. Placeholders
這個input屬性的意義就是不必透過javascript來做placeholder的效果了
9. Local Storage
使用Local Storage可以永久儲存大的數據片段在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用之前可以檢測一下window.localStorage是否存在
10. 語義化的header和footer
11. 更多的HTML5表單特性
12. IE與HTML5
預設的，HTML5新元素被以inline的方式渲染，不過可以透過下面這種方式讓
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE會忽略這些樣式，可以像下面這樣fix:
document.createElement( ”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav ”);
document.createElement(”menu”);
13. hgroup
一般在header裡面用來將一組標題組合在一起，如

#

<header> 
<hgroup> 
<h1> Recall Fan Page </h1> 
<h2> Only for people who want the memory of a lifetime. </h2> 
</hgroup> 
</header>

14. Required屬性
required屬性定義了一個input是否是必須的，你可以像下面這樣宣告
5f8bb8405429608fd05365c47beab100
或
7b4fa48630a12f9bea5d7c50cb9f3814
15. Autofocus屬性
正如它的詞義，就是聚焦到輸入框裡面
9066d1c62bd47b07e55b07d2b4f0f973
16. Audio支援
#HTML5提供了b97864c2e0ef2353a16c4d64c7734e92標籤，你不需要再按照第三方插件來渲染音頻，大多數現代瀏覽器提供了對於HTML5 Audio的支持，不過目前仍舊需要提供一些兼容處理，如

<audio autoplay=”autoplay” controls=”controls”> 
<source src=”file.ogg” /><!–FF–> 
<source src=”file.mp3″ /><!–Webkit–> 
<a href=”file.mp3″>Download this file.</a> 
</audio>

17. Video支持
和Audio很像，39000f942b2545a5315c57fa3276f220標籤提供了對於video的支持，由於HTML5文檔並沒有給video指定一個特定的編碼，所以瀏覽器去決定要支援哪些編碼，導致了很多不一致。 Safari和IE支援H.264編碼的格式，Firefox和Opera支援Theora和Vorbis 編碼的格式，當使用HTML5 video的時候，你必須都提供：

<video controls preload> 
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” /> 
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” /> 
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p> 
</video>

18. 預載入影片
preload屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面載入的時候去預先載入影片
c656b4ec1a629f3b222142499544fb13
19. 顯示視訊控制
26e316d9d0ecad41766ded9479499daf
20. 正規表示式
由於pattern屬性，我們可以在你的markup裡面直接使用正規表示式了

<form action=”" method=”post”> 
<label for=”username”>Create a Username: </label> 
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required> 
<button type=”submit”>Go </button> 
</form>

21. 偵測屬性支援
除了Modernizr之外我們還可以透過javascript簡單地偵測一些屬性是否支持，如：

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

22. Mark元素
把f920514e6447cf1d171079d1371f007f元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
684271ed9684bde649abda8831d4d355 Search Results 39528cedfa926ea0c01e69ef5b2ea9b0
e388a4556c0f65e1904146cc1a846bee They were interrupted, just after Quato said, f920514e6447cf1d171079d1371f007f”Open your Mind”ee15d5864733761b2441a93ca4c07fdb. 94b3e26ee717c64999d7867364b1b4a3
23. 什么时候用e388a4556c0f65e1904146cc1a846bee
HTML5已经引入了这么多元素，那么p我们还要用吗？p你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性

<p id=”myp” data-custom-attr=”My Value”> Bla Bla </p> 
CSS中使用： 
<style> 
h1:hover:after { 
content: attr(data-hover-response); 
color: black; 
position: absolute; 
left: 0; 
} 
</style> 
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>

27. Output元素
be6d67dae90cc1ad6469079e163d0939元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"> 
input[type=range]:before { content: attr(min); padding-right: 5px; 
} 
input[type=range]:after { content: attr(max); padding-left: 5px;}

【相关推荐】

1. HTML5免费视频教程

2. H5制作一个注册页面的代码实例

3. 教你用H5绘图的基础方法

4. 详解H5和HTML4的区别

5. H5制作一个计时器的代码演示

以上是詳解H5非常重要的28個新特性,新技巧與新技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！