HTML5标签（3）--图片标签，超链接标签

前言

在前两期的分享中，我们已经介绍了一些和文本有关的标签，但是一个页面如果只有文字是十分单调的，今天，我们来介绍一下图片，超链接有关的标签。

标签

< img >

 <img src="1.jpg" width="300px" alt="图片" title="原神">

< img >这个标签是在网页中插入图片的，是一个单标签，尖括号内的属性可以自行设置。首先我们先将一张图片放在本文件夹中，在src属性中写入图片名称，在width属性中设置宽度（单位：像素），在alt和title属性中写入图片提示信息即可。
alt和title可以不写。

那么alt属性是干什么的呢？如果我们在设置< img >标签错误导致图片无法正常显示，这是本应显示图片的地方就会显示alt中的错误信息。

<img src="1.pg" width="300px" alt="图片" title="原神">
注意：src中的jpg写错了，图片无法呈现，会出现下图状态

会出现一个图片碎掉的标志，旁边是alt中信息
而title的作用则是，当我们把鼠标停留在图片上时，会出现一个小框框，里面是title中的提示信息。

关于图片地址

在< img >标签中的src中我们需要写的实际上是图片的地址，HTML5有三种表示图片地址的方法，分别是绝对地址，相对地址和网络地址。

1. 绝对地址：就是直接写入图片在硬盘中的位置
2. 相对地址：./打开同级文件，/打开子级文件，…/打开父级文件，通过一层层打开文件，找到图片
3. 网络地址：直接把网上地址粘上就行。

 <img src="./2.jpeg"  width=300px alt="图片">相对地址
 <img src="D:\前端\源码\1.jpg" alt="">绝对地址

< a >

<a href="https://baidu.com">百度</a>

我们可通过此标签设置超链接，即页面之间的相互跳转，双标签，在href属性中添加跳转的链接即可，上面的代码就是跳转百度的超链接


超链接文本会一条下划线，颜色是蓝色，点过一次后会变成紫色，如果点住不放是红色。超链接也可以图片等其他形式。

<a href="https://www.163.com">
        <img src="2.jpeg" alt="" width="300px">
    </a>

此时点击图片即可跳转。

今天分享了两个色彩缤纷的标签，希望对大家有所帮助。