IT課程 HTML基礎 014_多媒體和嵌入內容

多媒體和嵌入內容 HTML5中的音頻和視頻標籤的使用 嵌入內容的應用，如地圖、嵌入網頁等

圖片

圖片是一種非常重要的媒體類型，能夠提升用戶體驗，使信息傳遞更為直觀和生動。在 HTML 中，我們使用 <img> 標籤來插入圖片。<img> 標籤是自閉合的空標籤，也就是說它沒有結束標籤。圖片的地址通過 <img> 標籤的 src（source）屬性指定。

示例：

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="圖像描述">

效果：

圖像元素還可以包含以下屬性：

• width：指定圖像的寬度。
• height：指定圖像的高度。
• align：指定圖像的對齊方式。
• border：指定圖像的邊框。
• hspace：指定圖像與周圍元素的水平間距。
• vspace：指定圖像與周圍元素的垂直間距。
• ismap：指定圖像是否為地圖圖像。

設置圖片大小

我們可以通過 <img> 標籤的 width 和 height 屬性來設置圖片的寬度和高度。這兩個屬性的值可以是具體的像素值，也可以是百分比。

示例：

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="圖像描述" width="100" height="100" align="center" border="1">

效果：

設置替代文本

替代文本（alt text）用來在圖片無法加載的時候顯示，也被屏幕閱讀器用來讀出圖片的內容，幫助視力障礙者理解圖片。我們通過 <img> 標籤的 alt 屬性來設置替代文本。

示例：

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="找不到圖片時顯示此文本">

效果：

圖片鏈接

圖片也可以被用作超鏈接。我們只需要把 <img> 標籤放在 <a> 標籤內部，就可以創建一個圖片鏈接。

示例：

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="圖像描述" width="100" height="100" align="center" border="5">
3
</a>

效果：

[!小結]

• width 和 height 屬性來設置圖片的寬度和高度。這兩個屬性的值可以是具體的像素值，也可以是百分比。
• 如果同時設置了圖片的寬度和高度，而這兩個值的比例與圖片本身的比例不一致，那麼圖片可能會被拉伸或壓縮，造成形變。
• 如果圖片鏈接設置了邊框，那邊框默認和超鏈接一樣的顏色

視頻

HTML 視頻元素用於在網頁中嵌入視頻。視頻元素的標籤是 <video>。

示例：

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

效果：

視頻元素還可以包含以下屬性：

• width：指定視頻的寬度。
• height：指定視頻的高度。
• poster：指定視頻的海報幀。
• autoplay：指定視頻是否在加載時自動播放。
• loop：指定視頻是否循環播放。
• muted：指定視頻是否靜音。
• preload：指定視頻是否在加載時預加載。

示例：

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

這個示例包含一個視頻元素。視頻文件的 URL 設置為 mp4.mp4，寬度設置為 400 像素，高度設置為 300 像素，海報幀設置為 zhaojian-avatar.png，自動播放設置為 true，循環播放設置為 true，靜音設置為 true，預加載設置為 auto。

效果：

一個非常全面的 HTML 視頻 解決方案（不推薦）

以下實例中使用了 4 種不同的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。

示例：

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!小結]

• <source> 元素提供了一個備份選項，如果瀏覽器不支持該格式，則將嘗試播放第二個 <source> 元素指定的視頻文件。

音頻

HTML 中的 <audio> 元素用於在網頁中嵌入音頻內容。

示例：

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

效果：

音頻元素還可以包含以下屬性：

• controls：指定是否顯示音頻控件，默認值是 true。
• autoplay：指定音頻是否在加載時自動播放。
• loop：指定音頻是否循環播放。
• muted：指定音頻是否靜音。
• preload：指定音頻是否在加載時預加載。

示例：

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

這個示例包含一個 <audio> 元素。音頻文件的 URL 設置為 mp3.mp3，控制控件設置為 true，自動播放設置為 true，循環播放設置為 true，靜音設置為 true，預加載設置為 auto。

效果：

embed 元素

embed 元素是 HTML 4.01 中引入的元素。它可以嵌入任何類型的資源，包括視頻、音頻、圖像、Flash 等。embed 元素需要瀏覽器支持特定的插件才能顯示。

示例：

1
<embed src="資源 URL" type="資源類型">

[!小結]

• HTML5 引入了 <video> 和 <audio> 元素來替代 <embed> 元素。
• embed 元素可以嵌入任何類型的資源，而 <video> 元素和 <audio> 元素只能嵌入視頻和音頻資源。
• embed 元素需要瀏覽器支持特定的插件才能顯示，而 <video> 元素和 <audio> 元素不需要。
• <embed> 元素仍然可以使用，但它不再被推薦。

object元素

object 元素是 HTML 4.01 中引入的元素。它可以嵌入任何類型的資源，包括視頻、音頻、圖像、Flash 等。object 元素使用 <param> 元素來指定資源的屬性，例如資源的寬度、高度、背景顏色等。

示例：

1
<object data="資源 URL" type="資源類型">
2
  <param name="屬性名" value="屬性值">
3
  ...
4
</object>

object 和 embed 元素的具體區別：

[!小結]

• 如果您需要嵌入任何類型的資源，並且瀏覽器支持特定的插件，則可以使用 object 元素。
• 如果您只需要嵌入特定類型的資源，並且不需要瀏覽器支持特定的插件，則可以使用 embed 元素。
• 如果您只需要嵌入視頻或音頻資源，則建議使用 <video> 或 <audio> 元素。
• <video> 和 <audio> 元素不需要瀏覽器支持特定的插件，並且提供了更豐富的功能。

框架

<iframe> 元素是 HTML 中用於在一個文檔中嵌套另一個文檔的標籤。它允許將一個文檔嵌套到另一個文檔中，並在其中顯示被嵌套文檔的內容。這通常用於嵌入其他網頁、嵌入視頻、地圖等內容。

<iframe> 元素具有以下屬性：

• src 屬性定義要嵌入的網頁或文檔的 URL。
• width 屬性定義 <iframe>元素的寬度。
• height 屬性定義 <iframe> 元素的高度。
• frameborder 屬性定義 <iframe> 元素的邊框是否可見。
• border 屬性定義 <iframe> 元素的邊框寬度。
• framespacing 屬性定義 <iframe> 元素與其周圍內容之間的間距。
• marginwidth 屬性定義 <iframe> 元素的左和右邊距。
• marginheight 屬性定義 <iframe> 元素的上和下邊距。
• scrolling 屬性定義 <iframe> 元素是否允許滾動。
• name 屬性定義 <iframe> 元素的名稱。
• id 屬性定義 <iframe> 元素的 ID。
• class 屬性定義 <iframe> 元素的類。

示例：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>HTML iframe 元素</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>這是一個顯示 zhaojian.net 網站內容的 iframe。</p>
9
  </iframe>
10
</body>
11
</html>

效果：