詳解H5非常重要的28個新特性,新技巧與新技術-H5教程-PHP中文網

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

Y2J

發布： 2017-05-23 14:19:34

原創

4188 人瀏覽過

HTML5有很多的新功能.新程式碼.非常不錯.現在總結一下.僅供參考1. 新的Doctype
#儘管使用，即使瀏覽器不懂這句話也會依照標準模式去渲染
2. Figure元素
用

”About — 來語意表示有標題的圖片
< ;figure>

This is an image of something interesting.
This is an image of something interesting. < ;/p>

3. 重新定義的
#已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明
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是否是必須的，你可以像下面這樣宣告

或

15. Autofocus屬性
正如它的詞義，就是聚焦到輸入框裡面

16. Audio支援
#HTML5提供了

<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很像，

<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屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面載入的時候去預先載入影片

<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元素
把元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：

Search Results

They were interrupted, just after Quato said, ”Open your Mind”.

23. 什么时候用

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元素
元素用来显示计算结果，也有一个和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;}

登入後複製

【相关推荐】

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