# 图片标签 图片是互联网的重要组成部分，让网页变得丰富多彩。本章介绍如何在网页插入图片。 ## 1.`<img>` `<img>`标签用于插入图片。它是单独使用的，没有闭合标签。 ~~~html <img src="logo.png"> <img src="http://noi.dodoke.com/images/logo.png"> ~~~ 上面代码在网页插入一张图片`logo.jpg`。`src`属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。 `<img>`默认是一个行内元素，与前后的文字处在同一行。 ~~~html <p>Hello<img src="logo.jpg">World</p> ~~~ 上面代码的渲染结果是，文字和图片在同一行显示。 图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。 - **alt 属性** `alt`属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。 ~~~html <img src="foo.jpg" alt="示例图片"> ~~~ 上面代码中，`alt`是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。 - **width 属性，height 属性** 图片默认以原始大小插入网页，`width`属性和`height`属性可以指定图片显示时的宽度和高度，单位是像素或百分比。 ~~~html <img src="logo.jpg" width="400" height="300"> ~~~ 上面代码中，`width`属性指定图片显示的宽度为400像素，`height`属性指定显示高度为300像素。 注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。 一种特殊情况是，`width`属性和`height`属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，`width`属性设置成200，那么浏览器会自动将`height`设成200。