unique007

1.HTML中的圖片

HTML5的<figure>和<figcaption>為圖片提供了一個語義容器，在標題和圖片之間建立了清晰的聯系。<figcaption>元素告訴瀏覽器和其他輔助的技術工具這段說明文字描述了<figure>元素的內容。<figure>可以是幾張圖片、一段代碼、音視頻、方程或表格等。

<figure>
  <img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1"
   alt="《肖申克的救贖》海報"
   height="300">
  <figcaption>故事發生在1947年，銀行家安迪（Andy）被指控槍殺了妻子及其情人，安迪被判無期徒刑，這意味著他將在肖申克監獄中渡過余生。</figcaption>
</figure>

效果圖如下：

小結：如果圖像對您的內容有意義，則應該使用HTML圖像。若純粹是裝飾，則應該使用CSS背景圖片，能更好的控制圖片和設置圖片的位置。

2.HTML中的視頻和音頻

先看代碼：

<video src="rabit320.webm" controls>
  <p>你的瀏覽器不支持HTML5視頻，可點擊<a href="rabbit320.mp4">此鏈接</a>觀看</p>
</video>

效果圖如下：

你的瀏覽器不支持HTML5視頻，可點擊此鏈接觀看

• 其中，src指向你要嵌入到網頁中的視頻資源；controls可控制回放以及音量功能。 <video>標簽內的內容叫后備內容，當瀏覽器不支持<video>的時候，就會顯示這段內容。
  
• 接下來，
  我們把src從<video>中移除，把它放在幾個單獨的<source>中，這樣瀏覽器會先檢查<source>，并且播放第一個與其自身相匹配的媒體，你的視頻應當包括webm和mp4兩種格式，目前這兩種格式已經足夠支持大多數平臺和瀏覽器。<source>中的 type屬性可選，建議加上，它包含了視頻文件的MIME types，同時會跳過那些不支持的格式。若你不加的話，瀏覽器會嘗試加載每一個文件，直到找到一個正確的格式，這樣會消耗大量的時間和資源。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的瀏覽器不支持HTML5視頻，可點擊<a href="rabbit320.mp4">此鏈接</a>觀看</p>
</video>

<audio>用法幾乎與 <video>完全一樣。

• 再來看一個非常有意義的標簽 <track>，它可以給聽不懂音頻的/不方便播放音頻的/聽覺有障礙的人提供字幕。當然這就需要用到一個WebVTT文本格式，一個典型的WebVTT文件如下：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段
...

• 要以.vtt后綴名保存文件；
• <track>鏈接.vtt文件，需放在<audio>或<video>中，<source>之后，用kind指明是哪種類型(eg:subtitles/captions/descriptions)，用srclang告訴瀏覽器你使用的語言。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  <p>你的瀏覽器不支持HTML5視頻，可點擊<a href="rabbit320.mp4">此鏈接</a>觀看</p>
</video>

以上均是參考MDN web docs，總結出來的比較重要的知識點，與君共勉。不妥之處，還望大家及時提出！