03.Web大前端時代之:HTML5+CSS3入門系列~H5功能元素


Web大前端時代之:HTML5+CSS3入門系列:http://www.cnblogs.com/dunitian/p/5121725.html

2.功能元素

1.hgroup

對網頁或區段(section)的標題進行組合

2.figure

<figure> 標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。

figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。

Figcaption

figure的標題

一般格式:

<figure>

<figcaption>標題</figcaption>

<p>內容</p>

</figure>

3.video

標簽定義視頻,比如電影片段或其他視頻流

案例:

<video src="http://www.w3school.com.cn/i/movie.ogg" controls></video>

 

4. audio

定義音頻,比如音樂或其他音頻流

案例: http://www.dkill.net/DNT/HTML5/H5Music/play.html

<audio src="http://www.dkill.net//DNT/music/bs/英雄野望.mp3" autoplay>你的瀏覽器不支持audio標簽。</audio>

 

5.embed

<embed> 標簽定義嵌入的內容,比如插件。

插入各種多媒體,格式多樣

xhtml里面也是有的,逆天喜歡用他插入視頻(比object那種方法簡單)

<embed src="http://www.w3school.com.cn/i/helloworld.swf" />

 

6.mark

突出顯示部分文本,比如搜索里面的關鍵詞高亮

<p>我是<mark>毒逆天</mark></p>

 

7.time

定義日期或時間,或者兩者

8.canvas

表示圖片,如圖表和其他圖像。

<canvas> 標簽只是圖形容器,僅提供一個畫布,您必須使用腳本來繪制圖形。

<canvas id="myCanvas">瀏覽器不支持HTML5的canvas</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = '#FF0000';

ctx.fillRect(0, 0, 80, 100);

</script>

 

9.output

標簽定義不同類型的輸出,比如腳本的輸出。

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

<input id="a" type="text" value="1" />+<input id="b" type="text" value="2" />=

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

</form>

10.source

媒介元素(比如 <video> <audio>)定義媒介資源

 

11.menu

定義菜單列表。當希望列出表單控件時使用該標簽。

HTML 5 中,重新定義了 menu 元素,且使用用於排列表單控件提示:請使用 CSS 來定義列表的類型。

12. ruby

ruby 注釋(中文注音或字符)

 

13.command

定義命令按鈕,比如單選按鈕、復選框或按鈕

 

14.details

標簽用於描述文檔或文檔某個部分的細節

<details>

<summary>散客主頁</summary>

詳細內容

</details>

 

15.datalist

選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值

datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表

請使用 input 元素的 list 屬性來綁定 datalist

<input list="num" />

<datalist id="num">

<option value="1"></option>

<option value="2"></option>

<option value="3"></option>

</datalist>

 

16.meter

定義度量衡。僅用於已知最大和最小值的度量

<meter min="0" max="20" value="5"></meter>

 

17.progress

運行中的進度(進程)

可以使用 <progress> 標簽來顯示 JavaScript 中耗費時間的函數的進度。

 

<progress value="22" max="100"></progress>

<progress></progress>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM