css3新特性_常用HTML5新特性

新增特性都隻相容IE9以上，随着技術發展，這個相容性問題應該越來越不重要了，新标簽将會大量使用。

1、HTML5新增語義标簽

之前布局基本用div，但是div是沒有語義的。

<header>：頭部标簽

<nav>：導航标簽

<article>：内容标簽

<section>：定義文檔某個區域

<aside>：側邊欄标簽

<footer>：尾部标簽

2、HTML5新增多媒體标簽

可以使其非常友善的嵌入到網頁中

（1）音頻标簽：<audio>

目前<audio>标簽支援MP3、WaV、Ogg三種視訊格式，推薦使用MP3（支援更多浏覽器）

<           

常見屬性

autoplay="autoplay"

設定音頻自動播放（Chrome禁用了）

controls=" controls"

顯示播放控件，如播放按鈕等

loop="loop"

設定音頻循環播放

src="url"

音頻位址

（2）視訊标簽：<video>

目前<video>标簽支援MP4、WebM、Ogg三種視訊格式，推薦使用MP4格式（支援更多浏覽器）

<           

常見屬性

autoplay="autoplay"

設定視訊自動播放（Chrome需加muted屬性後才行）

controls="controls"

顯示播放控件

width="plxels

(像素)

"

設定視訊寬度

height="plxels

(像素)

"

設定視訊高度

loop="loop"

設定視訊循環播放

preload="auto

(預先加載視訊)/

none

(不預先加載視訊)

" src="url"

視訊位址

poster="Imgurl"

加載等待的畫面圖檔

muted="muted"

靜音播放

3、新增input表單

新增的input類型，限制使用者輸入必須為相應類型

type="email"

限制使用者輸入必須為Email類型

type="url" URL

類型

type="date"

日期類型

type="time"

時間類型

type="month"

月類型

type="week"

周類型

type="number"

數字類型

type="tel"

手機号碼

type="search"

搜尋框

type="color"

生成一個顔色選擇表單

新增表單屬性

required="required"

表單擁有該屬性，其内容不能為空，為必填項

placeholder="提示文本"

表單的提示資訊，預設值空

autofocus="autofocus"

重新整理頁面自動聚焦

autocomplete="off/on"

記住之前送出過的輸入的資訊，在下次鍵入内容時，顯示可選擇将其快速填充，前提是有name屬性，預設打開on。

multiple="multiple"

多選檔案送出

注：

狹義H5指的是HTML5結構标簽本身

廣義H5指HTML5+CSS3+JavaScript

雖然H5的一些新特性不被某些浏覽器支援，但是這是必然的發展趨勢。