HTML基础知识3-超链接（a）标签以及图片（img）标签

桃扇骨 2022-12-22 04:39 256阅读 0赞

**一：a标签**  
又叫做：超链接标签  
　　　　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。  
　　　　  
实例：

<!DOCTYPE html>
    <html lang="en,ch">
        <head>
            <meta charset="UTF-8">
            <title>超链接标签</title>
        </head>
        <body>
            <a href="http://www.baidu.com">百度</a>
        </body>
    </html>

如下图所示：  
我们可以点击“百度”，然后自行跳转至百度网页  
![在这里插入图片描述][20201117162635472.png_pic_center]

我们可以看到上图a标签里面有两个属性  
分别是  
1.`href`属性

实例：

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="http://www.baidu.com）

相对URL - 指当前站点中确切的路径（href=“index.htm”）  
\#学django的时候会用的比较多

锚URL - 指向页面中的锚（href="\#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，`<a name='top'>xxx</a>`

2.`target`属性  
target 属性规定在何处打开页面上的所有链接。  
target：  
\_blank表示在新标签页中打开目标网页  
\_self表示在当前标签页中打开目标网页  
默认是self

<!DOCTYPE html>
    <html lang="en,ch">
        <head>
            <meta charset="UTF-8">
            <title>超链接标签</title>
        </head>
        <body>
            <a href="http://www.baidu.com" target="_blank">百度</a>
        </body>
    </html>

点击百度，我们发现新开了一个窗口打开了百度的网页，这就是target的作用  
![在这里插入图片描述][2020111716291392.png_pic_center]

**二：img标签**

img标签又被称作图片标签  
顾名思义，就是浏览器中显示出图片的作用

如上图所示：  
**src属性**代表着图片的路径  
分为绝对路径和相对路径两种，网上图片的路径或者本机的图片路径

**alt属性**是当图片未加载成功的提示

而**title**则是表示，当你鼠标悬停在图片上时，所提示给你的信息

**width和height**，则分别对应图片的宽和高

实例：

<!DOCTYPE html>
    <html lang="en,zh">
    <head>
        <meta charset="UTF-8">
        <title>图片</title>
        
    </head>
    <body>
        <img src="C:\壁纸精选\tx.png" alt="图片加载失败" title="头像" width="580px" height="580px">
    </body>
    </html>

如下图所示：  
图片已经成功加载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70_pic_center]

[20201117162635472.png_pic_center]: /images/20221120/5c871daa64cf42bdb690851a75866763.png
[2020111716291392.png_pic_center]: /images/20221120/1190497e81044332a20e42db8c1fcf05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3e7e2dca34914164a0c5586ffc2a16a1.png