首頁  >  文章  >  web前端  >  日間TML

日間TML

PHPz
PHPz原創
2024-08-06 10:45:001132瀏覽

Day TML

與昨天相比緩慢的一天。
首先回顧昨天的主題,然後到今天的主題
研究 HTML 媒體
圖片、音訊、影片...
(稍後會附加項目,因為我有 GITHUB 問題)

*我的筆記:*

嵌入影像

要在 HTML 中嵌入圖像,請使用 日間TML;標籤。該標籤是自動關閉的,需要 src 屬性來指定圖像的路徑,並需要 alt 屬性來提供替代文字以供可訪問性。

範例:

 <img src="path/to/image.jpg" alt="Description of image" width="600" height="400"> 

  • src:圖片檔案的路徑(相對或絕對 URL)。
  • alt:圖像的文字描述(對於可訪問性和 SEO 很重要)。
  • widthheight:指定尺寸的選用屬性。

嵌入音訊

要嵌入音頻,請使用

範例:

<audio controls>
  <source src="path/to/audio.mp3" type="audio/mpeg">
  <source src="path/to/audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
  • 控制:顯示播放控制。
  • :指定音訊檔案及其 MIME 類型。

嵌入影片

要嵌入視頻,請使用

<video width="600" height="400" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  • 寬度高度:指定視訊播放器的尺寸。
  • 控制:顯示播放控制。
  • :指定視訊檔案及其 MIME 類型。

大家一起

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Embedding Example</title>
</head>
<body>

  <h1>Embedding Images, Audio, and Video in HTML</h1>

  <h2>Image Example</h2>
  <img src="path/to/image.jpg" alt="Beautiful Landscape" width="600" height="400">

  <h2>Audio Example</h2>
  <audio controls>
    <source src="path/to/audio.mp3" type="audio/mpeg">
    <source src="path/to/audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>

  <h2>Video Example</h2>
  <video width="600" height="400" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    <source src="path/to/video.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>

</body>
</html>

完成

以上是日間TML的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn