HTML5新知識(shí)有哪些

這篇文章主要為大家展示了“HTML5新知識(shí)有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5新知識(shí)有哪些”這篇文章吧。

一、h6新增的主要語義化標(biāo)簽如下：

1、header 頁面頭部、頁眉

2、nav 頁面導(dǎo)航

3、atricle 一篇文章

4、section 文章中的章節(jié)

5、aside 側(cè)邊欄

6、footer 頁面底部、頁腳

PC端兼容h6新標(biāo)簽的方法，在頁面中引入一下js文件

<script  type="text/javascript"  src="//cdn.bootcss.com/html5shiv/r29/html5.js?1.1.11"></script>

二、HTML5新增表單控件

1、新增類型：網(wǎng)址  郵箱  日期  時(shí)間  星期  數(shù)量  范圍  電話  顏色  搜索

　　a、<label>網(wǎng)址：</label><input type="url" name=" " required>
　　b、<label>郵箱：</label><input type="email" name=" " required>
　　c、<label>日期：</label><input type="date" name=" ">
　　d、<label>時(shí)間：</label><input type="time" name=" ">
　　e、<label>星期：</label><input type="week" name=" ">
　　f、<label>數(shù)量：</label><input type="number" name=" ">
　　g、<label>范圍：</label><input type="range" name=" " >
　　h、<label>電話：</label><input type="tel" name=" " >
　　i、<label>顏色：</label><input type="color" name=" ">
　　j、<label>搜索：</label><input type="search" name=" ">

2、新增常用表單控件屬性

<input  type="text"  placeholder="請(qǐng)輸入用戶名"  autofocus  autocomplete="off">

　　a、placeholder  設(shè)置文本框默認(rèn)提示文字

　　b、autofocus  自動(dòng)獲得焦點(diǎn)

　　c、autocomplete  設(shè)置是否有聯(lián)想關(guān)鍵詞下拉，一般設(shè)置為"off",將其關(guān)掉   如：autocomplete="off"

三、HTML5音頻audio和視頻video

html5增加了audio和video標(biāo)簽，提供了在頁面上插入音頻和視頻的標(biāo)準(zhǔn)方法

1、audio標(biāo)簽  支持格式：ogg、wav、mp3

對(duì)應(yīng)的屬性：

　　a、autoplay  自動(dòng)播放

　　b、controls 顯示播放器

　　c、loop  循環(huán)播放器

　　d、preload 預(yù)加載

　　e、multed 靜音

如：<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<audio autoplay controls loop preload>

　　<source src="source/audio.wav" type="">

　　<source src="source/audio.mp3" type="">

</audio>

source標(biāo)簽的作用是提供多個(gè)媒體文件地址，如果一個(gè)地址的文件不兼容，就使用下一個(gè)地址。

2、video標(biāo)簽  支持格式：ogg、mp4、webM

對(duì)應(yīng)的屬性：

　　a、width

　　b、height

　　c、Poster

如：<video src="source/audio.mp3" autoplay controls loop preload width="600" height="400"></video>

3、可選擇第三方播放器

　　a、cyberplayer

　　b、tencentPlayer

　　c、youkuPlayer

以上是“HTML5新知識(shí)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！