五、媒体标签
一）图片标签（< img >)
（< img src="" alt=""><标记名 属性>）
1.图片标签的src属性
属性名：src；
属性值：目标图片的路径；
注意事项：
*当前网页和目标在同一个文件夹中，路径直接写目标图片的名字即可（要带后缀名）；
*如果在其他文件夹中，记得./or../跳出文件夹选择；
*可以用网络图片，需填写图片的完整域名。
2.图片标签的alt属性
属性名：alt；
属性值：替换文本；
注意事项：
*当图片加载失败时才会显示出来的文字内容（图片路径错误时所显示的文字）
3.图片标签的title属性
属性名：title；
属性值：提示文本，当鼠标悬停在目标图片上时，会显示出来的文本。
注意事项：title属性不仅可以用于图片标签，还可用于其他标签。
代码格式：
<img src="" alt="图片不见了" title="这是一只猫">
4.图片标签的宽高属性（hight、width）
属性名：hight和width；
属性值：高度和宽度（数字 常用单位排序）
代码格式：
注意点：
*如果只设置了一张图片的高度而没有设宽度，那么其宽度则会根据高度自动等比例缩放；
*高宽设置不当，图片有可能会发生变形。
二）路径的介绍
使用场景：页面需要加载图片，需要通过路径找到对应的图片。
两种路径：绝对路径和相对路径。
1.绝对路径：
1）概念：
指目录下的绝对位置，可以直接达到目标位置，访问外网资源时（站外资源），只能使用绝对路径
2）书写格式1：协议://域名/目录
3）书写格式2：盘符:\目录
例：D:\day01\imges\1.jpg
2.相对路径：
1）概念：
当前文件出发寻找目标文件的过程(引用站内资源时，用相对路径)
2)相对路径分类：
同级目录、下级目录、上级目录
3）使用方法：
a.同级目录
访问同一文件夹中的另一b.html时：
例：要从a中访问b时：
<a href="./b.html"></a>
或：
<a href="b.html"></a>
b.上级目录
a访问根目录相同的c.html:
<a href="./../c.html"></a>
(注意：第一组./不可省略)
c.跳级1
a访问根目录相同的文件夹中的e.html:
<a href="./../002文件夹/e.html"></a>
d.跳级2
a访问根目录相同的文件夹中的文件夹中的d.html
<a href="./../002文件夹/003文件夹/d.html"></a>
e.跳级3
d访问a：
<a href="../../001文件夹/a.html"></a>
三）音频标签的介绍
1.使用场景：
在页面中插入音频
2.代码格式：
<audio src="" controls></audio>
3.常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件（播放钮进度条等） |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
4.注意事项：
音频标签目前只支持MP3、Wav、Ogg三种格式
四）视频标签的介绍：
1.使用场景：
在页面中插入视频
2.代码格式：
<video src="" controls></video>
3.常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器需要配合muted实现静音播放） |
| loop | 循环播放 |
4.注意事项：
视频标签目前只支持MP4、WebM、Ogg三种格式
