06HTML基礎--多媒體标簽

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