5 媒体标签

5.1 图片标签和路径

5.1.1 图片标签

• 场景：在网页中显示图片

• 代码：

    <img src="" alt="">
  

• 特点：
  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置！

• 图片标签常见的属性

• width和height属性注意点：
  • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
  • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

5.1.2 路径

• 页面需要加载图片，需要先找到对应的图片，路径分为绝对路径和相对路径，了解路径之前先了解一下目录文件夹和根目录
  • 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等
  • 根目录：打开目录文件夹的第一层就是根目录

• 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径，例如：
  • 盘符开头：D:\day01\images\1.jpg
  • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

• 相对路径：从当前文件开始出发找目标文件的路径
  • 相对路径分类：
    • 同级目录：当前文件和目标文件在同一目录中
    • 下级目录：目标文件在下级目录中
    • 上级目录：目标文件在上级目录中
  • VSCode中路径的快捷操作？
    • 同级和下级目录：./ 之后选择即可
    • 上级目录：../ 之后选择即可

5.2 音频标签

• 场景：在页面中插入音频

• 代码：

    <audio src="./music.mp3" controls autoplay loop></audio>
  

• 常见属性：

• 注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

5.3 视频标签

• 场景：在页面中插入视频

• 代码：

    <video src="./video.mp4" controls autoplay muted loop></video>
  

• 常见属性：

• 注意点：视频标签目前支持三种格式：MP4 、WebM 、Ogg