非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.8 a元素和img元素结合使用

我会带着你远行 2024-03-26 19:34 34阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.8 a元素和img元素结合使用

![在这里插入图片描述][8363805e21db4f508e174aa3c79eb6e2.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.8 a元素和img元素结合使用 #####

*  在很多网站我们会发现图片也是可以点击进行跳转的
    
     *  img元素跟a元素一起使用，可以实现图片链接；
        
        ![在这里插入图片描述][c7db1b832ef44fdaab43870a6fecae0a.png_pic_center]
 *  实现思路：
    
     *  a元素中不存放文字，而是存放一个img元素；
     *  也就是img元素是a元素的内容；
    
    ![在这里插入图片描述][6c40fcf59d944583bbbf58cd2108aab2.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
      <a href="http://www.baidu.com">
        <img src="./images/star.jpg" alt="百度首页">
      </a>
    
    </body>
    </html>

![在这里插入图片描述][b55ab037a13c47f6ad6013eac2288ccd.png_pic_center]

[8363805e21db4f508e174aa3c79eb6e2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/02062f483beb46e5a4094f7aa11b861c.png
[c7db1b832ef44fdaab43870a6fecae0a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e0fb0645154b44bfa621b967a88b935c.png
[6c40fcf59d944583bbbf58cd2108aab2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a0c5517f19fb4cd39916bfbae5b2e623.png
[b55ab037a13c47f6ad6013eac2288ccd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3e25558f33024c14b2de1f82965c081b.png