5.2 插入图片

上一节我们学习了不同格式的图片选择，已经确定了制作网页的主流图片格式为JPEG和GIF。本节开始学习如何控制图片在网页上的显示。

5.2.1 插入图片到网页

插入图片的HTML是单标签<img/>，通过src属性的值确定所插入图片的路径。在D:\web\img\目录下，放入图片文件，并分别命名为img.jpg。创建网页文件，命名为img.htm，编写代码如代码5.2所示。

在浏览器地址栏输入http://localhost/img.htm，浏览效果如图5.2所示。

代码比较简单，不过读者必须清楚，网页文件和图片文件是分开存储的。如果图片的位置改变了，图片将无法显示，即网页文件只是通过<img/>代码和图片链接。

5.2.2 设置图片的高度和宽度

在默认情况下，<img/>标签显示的图片高和宽取图片原始的高和宽。比如图片的原始尺寸为宽250、高200像素，在网页中显示也是宽250、高200像素。

不过某些情况下需要不同的高和宽，通过<img/>标签的width属性和height属性可以设置图片在网页显示宽度和高度。

width属性和height属性的值不需要单位，默认单位为像素。编写格式如下。

5.2.3 设置图片的边框

<img/>标签可以通过border属性的设置，使图片在网页中显示边框，border属性的值为边框的粗细，单位默认为像素。其编写格式如下。

5.2.4 给图片添加提示文字

类似于超级链接的文字提示，<img/>标签的title属性同样可以设置图片的文字提示，其编写格式如下。

修改img.htm网页文件，编写代码如代码5.3所示。

在浏览器地址栏输入http://localhost/img.htm，浏览效果如图5.3所示。

5.2.5 给图片添加替代文字

当<img/>标签的src属性的路径找不到相应的图片文件时，<img/>标签提供了一个alt属性的值来替代图片的文字。其编写格式如下。

在D:\web\目录下创建网页文件，命名为img_alt.htm，编写代码如代码5.4所示。

在浏览器地址栏输入http://localhost/img_alt.htm，浏览效果如图5.4所示。