HTML5?Video(視頻)

<video width="320" height="240" controls>?

?<source src="movie.mp4" type="video/mp4"> ?

<source src="movie.ogg" type="video/ogg">您的瀏覽器不支持Video標(biāo)簽。

</video>

<video> 元素提供了 播放、暫停和音量控件來控制視頻。

同時(shí) <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度，所需的視頻空間會在頁面加載時(shí)保留。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時(shí)保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。

<video> 與</video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個(gè) <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識別的格式：

視頻格式與瀏覽器的支持

當(dāng)前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:

MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

視頻格式

格式????????????????MIME-type

MP4????????????????video/mp4

WebM????????????video/webm

Ogg????????????????video/ogg

HTML5 Audio

<audio controls>?

?<source src="horse.ogg" type="audio/ogg"> ?

<source src="horse.mp3" type="audio/mpeg">您的瀏覽器不支持 audio 元素。

</audio>

control 屬性供添加播放、暫停和音量控件。

在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。

<audio> 元素允許使用多個(gè) <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件

音頻格式及瀏覽器支持

目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:

音頻格式的MIME類型

Format????????????????MIME-type

MP3????????????????????audio/mpeg

Ogg????????????????????audio/ogg

Wav????????????????????audio/wav

HTML5 新的 Input 類型

HTML5 擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。

Input 類型: color

color 類型用在input字段主要用于選取顏色，如下所示：

選擇你喜歡的顏色: <input type="color" name="favcolor">

Input 類型: date

date 類型允許你從一個(gè)日期選擇器選擇一個(gè)日期。

生日: <input type="date" name="bday">

Input 類型: datetime

datetime 類型允許你選擇一個(gè)日期（UTC 時(shí)間）。

生日 (日期和時(shí)間): <input type="datetime" name="bdaytime">

Input 類型: datetime-local

datetime-local 類型允許你選擇一個(gè)日期和時(shí)間 (無時(shí)區(qū)).

生日 (日期和時(shí)間): <input type="datetime-local" name="bdaytime">

Input 類型: email

email 類型用于應(yīng)該包含 e-mail 地址的輸入域。

E-mail: <input type="email" name="email">

Input 類型: month

month 類型允許你選擇一個(gè)月份。

生日 (月和年): <input type="month" name="bdaymonth">

Input 類型: number

number 類型用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對所接受的數(shù)字的限定：

數(shù)量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

Input 類型: range

range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動條。

<input type="range" name="points" min="1" max="10">

Input 類型: search

search 類型用于搜索域，比如站點(diǎn)搜索或 Google 搜索。

Search Google: <input type="search" name="googlesearch">

Input 類型: tel

電話號碼: <input type="tel" name="usrtel">

Input 類型: time

time 類型允許你選擇一個(gè)時(shí)間。

選擇時(shí)間: <input type="time" name="usr_time">

Input 類型: url

url 類型用于應(yīng)該包含 URL 地址的輸入域。在提交表單時(shí)，會自動驗(yàn)證 url 域的值。

添加您的主頁: <input type="url" name="homepage">

Input 類型: week

week 類型允許你選擇周和年。

選擇周: <input type="week" name="week_year">

HTML5?表單元素

HTML5 有以下新的表單元素:

<datalist>

<keygen>

<output>

HTML5 <datalist> 元素

<datalist> 元素規(guī)定輸入域的選項(xiàng)列表。<datalist> 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。當(dāng)用戶在自動完成域中開始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)：使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

<input list="browsers">?

????????<datalist id="browsers">?

?????????<option value="Internet Explorer">?

?????????<option value="Firefox">?

?????????<option value="Chrome">?

?????????<option value="Opera">?

?????????<option value="Safari">

</datalist>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一種驗(yàn)證用戶的可靠方法。<keygen>標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時(shí)，會生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）。

<form action="demo_keygen.asp" method="get">

????????用戶名: <input type="text" name="usr_name">

????????加密: <keygen name="security">

????????<input type="submit">

</form>

HTML5 <output> 元素

<output> 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

????????<input type="range" id="a" value="50">100 +

????????<input type="number" id="b" value="50">=<

????????output name="x" for="a b"></output>

</form>

HTML5?表單屬性

<form> / <input> autocomplete 屬性

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。當(dāng)用戶在自動完成域中開始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)。提示:?autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關(guān)閉的。注意:?autocomplete 適用于標(biāo)簽，以及以下類型的，標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo-form.php" autocomplete="on">?

????????First name:<input type="text" name="fname"><br>?

?????????Last name: <input type="text" name="lname"><br>?

?????????E-mail: <input type="email" name="email" autocomplete="off"><br>?

?????????<input type="submit">

</form>

<form> novalidate 屬性

novalidate 屬性是一個(gè) boolean(布爾) 屬性.novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。

<form action="demo-form.php" novalidate>?

?????????E-mail: <input type="email" name="user_email">?

?????????<input type="submit">

</form>

<input> autofocus 屬性

autofocus 屬性是一個(gè) boolean 屬性.autofocus 屬性規(guī)定在頁面加載時(shí)，域自動地獲得焦點(diǎn)。

First name:<input type="text" name="fname" autofocus>

<input> form 屬性

form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。

提示:如需引用一個(gè)以上的表單，請使用空格分隔的列表

<form action="demo-form.php" id="form1">?

?????????First name: <input type="text" name="fname"><br>?

?????????<input type="submit" value="提交">

</form>

????????Last name: <input type="text" name="lname" form="form1">

<input> formaction 屬性

The formaction 屬性用于描述表單提交的URL地址.The formaction 屬性會覆蓋<form> 元素中的action屬性.

注意:?The formaction 屬性用于 type="submit" 和 type="image"

<form action="demo-form.php">

?????????First name: <input type="text" name="fname"><br>?

????????Last name: <input type="text" name="lname"><br>?

?????????<input type="submit" value="提交"><br>?

?????????<input type="submit" formaction="demo-admin.php" value="提交">

</form>

<input> formenctype 屬性

formenctype 屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼 (只對form表單中 method="post" 表單)formenctype 屬性覆蓋 form 元素的 enctype 屬性。主要:?該屬性與 type="submit" 和 type="image" 配合使用。

<form action="demo-post_enctype.php" method="post">?

????????First name: <input type="text" name="fname"><br>?

?????????<input type="submit" value="提交">?

?????????<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">

</form>

<input> formmethod 屬性

formmethod 屬性定義了表單提交的方式。formmethod 屬性覆蓋了 <form> 元素的 method 屬性。

注意:?該屬性可以與 type="submit" 和 type="image" 配合使用

<form action="demo-form.php" method="get">?

?????????First name: <input type="text" name="fname"><br>?

????????Last name: <input type="text" name="lname"><br>?

?????????<input type="submit" value="提交">?

????????<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">

</form>

<input> formnovalidate 屬性

novalidate 屬性是一個(gè) boolean 屬性.novalidate屬性描述了 <input> 元素在表單提交時(shí)無需被驗(yàn)證。formnovalidate 屬性會覆蓋 <form> 元素的novalidate屬性.注意:?formnovalidate 屬性與type="submit一起使用。

<form action="demo-form.php">

????????? E-mail: <input type="email" name="userid"><br>

? ????????<input type="submit" value="提交"><br>

? ????????<input type="submit" formnovalidate value="不驗(yàn)證提交">

</form>

<input> formtarget 屬性

formtarget 屬性指定一個(gè)名稱或一個(gè)關(guān)鍵字來指明表單提交數(shù)據(jù)接收后的展示。The formtarget 屬性覆蓋 <form>元素的target屬性.注意:?formtarget 屬性與type="submit" 和 type="image"配合使用.

<form action="demo-form.php">

? First name: <input type="text" name="fname"><br>

? Last name: <input type="text" name="lname"><br>

? <input type="submit" value="正常提交">

? <input type="submit" formtarget="_blank"

? value="提交到一個(gè)新的頁面上">

</form>

<input> height 和 width 屬性

height 和 width 屬性規(guī)定用于 image 類型的 <input> 標(biāo)簽的圖像高度和寬度。

注意:?height 和 width 屬性只適用于 image 類型的標(biāo)簽。

提示:圖像通常會同時(shí)指定高度和寬度屬性。如果圖像設(shè)置高度和寬度，圖像所需的空間 在加載頁時(shí)會被保留。如果沒有這些屬性， 瀏覽器不知道圖像的大小，并不能預(yù)留 適當(dāng)?shù)目臻g。圖片在加載過程中會使頁面布局效果改變 （盡管圖片已加載）。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<input> list 屬性

list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表。

<input list="browsers">

<datalist id="browsers">

? <option value="Internet Explorer">

? <option value="Firefox">

? <option value="Chrome">

? <option value="Opera">

? <option value="Safari">

</datalist>

<input> min 和 max 屬性

min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。

注意:?min、max 和 step 屬性適用于以下類型的 標(biāo)簽：date pickers、number 以及 range。

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

<input> multiple 屬性

multiple 屬性是一個(gè) boolean 屬性.multiple 屬性規(guī)定<input> 元素中可選擇多個(gè)值。注意:?multiple 屬性適用于以下類型的?標(biāo)簽：email 和 file:

Select images: <input type="file" name="img" multiple>

<input> pattern 屬性

pattern 屬性描述了一個(gè)正則表達(dá)式用于驗(yàn)證 <input> 元素的值。注意:pattern 屬性適用于以下類型的標(biāo)簽: text, search, url, tel, email, 和 password.提示：?是用來全局?title?屬性描述了模式.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input> placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。簡短的提示在用戶輸入值前會顯示在輸入域上。注意:?placeholder 屬性適用于以下類型的標(biāo)簽：text, search, url, telephone, email 以及 password。

<input type="text" name="fname" placeholder="First name">

<input> required 屬性

required 屬性是一個(gè) boolean 屬性.required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。

注意:required 屬性適用于以下類型的標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Username: <input type="text" name="usrname" required>

<input> step 屬性

step 屬性為輸入域規(guī)定合法的數(shù)字間隔。如果 step="3"，則合法的數(shù)是 -3,0,3,6 等

提示：?step 屬性可以與 max 和 min 屬性創(chuàng)建一個(gè)區(qū)域值.

注意:?step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="3">