图片

用 <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 属性值来理解这张图片是什么，并适当地抓取到图片搜索引擎中。
利于有着视觉障碍，通过使用屏幕阅读器来浏览网页用户。

图片尺寸

通过 width 和 height 属性可以设置图片的宽高，数值的单位是像素。像素单位会在 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

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

练习

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