图片

<img> 元素便可以显示一张图片, src 属性是图片的地址。 $$tip

地址的选择参考相对路径与绝对路径章节

$$

<img src="https://3yya.com/logo-mini.png" />

$$demo

<img src="https://3yya.com/logo-mini.png" />

$$

备选文本

可以为 <img> 图片添加 alt 属性值,在图片未能正常显示时将会显示 alt 的值。

以下的例子故意用了一个错误的图片地址。

<img src="https://xxxx.png" alt="三眼鸭的LOGO" />

$$demo <div style="height:20px"> <img src="https://xxxx.png" alt="三眼鸭的LOGO" /> </div> $$

设置一个备选文本有以下的好处:

  • 在图片地址错误或浏览器不支持图片格式等的情况下显示,让用户能明白这张图片应该是什么。
  • 搜索引擎并不能看到一张图片,却可以通过 alt 属性值来理解这张图片是什么,并适当地抓取到图片搜索引擎中。
  • 利于有着视觉障碍,通过使用屏幕阅读器来浏览网页用户。

图片尺寸

通过 widthheight 属性可以设置图片的宽高,数值的单位是像素。像素单位会在 CSS 的章节学习到。

例子改变了图片的宽高成 200 像素。

<<img
    src="https://3yya.com/logo-mini.png"
    alt="三眼鸭的LOGO"
    width="200"
    height="200"
/>

$$demo

<img

src="https://3yya.com/logo-mini.png"

alt="三眼鸭的LOGO"

width="200"

height="200"

/>

$$

$$tip

图片尺寸的定义应该在 CSS 中进行,在之后 CSS 的章节将会学习到。

$$

$$tip

  • 如果同时设置宽高,则作为元素的实际尺寸。
  • 如果仅设置宽或高,则另一边会依据图片原比例适应长度,最终元素与图片的宽高比一致。
  • 如果不设置宽高,则元素的尺寸为图片的宽高。 $$

练习

  1. 找一张网络上的图片,将其插入到你的页面中。
  2. 将一张本地的图片插入到你的网页中。
  3. 下载图片路径练习项目文件,补全所有页面中的图片路径,使图片能正常显示。 $$answer 点击下载图片路径答案项目文件 $$