怎么在自己的网页中插入媒体文件以及超链接

昨天我们学习了HTML的概念，HTML的基本骨架和基本骨架代码，单标签和双标签等东西，今天我们来学习如何在网页中添加媒体文件以及超链接

一、添加图片

昨天我们给不死之身添加了标题，水平分割线以及换行标签，我又想了一下，觉得这样太单调了，我想把专辑封面加上去，我们应该怎么做呢

打开VScode，进入到昨天的代码  不死之身.HTML

想插入图片肯定不能直接把文件拖到VScode里面，同样的也需要代码，这个代码就是img（是image的缩写，中文释义为图像）

我想在地球毁灭了以后添加专辑图片，所以我们在<b>的前面输入img按回车，会出现这些东西

有的同学会说：这img我们都知道是什么意思了，但是这src=" " 和 alt=" "是啥意思呢

不要着急，听我慢慢跟你说

他们都是img标签的属性，这个src是你要添加的文件的路径，alt是如果找不到这个图片文件所用来替代的文本，比如现在，我们的专辑图片在博客文件夹下

我们就在src里面输入不死之身专辑图片.jpg，下面一起来看一下

接下来我们让VScode找不到这个图片，我们把不死之身专辑图片.jpg替换成1.jpg，再把alt右边的引号里填写上专辑图片飞走啦，接下来我们看看效果

看到了吗同学们，浏览器找不到这个图片，就会把alt的内容显示出来

接下来我们把专辑图片换一个文件夹，放到博客文件夹的上一级目录

同学们不会怎么返回上一级目录吧，没事我教你

我们在src里面输入../  注意哦，是英文的点点斜杠，点在从右边shift键向左数两个，斜杠从右边shift键数一个

接下来我们来看一下

我们可以使用键盘的上下键操作，也可以直接鼠标点击，我们选择专辑图片，选择不死之身专辑图片.jpg

保存看一下效果

可是这图片好大啊，好丑啊，应该怎么办呢

我们可以在img标签中输入width="#"来调节宽度，输入height="#"来调节高度，但是同学们要注意，这个宽度和高度的单位可不是cm（厘米）啊之类的单位，他有一个特殊的单位叫做px（像素）比如1280*960就是width="1280" height="960"，也可以只输入他们其中的一个，这样图片会保证等比例缩放，下面我们试试把图片等比例缩小

接下来看看效果

还不错，可是为什么“地球毁灭了以后”这句话在外面，我想要他左对齐，这时候我们在这句话的前面加上一个<br>标签来进行换行（其实这图片选的不好，这封面上下都有白边，不喜欢）

让我看看怎么事

现在好多了

二、添加音频

我现在又想在我打开的页面里听到这首歌，应该怎么办呢，这时候就用到了<audio>标签了

这里面的src也是一样的，也是要填写文件路径

保存看一下效果

啊呀，怎么不显示呢，是我用错了吗，其实不是的，音乐已经加入进去了，但是我们要添加一个属性，它叫做controls（控制面板）只有加入了这个属性，我们才能控制它的播放以及暂停，我们加上去看一下效果（也是在audio标签内添加 属性和属性之间要用空格隔开 普通的空格就可以，不需要用&nbsp;）

现在就可以进行播放啦

有的同学想要循环播放，就在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>标签内添加哦 也要用空格隔开）

看下效果

现在就不会覆盖了

好啦，今天我们就到这里啦，同学们记得开心，也要记得复习