html5學習筆記2——新元素
一:H5的改變
<canvas> 新元素
標簽 | 描述 |
---|---|
<canvas> | 標簽定義圖形,比如圖表和其他圖像。該標簽基於 JavaScript 的繪圖 API |
新多媒體元素
標簽 | 描述 |
---|---|
<audio> | 定義音頻內容 |
<video> | 定義視頻(video 或者 movie) |
<source> | 定義多媒體資源 <video> 和 <audio> |
<embed> | 定義嵌入的內容,比如插件。 |
<track> | 為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。 |
新表單元素
標簽 | 描述 |
---|---|
<datalist> | 定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。 |
<keygen> | 規定用於表單的密鑰對生成器字段。 |
<output> | 定義不同類型的輸出,比如腳本的輸出。 |
新的語義和結構元素
HTML5提供了新的元素來創建更好的頁面結構:
標簽 | 描述 |
---|---|
<article> | 定義頁面獨立的內容區域。 |
<aside> | 定義頁面的側邊欄內容。 |
<bdi> | 允許您設置一段文本,使其脫離其父元素的文本方向設置。 |
<command> | 定義命令按鈕,比如單選按鈕、復選框或按鈕 |
<details> | 用於描述文檔或文檔某個部分的細節 |
<dialog> | 定義對話框,比如提示框 |
<summary> | 標簽包含 details 元素的標題 |
<figure> | 規定獨立的流內容(圖像、圖表、照片、代碼等等)。 |
<figcaption> | 定義 <figure> 元素的標題 |
<footer> | 定義 section 或 document 的頁腳。 |
<header> | 定義了文檔的頭部區域 |
<mark> | 定義帶有記號的文本。 |
<meter> | 定義度量衡。僅用於已知最大和最小值的度量。 |
<nav> | 定義運行中的進度(進程)。 |
<progress> | 定義任何類型的任務的進度。 |
<ruby> | 定義 ruby 註釋(中文註音或字符)。 |
<rt> | 定義字符(中文註音或字符)的解釋或發音。 |
<rp> | 在 ruby 註釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。 |
<section> | 定義文檔中的節(section、區段)。 |
<time> | 定義日期或時間。 |
<wbr> | 規定在文本中的何處適合添加換行符。 |
二:視頻標簽
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持Video標簽。 </video> //可以定義多個source,video會依次嘗試播放,直到一個能正常播放的
可以在界面上定義按鈕,通過dom事件來控制video的播放、暫停、縮小、放大等:
HTML5 video.var myVideo=document.getElementById("video1"); //獲取視頻元素 function playPause()//定義按鈕的響應事件 { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=600; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; }
三:音頻標簽
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支持 audio 元素。 </audio>
四:新的Input類型
新類型目前還不被所有瀏覽器支持。
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
<input type="類型" name="">
五:新表單元素
1:輸入框自動完成數據表
<datalist> 元素規定輸入域的選項列表。
<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時,瀏覽器應該在該域中顯示填寫的選項:
使用 <input> 元素的列表屬性與 <datalist> 元素綁定:通過input的list屬性,指向datalist的id。
<input list="browsers">//輸入框 <datalist id="browsers">//數據集 <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
2:加密表單數據
<keygen>標簽規定用於表單的密鑰對生成器字段。
當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。
私鑰(private key)存儲於客戶端,公鑰(public key)則被發送到服務器。公鑰可用於之後驗證用戶的客戶端證書(client certificate)。
<form action="demo_keygen.asp" method="get"> 用戶名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form>
3:動態輸出
<output> 元素用於不同類型的輸出,比如計算或腳本輸出。
<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>
五:表單新屬性
1:autocomplete自動完成
autocomplete 適用於 <form> 標簽,以及以下類型的 <input> 標簽:text, search, url, telephone, email, password, datepickers, range 以及 color。
<form autocomplete="on"/>
2:novalidate不驗證輸入值
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form novalidate>
3:autofocus頁面加載時自動獲取焦點
<input autofocus>
4:min/max 用於數字、日期輸入框指定輸入範圍
註意: min、max 屬性適用於以下類型的 <input> 標簽:date pickers、number 以及 range。
5:multiple 允許多值
註意: multiple 屬性適用於以下類型的 <input> 標簽:email 和 file。
<input type="file" name="img" multiple>//上傳多個文件
6:pattern 驗證模式
pattern 屬性描述了一個正則表達式用於驗證 <input> 元素的值。
註意:pattern 屬性適用於以下類型的 <input> 標簽: text, search, url, tel, email, 和 password.
<input type="text" name="" pattern="[A-Za-z]{3}" title="">
7:placeholder 輸入提示
<input type="text" name="" placeholder="First name">
8:required 必填字段
註意:required 屬性適用於以下類型的 <input> 標簽:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usrname" required>
9:step 間隔
step 屬性為輸入域規定合法的數字間隔。
提示: step 屬性可以與 max 和 min 屬性創建一個區域值.
註意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
六:新語義元素——描述web頁面
1:section
<section> 標簽定義文檔中的節。
<section> <h1>標題</h1> <p>內容</p> </section>
2:<article> 標簽定義獨立的內容
<article> <h1>標題</h1> <p>內容</p> </article>
3:nav 頁面導航欄
<nav> 元素用於定義頁面的導航鏈接部分區域。
<nav> <a href="url">導航1</a> | <a href="/url/">導航</a> | <a href="/url/">導航</a> | <a href="/url/">導航</a> </nav>
4:aside 定義側邊欄
<aside> <h4>標題</h4> <p>內容</p> </aside>
5:header 文檔的頭部
<article> <header> <h1>頭部</h1> <p>頭部內容</p> </header> <p>文章體</p> </article>
6:footer 文檔底部
一個頁腳通常包含文檔的作者,著作權信息,鏈接的使用條款,聯系信息等
<footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>
7:<figure>標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>標題</figcaption> </figure>
html5學習筆記2——新元素