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

1240

配套視頻下載地址



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標籤中的一模一樣

1240

  • 格式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-images.jianshu.io/upload_images/647982-e8633d268a8fd3fc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<h2 id="title3">詳情和概要標籤</h2>- 作用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認情況下是摺疊展示, 想看見詳情必須點擊

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

1240


marquee標籤

  • 作用: 跑馬燈效果

格式:

<marquee>內容</marquee>
  • 屬性:

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

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

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

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

  • 注意點:

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

1240

1240


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)作用: 已刪除的文本

    • 其它更多詳見維基百科

1240


HTML實體

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

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

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

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

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

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

顯示結果描述實體名稱

空格
<小於號<
>大於號>
版權
註冊商標
商標
&和號&
"引號"
'撇號'
日圓
歐元
§小節§
×乘號×
÷除號÷



文/極客江南(簡書作者)
原文鏈接:http://www.jianshu.com/p/a310662ed188
著作權歸作者所有,轉載請聯繫作者獲得授權,並標註“簡書作者”。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章