---

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標簽

• 作用: 播放音頻

• 格式:

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

• 注意點:
  • audio標簽的使用和video標簽的使用基本一樣, video中能夠使用的屬性在audio標簽中大部分都能夠使用, 并且功能都一樣. 只不過有3個屬性不能用, height/width/poster

---

詳情和概要標簽

• 作用:利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息
  默認情況下是折疊展示, 想看見詳情必須點擊

• 格式:

<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沒什么區別, 但是在語義上卻有重大區別

  • strong作用: 著重內容
    • 格式:<strong>著重內容</strong>
  • ins(Inserted)作用: 新插入的文本
    • 格式:<ins>新插入的文本</ins>
  • em(Emphasized)作用:強調內容
    • 格式:<em>強調內容</em>
  • del(Deleted)作用: 已刪除的文本
    • 格式:<del>已刪除的文本</del>
  • 其它更多詳見維基百科
    

---

HTML實體

• 我們想在頁面上輸出<h1>這些字符，但是HTML認為這是一個標簽, 所以如果需要輸出一些特殊的字符需要通過字符實體來實現

• lt是英語less than 小于的意思, <可以在頁面上輸出一個小于符號

• gt是英語greater than 大于的意思, >可以在頁面上輸出一個大于符號

• html中對空格，縮進，換行不敏感，如果同時出現多個空格縮進或者執行，頁面只會把它們當作一個空格來解析。所以想要在html中輸出空格必須使用來實現, 一個就代表一個空格

  • html對中文空格敏感, 也就是說可以顯示中文空格, 但是不推薦這樣使用
  • 是英語non-breaking spacing, 翻譯為不打斷空格的意思

顯示結果描述實體名稱

	空格
<	小于號	<
>	大于號	>
?	版權	?
?	注冊商標	?
?	商標	?
&	和號	&
"	引號	"
'	撇號	'
￠	分	￠
￡	鎊	￡
￥	日圓	￥
€	歐元	€
§	小節	§
×	乘號	×
÷	除號	÷

---

學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038

總結

以上是生活随笔為你收集整理的06HTML基础--多媒体标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。