使用img标签插入图片，轻松操作

HTML使用元素img往文档中嵌入一张图片，图片本身并不在HTML文档中，而是以外链的形式引入的。元素img拥有一个必需的属性src，src的值就是图片的外链地址。元素img只有开始标签，没有结束标签，不会有子元素。以下是一个简单示例：

动手写4.1.1 图片简单示例

图片具有以下常用属性：

表4.1.1　图片元素img的常用属性

图片元素img是一个行内元素，多个图片、文本元素并排放在一起时，会在一行内连续显示，不同元素默认底部对齐。

动手写4.1.2 图片和文字并排

“动手写4.1.2”的body元素中，有两个img元素和一段纯文本。浏览器显示的时候，图片和文本的下方是对齐的，其效果如图4.1.1所示：

图4.1.1　多个图片、文本元素并排

虽然元素img是一个行内元素，但是它可以设置宽度和高度，这听上去与我们之前讲的行内元素的特性不太一致。事实上，一个文本字符本身也算是一种特殊的图片，我们可以把一张图片理解成一个文本字符，图片的宽和高就相当于文本字符的字号、字体等。

图片的属性宽度width和高度height可以单独设置。当单独设置其一时，图片会根据已设置的一个属性和原图的宽高比进行放大或缩小。当宽度和高度两个属性都被设置时，图片将按照设置的宽高来展示。(www.xing528.com)

动手写4.1.3 设置图片的宽度和高度

“动手写4.1.3”中，我们给第一张图片单独设置了宽度width，它的高度height会根据原图片的宽高比自动设置。第二张图片中，宽度width和高度height都被指定了，但是新尺寸的宽高比和原图差别很大，看上去就会有些畸形。其效果如图4.1.2所示：

图4.1.2　设置图片的宽度和高度

图片的alt属性起到替代文本的作用。有些浏览器允许用户将浏览器设置为不显示图片，或者图片的链接和格式不是有效的，这些情况下alt属性中的文本将会在页面中显示。

动手写4.1.4 图片不存在时显示替换文本

“动手写4.1.4”中有两个img元素。其中，第一个元素的链接是无效的，图片无法显示，浏览器就会显示出alt中的替换文本；第二个元素中的图片是可显示的，alt中的替换文本就不会出现在页面中。其效果如图4.1.3所示：

图4.1.3　网页显示图片的替换文本

提示

大部分情况下，浏览器允许显示图片（除非是视力障碍者专用的浏览器），人们也一般不会在网页中添加不可显示的图片。所以，在实际项目中，前端工程师有时不会给每个img元素设置alt属性。但是为了更好地容错，在时间和条件允许的情况下，应该为每张图片设置该属性。