HTML 标签大全 - 3.框架与图像与音频或者视频

乐地课堂

已于 2023-06-12 16:19:53 修改

阅读量59

点赞数

分类专栏： HTML 前端开发文章标签： html html5

于 2023-06-10 12:06:07 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/131140381

版权

前端开发同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

HTML 标签大全

Audio/Video

<audio> 定义声音，比如音乐或其他音频流。
<video> 定义一个音频或者视频
<source> 定义媒体资源。
<track> 为媒体( <video> 和 <audio>)元素定义外部文本轨道。

图像

<img> 定义图像。
<figcaption> 定义一个图片描述
<figure> figure 标签用于对元素进行组合。

框架

<iframe> 定义内联框架。

Audio/Video代码示例

<!DOCTYPE html>
 <html>
 <head> 
 <meta charset="utf-8"> 
 <title>代码示例</title> 
 </head>
 <body>
 <!-- audio source 带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）： -->
 <audio controls>
   <source src="https://mp3.haoge500.com/upload/rank/20211231/cb48eb41debf54148a4b24d941891663.mp3" >
   <source src="test.mp3" > <!-- 示例 虚构文件 -->
 您的浏览器不支持 audio 元素。
 </audio>
 <hr>

 <!-- video source 带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：-->
 <video width="320" height="240" controls>
   <source src="https://mp3.haoge500.com/upload/rank/20211231/cb48eb41debf54148a4b24d941891663.mp3"  type="video/mp3">
   <source src="test.ogg"  type="video/ogg"> <!-- 示例 虚构文件 -->
   您的浏览器不支持 HTML5 video 标签。
 </video>
 <hr>
 
 <!-- video track 带有字幕轨道（test.vtt）的视频-->
 <video controls width="320" height="240"
       src="https://mp3.haoge500.com/upload/rank/20211231/cb48eb41debf54148a4b24d941891663.mp3">
     <track default
           kind="captions"
           srclang="en"
           src="test.vtt" /> <!-- 示例 虚构文件 -->
     抱歉，您的浏览器不支持嵌入视频！
 </video>
 </body>
 </html>

图像代码示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>代码示例</title> 
</head>
<body>
<figure>
  <img src="https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>图片描述.</figcaption>
</figure>
</body>
</html>

框架代码示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>代码示例</title> 
</head> 
<body>
<iframe src="https://blog.csdn.net/dhldhl/article/details/130794166">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>
</body>
</html>