昨天我们学习了HTML的概念，HTML的基本骨架和基本骨架代码，单标签和双标签等东西，今天我们来学习如何在网页中添加媒体文件以及超链接
一、添加图片
昨天我们给不死之身添加了标题，水平分割线以及换行标签，我又想了一下，觉得这样太单调了，我想把专辑封面加上去，我们应该怎么做呢
我想在地球毁灭了以后添加专辑图片，所以我们在<b>的前面输入img按回车，会出现这些东西
有的同学会说：这img我们都知道是什么意思了，但是这src=" " 和 alt=" "是啥意思呢
不要着急，听我慢慢跟你说
他们都是img标签的属性，这个src是你要添加的文件的路径，alt是如果找不到这个图片文件所用来替代的文本，比如现在，我们的专辑图片在博客文件夹下
我们就在src里面输入不死之身专辑图片.jpg，下面一起来看一下
接下来我们让VScode找不到这个图片，我们把不死之身专辑图片.jpg替换成1.jpg，再把alt右边的引号里填写上专辑图片飞走啦，接下来我们看看效果
看到了吗同学们，浏览器找不到这个图片，就会把alt的内容显示出来
接下来我们把专辑图片换一个文件夹，放到博客文件夹的上一级目录
同学们不会怎么返回上一级目录吧，没事我教你
我们在src里面输入https://blog.csdn.net/weixin_72702318/article/ 注意哦，是英文的点点斜杠，点在从右边shift键向左数两个，斜杠从右边shift键数一个
接下来我们来看一下
我们可以使用键盘的上下键操作，也可以直接鼠标点击，我们选择专辑图片，选择不死之身专辑图片.jpg
保存看一下效果
我们可以在img标签中输入width="#"来调节宽度，输入height="#"来调节高度，但是同学们要注意，这个宽度和高度的单位可不是cm（厘米）啊之类的单位，他有一个特殊的单位叫做px（像素）比如1280*960就是width="1280" height="960"，也可以只输入他们其中的一个，这样图片会保证等比例缩放，下面我们试试把图片等比例缩小
接下来看看效果
还不错，可是为什么“地球毁灭了以后”这句话在外面，我想要他左对齐，这时候我们在这句话的前面加上一个<br>标签来进行换行（其实这图片选的不好，这封面上下都有白边，不喜欢）
让我看看怎么事
现在好多了
二、添加音频
我现在又想在我打开的页面里听到这首歌，应该怎么办呢，这时候就用到了<audio>标签了
这里面的src也是一样的，也是要填写文件路径
保存看一下效果
啊呀，怎么不显示呢，是我用错了吗，其实不是的，音乐已经加入进去了，但是我们要添加一个属性，它叫做controls（控制面板）只有加入了这个属性，我们才能控制它的播放以及暂停，我们加上去看一下效果（也是在audio标签内添加 属性和属性之间要用空格隔开 普通的空格就可以，不需要用 ）
现在就可以进行播放啦
有的同学想要循环播放，就在audio标签中添加loop属性，这里就不添加给你们看了，和添加controls一样（现在很多浏览器不支持自动播放了，就不说了）
三、添加视频
有的同学喜欢看mv吧，可是怎么添加呢，这时候就要用到<video>标签了，具体怎么做呢，看我操作
先添加文件路径
然后加上controls属性实现控制播放的操作
现在让我们看看效果吧
插入的视频也是可以循环播放的，和音频一样，都是添加loop属性
四、插入超链接
同学们都逛过淘宝吧，假如你喜欢一件商品，点进去，那个可以点进去的东西，就叫做超链接
怎么插入超链接呢，要用到<a></a>标签了，超链接标签和上面的那三个可不太一样，他们都是单标签，而超链接标签是双标签，要区分开哦
具体怎么做呢，慢慢的看我操作
先输入a按回车，会出现<a href=""></a>
这些都是什么呢？
刚才说了<a></a>是超链接标签，href="#"就是他的属性，他是用来填写要链接的地址，就是你逛淘宝点了一件商品，商品的详情页的那个页面，它可以跳转到网页，跳转到你本地自带的文件，有的同学会说，可既然是双标签，那两个标签的中间就必须填写什么吧，说的对，两个标签的中间就是填写点击的介质，就是你逛淘宝点了一件商品，点的那个就是要在两个标签中间填写的介质，它可以是文本，图片视频等
接下来我们先用文本当做介质，跳转到本地文件（我们拿mv做示范）
保存看看效果
可以看到，这个文本变成了蓝色带下划线的样子，我们点击一下看看可以跳转吗
可以跳转
接下来我们把介质换成图片试一下，就用上面的专辑图片，把它稍微的做一下改动
看看怎么事
点击它
答案是也可以跳转
当然，他也可以跳转到网页，我们试一下
我们要跳转到的网址（https://music.163.com/#/mv?id=5327522）
保存看一下效果
可以跳转
可是跳转之后会覆盖原来的网页选项卡，怎么办呢，这时候我们可以添加一个叫做target="_blank"的属性，我们试一下（要在<a>标签内添加哦 也要用空格隔开）
看下效果
现在就不会覆盖了
好啦，今天我们就到这里啦，同学们记得开心，也要记得复习