HTML5教程-多媒體標籤-李南江

配套視頻下載地址

---

video標籤

• 做用: 播放視頻

• 格式1:

  <video src=""></video>

• video標籤的屬性

  • src: 告訴video標籤須要播放的視頻地址

  • autoplay: 告訴video標籤是否須要自動播放視頻

  • controls: 告訴video標籤是否須要顯示控制條

  • poster: 告訴video標籤視頻沒有播放以前顯示的佔位圖片

  • loop: 告訴video標籤循環播放視頻. 通常用於作廣告視頻

  • preload: 告訴video標籤預加載視頻, 可是須要注意preload和autoplay相沖, 若是設置了autoplay屬性, 那麼preload屬性就會失效

  • muted:告訴video標籤視頻靜音

  • width/height: 和img標籤中的如出一轍

• 格式2

  <video>
    <source src="" type=""></source>
    <source src="" type=""></source>
  </video>

• 第二種格式存在的意義

  • 因爲視頻數據很是很是的重要, 因此五大瀏覽器廠商都不肯意支持別人的視頻格式, 因此致使了沒有一種視頻格式是全部瀏覽器都支持的這個時候W3C爲了解決這個問題, 因此推出了第二個video標籤的格式

  • ideo標籤的第二種格式存在的意義就是爲了解決瀏覽器適配問題. video 元素支持三種視頻格式, 咱們能夠把這三種格式都經過source標籤指定給video標籤, 那麼之後當瀏覽器播放視頻時它就會從這三種中選擇一種本身支持的格式來播放

• 注意點:

  • 當前經過video標籤的第二種格式雖然可以指定全部瀏覽器都支持的視頻格式, 可是想讓全部瀏覽器都經過video標籤播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標籤, 不然一樣沒法播放

  • 在過去的一些瀏覽器是不支持HTML5標籤的, 因此爲了讓過去的一些瀏覽器也可以經過video標籤來播放視頻, 那麼咱們之後能夠經過一個JS的框架叫作html5media來實現

audio標籤

• 做用: 播放音頻

• 格式:
  ```html

  <audio src="">
  </audio>

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

- 注意點:
    - audio標籤的使用和video標籤的使用基本同樣, video中可以使用的屬性在audio標籤中大部分都可以使用, 而且功能都同樣. 只不過有3個屬性不能用, height/width/poster

![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-e8633d268a8fd3fc.jpg?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240)<h2 id="title3">詳情和概要標籤</h2>- 做用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認狀況下是摺疊展現, 想看見詳情必須點擊

- 格式:
```html<details>
    <summary>概要信息</summary>
    詳情信息</details>

marquee標籤

• 做用: ×××燈效果

格式:

<marquee>內容</marquee>

• 屬性:

  • direction: 設置滾動方向 left/right/up/down

  • scrollamount: 設置滾動速度, 值越大就越快

  • loop: 設置滾動次數, 默認是-1, 也就是無限滾動

  • behavior: 設置滾動類型 slide滾動到邊界就中止, alternate滾動到邊界就彈回

• 注意點:

  • marquee標籤不是W3C推薦的標籤, 在W3C官方文檔中也沒法查詢這個標籤, 可是各大瀏覽器對這個標籤的支持很是好

HTML中被廢棄的標籤

-- 因爲HTML如今只負責語義而不負責樣式.可是HTML一開始有一部分標籤連樣式也包攬了, 因此這部分標籤都被廢棄了

- b、u、i、s 
    - 以上標籤本身帶有樣式, 有濃厚的樣式做用, 從此通常都只做爲CSS鉤子使用- 原則: 不到萬不得已,切記不要使用如上標籤. 你們能夠到BAT的網站查看源代碼, 幾乎看不到以上標籤

• b(Bold)做用: 將文本字體加粗

  • 格式:<b>將文本字體加粗</b>

• u(Underlined)做用: 爲文本添加下劃線

  • 格式:<u>爲文本添加下劃線</u>

• i(Italic)做用: 顯示斜體文本效果

  • 格式:<i>顯示斜體文本效果</i>

• s(Strikethrough)做用: 爲文本添加刪除線

  • 格式:<s>爲文本添加刪除線</s>

• 爲了彌補 b、u、i、s標籤的不足, W3C又推出了一組新的標籤, 這些標籤在顯示上看似和buis沒什麼區別, 可是在語義上卻有重大區別

  • 格式:<del>已刪除的文本</del>

  • 格式:<em>強調內容</em>

  • 格式:<ins>新插入的文本</ins>

  • 格式:<strong>着重內容</strong>

  • strong做用: 着重內容

  • ins(Inserted)做用: 新插入的文本

  • em(Emphasized)做用:強調內容

  • del(Deleted)做用: 已刪除的文本

  • 其它更多詳見維基百科

HTML實體

• 咱們想在頁面上輸出<h1>這些字符，可是HTML認爲這是一個標籤, 因此若是須要輸出一些特殊的字符須要經過字符實體來實現

• lt是英語less than 小於的意思, <能夠在頁面上輸出一個小於符號

• gt是英語greater than 大於的意思, >能夠在頁面上輸出一個大於符號

• html中對空格，縮進，換行不敏感，若是同時出現多個空格縮進或者執行，頁面只會把它們看成一個空格來解析。因此想要在html中輸出空格必須使用來實現, 一個就表明一個空格

  • html對中文空格敏感, 也就是說能夠顯示中文空格, 可是不推薦這樣使用

  • 是英語non-breaking spacing, 翻譯爲不打斷空格的意思

顯示結果	描述	實體名稱
	空格
<	小於號	<
>	大於號	>
	版權
	註冊商標
	商標
&	和號	&
"	引號	"
'	撇號	'
￠	分	￠
￡	鎊	￡
￥	日圓	￥
	歐元
§	小節	§
×	乘號	×
÷	除號	÷

文／極客江南（簡書做者）原文連接：http://www.jianshu.com/p/a310662ed188著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。