1.3.3　图像

V1-9　图文混排

在HTML中，图像的应用非常广泛，图像由<img>标签定义。<img>是单标签，意思是说，它只包含属性，并且没有闭合标签，可以使用/>来对该标签进行结束。

要在页面上显示图像，需要使用源属性（src），src即source。源属性的值是图像的URL地址。定义图像的语法如下。

URL指存储图像的位置。如果名为“boat.gif”的图像位于www.w3school.com.cn的images目录中，那么其URL为http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

1．HTML图像的alt属性

alt属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。如<img src="boat.gif"alt="Big Boat"/>，表示在浏览器无法载入图像时，替换文本属性告诉读者失去的信息，此时浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

2．HTML图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素。如<img src="pulpit.jpg"alt="Pulpit rock"width="304"height="228"/>，表示浏览器在显示该图像时按照宽假304像素、高228像素进行显示。

提示

指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度和宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。另外，如果需要缩放图像，建议要么只指定其宽度，要么只指定其高度，这样浏览器会自动按比例缩放；否则，如果高度和宽度同时指定，但是并没有按照图像的原始比例来指定，会导致图像变形。实例代码如下。

当然，开发人员也可以在图片在加超链接，只要将<img>标签嵌套在<a>标签中即可。另外，图像也常用于页面背景，比如可以为body标签设置background属性指定其背景图片，代码如下。

另外还有图文混排的问题，比如网页http://www.woniuxy.com/learn/的顶部主要由一排图标和文字构成，如图1-15所示。

图1-15　蜗牛学院页面头部

如果单纯地将图片和文字放在一行上，将会出现无法正常对齐的情况，代码如下。

运行效果如图1-16所示。

图1-16　图文混排无法对齐

所以，当图片和文本放在一起进行排版的时候，会看到这样的问题出现。对于图文混排的情况，还需要设置图片的附加属性align，如表1-2所示。

表1-2　图像的align属性取值

Netscape又增加了texttop、absmiddle、baseline和absbottom 4种垂直对齐属性，Internet Explorer则增加了center。所以，不同的浏览器以及同一浏览器的不同版本对align属性的某些值的处理方式是不同的。笔者不建议使用该属性，简单来看如下实例代码。

运行效果如图1-17所示。

上述源文件的内容存在如下问题。

（1）对于第一张图片，强制设置了宽度和高度，但是并没有按照原始比例进行设置，所以出现了严重的变形。

（2）对于第二张图片，只设置了宽度，高度会等比例调整，所以图形等比例缩小。同时使用了align="middle"属性，使右边的文本基本上保持了与图片的居中对齐。

（3）图片与文本之间存在一些距离，这些距离便是使用&nbsp；（空格）这个特殊符号来进行处理的，即在文本与图片之间添加了9个空格。所以，如果在源文件中单纯地使用Space键输入空格，在浏览器中是无法处理的，就像回车符必须使用<br/>一样，一切皆需使用标签。

（4）最下方使用<hr/>标签添加了一条水平线。

图1-17　图文混排时保持垂直居中

基于上述为题的解决方案，基础优化官网页面的头部，代码如下。

使用浏览器打开，看到的效果如图1-18所示。

图1-18　图文混排时垂直居中

注意　某些浏览器可能无法正确解析align属性，则上述效果无法实现。