文章目录
- 1. 图片标签
- 1.1. img 标签
- 1.2. 相对路径
- 1.3. 绝对路径
- 2. 多媒体标签
- 2.1. 音频标签
- 2.2. 视频标签
1. 图片标签
1.1. img 标签
img标签是用来加载图片的，比如我们加载一张喜羊羊的照片。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML学习</title>
</head>
<body>
<div>
<img src="./喜羊羊.jpg" alt="喜洋洋" />
</div>
</body>
</html>
我们来分析一下img标签，它主要包括src和alt，当然也有title、width和height。
- src：图片路径，这里是以你当前工作目录下的路径为参考点，当然也可以直接加载 url 的路径。
- alt：图片文字说明，这里是当你加载不出图片时显示的文字说明，建议写上去。
- title：代表你的鼠标悬浮在图片上，会有一个文本提示。
- width：图片宽度
- height：图片高度
<img
src="./img/c.jpg"
width="200px"
height="400px"
alt="投资自己"
title="人生格言"
/>
1.2. 相对路径
以你打开文件目录的位置为参考点，去建立路径。
- ./ 代表当前目录
- **…/ **代表往上找一级目录
- **/ **下一级
1.3. 绝对路径
以根位置为参考点，去建立路径。
- 本地路径：D:\Program Files\喜羊羊.jpg
- 网络绝对路径：网上图片的路径[https://img-blog.csdnimg.cn/direct/fa558b04584a42e8b5517fc20bfd0dd0.png#pic_center]
2. 多媒体标签
2.1. 音频标签
<audio>标签用来定义音频，它是双标签。
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL 地址 | 音频地址 |
| controls | 向用户显示音频控件（比如播放/暂停按钮） | |
| autoplay | 自动播放 | |
| muted | 静音 | |
| loop | 循环播放 | |
| preload | auto / metadata / none | none : 不预加载音频。 metadata : 仅预先获取音频的元数据。 auto : 可以下载整个音频文件。 |
<audio src="./img/audio.mp3" controls></audio>
controls 属性是一个布尔属性。如果属性存在，它指定视频控件的显示方式。
音频预加载，如果使用 autoplay ，则忽略preload属 性。
要实现自动播放,需要加上muted静音属性
2.2. 视频标签
<video> 标签用来定义视频，它是双标签，属性和音频一样。
<!-- 视频标签 -->
<video src="./img/video.mp4" controls autoplay muted></video>
