06HTML基礎--多媒體標籤

video標籤

• 作用: 播放視訊
• 格式1:

<video src="">

</video>

• video標籤的屬性
  • src: 告訴video標籤需要播放的視訊地址
  • autoplay: 告訴video標籤是否需要自動播放視訊
  • controls: 告訴video標籤是否需要顯示控制條

o    poster: 告訴video標籤視訊沒有播放之前顯示的佔位圖片

o   

o    preload: 告訴video標籤預載入視訊, 但是需要注意preload和autoplay相沖, 如果設定了autoplay屬性, 那麼preload屬性就會失效

o    muted:告訴video標籤視訊靜音

o    width/height: 和img標籤中的一模一樣

• 格式2

<video>

    <source src=""

<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, 翻譯為不打斷空格的意思