30、音频

<audio>标签定义声音，比如音乐或其他音频流。
属性 ----------- 值 ----------------------- 描述

  • autoplay - autoplay ------------- 如果出现该属性，则音频在就绪后马上播放。
  • controls - controls -------------- 如果出现该属性，则向用户显示控件，比如播放按钮。
  • loop ---------loop ---------------- 如果出现该属性，则每当音频结束时重新开始播放。
  • preload -- preload -------------- 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
  • src----------- url------------------- 要播放的音频的 URL。

<source> 标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。
src属性：媒体的地址。
type属性：媒体文件的类型，供浏览器决定是否下载。

例

<audio src="music/ForElise.mp3"  controls="controls">
  你的浏览器不支持Html5的音频功能
</audio>

<audio controls="controls">
  <source src="music/ForElise.mp3" type="audio/mp3">  <!-- Chrome --> 
  <source src="music/ForElise.ogg" type="audio/ogg">  <!-- Chrome、Firefox --> 
  你的浏览器不支持Html5的音频功能
</audio>

31、视频

<video> 标签定义视频，比如电影片段或其他视频流。
属性 ----------- 值 ----------------------- 描述

  • autoplay - autoplay -------------如果出现该属性，则视频在就绪后马上播放。
  • controls -- controls --------------如果出现该属性，则向用户显示控件，比如博放按钮。
  • height ------ pixels ---------------设置视频播放器的高度。
  • width -------- pixels ------------- 设置视频播放器的宽度。
  • loop ---------- loop --------------- 如果出现该属性，则当媒介文件完成播放后再次开始播放。
  • preload --- preload -------------- 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
  • poster -------- URL -------------- 规定视频下载时显示的图像，或者在用户点击 播放按钮前显示的图像。如果使用 "autoplay"，则忽略该属性。
  • src ------------- url ---------------- 要播放的视频的 URL。

例

<video src="music/test.mp4" width="320" height="240" 

poster="images/chrome.jpg" controls> 
  Your browser does not support the video tag. 
</video>

<video controls> 
  <source src="music/test.ogg" type="video/ogg">
  <source src="music/test.mp4" type="video/mp4">
  你的浏览器不支持Html5的视频功能
</video>

32、<figure> <figcaption> 标签

<figure> 定义媒介内容的分组，以及它们的标题。
<figcaption> 标签定义 figure 元素的标题。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

例：

<!DOCTYPE html>
<html>
<body>
        <figure>
          <figcaption>两个桌面</figcaption>
          <img src="images/1.png" alt="1" width = "300" />
          <img src="images/2.png" alt="2" width = "300" />
        </figure>
</body>
</html>

在这里插入图片描述