认识 img 图片标签

在我们的网页当中,图片肯定是必不可少的元素,有了图片之后,我们的网页网站就会变得更加的丰富起来。那么我们要在 HTML 当中插入图片的话,就会用到我们的 img 图片标签了。例如:

图片描述
图文并茂的网站。

1. IMG 标签的使用

img 标签为单标签,所以没有尾标签。而 img 标签有一个 必填的属性: src 属性,代表图片的路径。图片的路径可以为图片的相对路径,绝对路径和网络路径。这里我们以网络路径示范:

<img src="https://www.imooc.com/static/img/index/logo-recommended.png" alt="慕课网logo">

会呈现以下效果:

图片描述

img 标签还有一个属性为 alt 属性,alt 属性表示错误提示,如果图片的路径既 src 属性的地址出错时,会显示 alt 属性的内容,我们把上面例子稍微修改一下,把路径写错,既:

<img src="https://www.imooc.com/static/img/index/logo-recommended123.png" alt="慕课网logo">

则会在页面上呈现以下效果:

图片描述

如果图片路径出错,那么就不会显示对应的图片,而会显示一个图片加载失败的样式。这时候我们编写的 ALT 属性里面的内容也会呈现在页面上,就表示我们当前这张加载失败的图片的错误提示。

注意:

alt 属性的内容只会在图片加载失败时显示,既图片路径出错时,如果图片加载成功,则 alt 属性的内容会自动隐藏。 alt 属性起到一个提示作用,如果我们在编写代码时,不小心把图片路径写错,则会提示我们该张图片为哪一张,具体内容是什么。而 alt 属性还有一个重要的作用就是网站的 SEO 作用 (搜索引擎爬取网页的内容),假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:

  1. 网速太慢;
  2. src 属性中的错误;
  3. 浏览器禁用图像;
  4. 用户使用的是屏幕阅读器。

其重要性主要有: 网页内容相关性是关键词优化的前提,搜索引擎认为,网页上的图片应该与网页主题相关。

反过来讲,当搜索引擎要判断网页的关键词时,图片的 alt-代替属性是一个可信任的参考点。所以, 别忘了在图片的 alt-代替属性。

img 标签还可以设置 widthheight 属性来改变图片的宽高,例如:

<img src="https://www.imooc.com/static/img/index/logo-recommended.png" alt="慕课网logo" width="100" height="100">

则会呈现以下效果:

图片描述

图片的宽高为100 * 100。

Tips:IMG 标签的 widthheight 属性的值为数字,一般情况下为正整数。

2. 注意事项

  1. img 标签为单标签,没有尾标签;
  2. img 标签的 widthheight 都不要写单位,直接写数字即可;
  3. src 和 alt 属性均为 img 标签的必填属性。

3. 真实案例分享

百度搜索(部分)

<ul>
    <li>
      <a>
        <img
          src="https://pics0.baidu.com/feed/bd3eb13533fa828b324d63ea7f258e32970a5a0a.jpeg">
      </a>
    </li>
    <li>
      <a>
        <img
          src="https://pics4.baidu.com/feed/30adcbef76094b36eaacf1e422f6b3df8d109dba.jpeg">
      </a>
    </li>
    <li>
      <a>
        <img
          src="https://pics5.baidu.com/feed/730e0cf3d7ca7bcb8af180f33f33a465f724a821.jpeg">
      </a>
    </li>
  </ul>

淘宝网(部分)

<div>
   <img src="//img.alicdn.com/imgextra/i3/180185321/O1CN01agBO561pB43nm30sJ_!!180185321-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp">
</div>
<div>
   <h4>Huawei/华为 p40 pro</h4>
   <p>MUI 10.1系统,内置华为AI语音助手Celia ,支持“Hey Celia”语音唤醒。HMS服务,华为P40搭载华为HMS服务。</p>
   <p><span></span>0 人说好</p>
</div>

4. 小结

  1. img 标签为单标签,没有尾标签。
  2. img 标签的 src 属性为必选项,其余属性为可选项。
  3. img 标签可以嵌套在任意标签里。
  4. img 标签图片路径可以为图片的相对路径,绝对路径和网络路径,通常情况下我们采用相对路径。

图片描述