别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？
或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。
购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。
坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。
何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。
17. HTML 中的图像
- 详细资料
- 发布于 2012年9月18日
- 点击数：4246
序言
在本篇文章中，我将讲述美化 Web 页面的要素之一，即图像。在学习完本篇文章后，你将了解到如何以可访问的方式向 Web 文档中加入图像（这里的可访问指视力受损的人也可以使用你的网站中的信息），以及什么时候及如何在页面布局中使用内联图像或背景图像。你可以点击这里下载本篇文章中使用的示例图像，在本篇文章中我将引用这些图像文件。本篇文章的内容目录如下：
一张图片胜过千字描述，是这样的吗？
你可能很想在你的网站上使用很多图像。的确，图像能很好地让访问者直观地感受网站的整体风格，同时图像和插图也是帮助视觉学习者更容易地理解复杂信息的好方式。
但在网站上放置很多图像，也有其缺点，那就是不是每个在网上浏览网站的人都可以看到这些图像。回想一下浏览器刚能支持网页上的图像时，许多访问网站的人为节省带宽和获得更快的网页浏览速度（那时候网速非常慢，而且上网的费用非常高，按分钟计费），都选择关闭浏览器显示图像的功能。虽然现在这种情况已不常见了，但并不是就完全不存在了，在网页中使用图像可能面临的问题包括：
- 由于显示屏幕小及下载数据的费用较高，用移动设备浏览网页的人也许依然会关闭浏览器显示图像的功能。
- 访问网站的人可能是盲人或视力受损而无法正常地看到网页上图像的人。
- 一些访问者可能是来自另一种文化背景的人，无法理解你在网页上使用的图标。
- 目前搜索引擎还仅把文本编入索引，而并不分析图像，这意味着储存在图像里的信息尚不能被搜索引擎发现和编入索引。
因此，为你的网站精心挑选图像并只在确实需要时才使用它们，这是很重要的。更为重要的是，你应确保总是为那些不能看到图像的访问者提供了替代性的选择。在“网页导航栏和菜单”上不正确地使用图标和图像，会造成很多问题，这将在后面的文章中讨论。现在，先让我们看看向 HTML 文档中加入图像有哪些可用技术。
网页上不同类型的图像——内容图像和背景图像
向 Web 文档中添加图像，主要有两种方法：使用 img 元素来添加内容图像和使用 CSS 来为元素应用背景图像，具体使用哪一种方法要取决于你加入图像的目的：
- 如果图像对文档的内容而言是至关重要的，例如作者的一张照片或一个显示一些数据的图形，则该等图像应该被作为一个
img元素而加入文档，同时带有适当的替代文本。 - 如果图像是仅起美化和装饰网页作用的图像，则你应该使用 CSS 背景图像。原因在于这些图像不必带有任何替代文本（为此类图像加入这样的替代文本“一个绿色的圆形”，对盲人访问者而言有什么用呢？），而且你在 CSS 中进行图像的样式化，比在 HTML 中这样做要有多得多的选择。
img 元素及其属性
通过使用 img 元素，可以很容易地向 HTML 文档中添加图像。下面的这个 HTML 文档（即下载的 zip 文件中的 inlineimageexample.html），就加入了一张名为 balconyview.jpg 的图片，可在浏览器中显示（但前提条件为在你保存 HTML 文档的文件夹里保存有这张图片）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="/balconyview.jpg"> </body> </html>
如果你在浏览器中运行这段代码，其显示出来的样子如图1所示。
图1：图片在浏览器中显示出来的样子
使用 alt 属性为图像提供替代文本
以上那段 HTML 代码中插入了一个能在浏览器中正常显示的图像，但由于 img 元素都需要一个 alt 属性，因此它是一段有问题的 HTML 代码。这个属性包含在由于某些原因而使图像不可用时，所显示的替代文本。造成图像不可用的原因包括：无法找到图像、无法载入或“用户代理”（一般指浏览器）不支持图像显示。此外，对靠辅助技术为他们朗读网页内容的盲人来说，辅助技术是把 img 元素的 alt 属性中包含的替代文本读给他们听。因此，写出描述图像内容的适当替代文本并将它们放入 alt 属性中，这是很重要的。
在网上你们可以找到很多讨论“alt 标签”的文章。“alt 标签”这种说法实际上是错误的，因为它并不是一个标签（或元素），而是 img 元素的一个属性，它对网页的可访问性和搜索引擎优化而言都是非常重要的。
为让网页上的图像能为所有人都理解，你需要为图像添加适当的替代文本，例如，对以上那个图像就可以加上这样的替代文本：“View from my balcony, showing a row of houses, trees and a castle”（译注，从阳台上看到的景色，包括一排房子、绿树和一个城堡）（inlineimageexamplealt.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="/balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle"> </body> </html>
alt 属性包含在图像不可用时应该显示的文本。在图像成功载入和显示时，alt 属性中包含的信息就不应显示。在这方面，Internet Explorer 浏览器就存在一个错误，即当你把鼠标指针悬停在一个图像上时，会显示一个工具提示。这的确是一个错误，因为它导致很多人在 alt 属性中加入关于图像的附加信息。如果你想为图像加入附加信息，应该使用 title 属性，而不是 alt 属性。关于 title 属性，我将在下面的部分讲述。
使用 title 属性为图像添加附加信息
当你把鼠标光标悬停在一个图像上时，绝大多数浏览器都会将 img 元素的 title 属性值显示为一个工具提示（如图2所示）。 这可以帮助访问者了解图像的附加信息，但你不能假定每个访问者就一定有一个鼠标。title 属性虽然可以很有用，但它并不是提供关于图像的关键信息的最保险的方式。实际上 title 属性是为图像添加如：心情，或上下文意思等信息的好方式（inlineimagewithtitle.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with alternative text and title</title> </head> <body> <img src="/balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle" title="What I see when I look out of my window; the castle was one reason to move there."> </body> </html>
如果你在浏览器中载入以上的代码，会看到如图2所示的显示画面。
图2：在绝大多数浏览器中 title 属性被显示为工具提示
使用 longdesc 属性为复杂图像提供一个替代文件
如果图像是一个非常复杂的图像，如一个图表，你可以使用 longdesc 属性为图像提供更长篇幅的描述，这样那些使用屏幕阅读器访问网页的人或在浏览器中关闭图像显示功能的人，也依然可以了解到图像所传达的信息。
这个属性包含一个指向包含同样信息的文档的 URL 地址。例如，如果你在网页上放置了一个显示一组信息的图表，你就可以使用 longdesc 属性，将该图表与一个数据表相链接（inlineimagelongdesc.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with longdesc</title> </head> <body> <img src="/chart.png" width="450" height="150" alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </body> </html>
数据文件 fruitconsumption.html 包含一个表述相同信息的非常简单的数据表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Fruit consumption</title> </head> <body> <table summary="Fruit Consumption of under 15 year olds, March 2007"> <caption>Fruit Consumption</caption> <thead> <tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr> </thead> <tbody> <tr><td>Apples</td><td>10</td></tr> <tr><td>Oranges</td><td>58</td></tr> <tr><td>Pineapples</td><td>95</td></tr> <tr><td>Bananas</td><td>30</td></tr> <tr><td>Raisins</td><td>8</td></tr> <tr><td>Pears</td><td>63</td></tr> </tbody> </table> <p><a href="/inlineimagelongdesc.html">Back to article</a></p> </body> </html>
这两种不同的数据表示方式的显示效果如图3所示。
图3：你可以使用 longdesc 属性将一个包含复杂数据的文档与一个图像相链接
请注意，在页面上是无法看到有一个与图像相链接的长描述文件的，但辅助技术设备是可以让其用户知道有一个可用的替代图像文件的。
使用 width 和 height 属性来定义图像尺寸，以便图像被更快地显示
当“用户代理”发现 HTML 中的一个 img 元素时，它就开始载入 src 属性所指向的图像。在默认状态下，“用户代理”并不知道图像的尺寸，因此它将仅显示混杂在一起的文本，而在图像完全载入和显示时，才将页面显示全。这样就可能使页面的载入速度变慢，并可能给访问者造成不便。为避免出现这种情况，你可以通过使用 width 属性和 height 属性为图像设置尺寸，以告诉“用户代理”在载入图像前为图像分配适当大小的空间（inlineimagewithdimensions.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with dimensions</title> </head> <body> <img src="/balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle" width="400" height="186"> </body> </html>
这样“用户代理”将根据图像的尺寸显示一个预留的图像框，直到图像被完全载入进这个图像框，因此就避免了不好看的页面移动。你也可以使用 width 和 height 属性来缩放图像（你可以试着将上面例子中的两个属性值分别减半并保存，然后重新载入页面），但这不是一个好的做法，因为在所有的浏览器中，图像缩放的质量并不都是平滑的。将图像缩小成缩略图，尤其不是好做法。因为使用缩略图，你不仅在物理大小上获得了更小的图像，同时其文件体积也变小了。但没有人愿意下载一个 300KB 的照片，而仅仅为了看本该 5KB 的小图像。
内联图像的内容就到这里
还有很多图像属性可供你使用，不过它们中的大多数已被标明为“不赞成使用”的属性，因为它们仅是定义图像摆置和对齐方式的属性。这不应使用 HTML，而应使用 CSS 来控制。有一点是你们必须牢记的，那就是图像就其默认状态来说是内联元素。这意味着它们可以在文本的字词之间出现，并非一定要在新行上显示。这样，如果你想在文本正文中加入一些小图标的话，的确很方便，但当你试图使用图像和文本来创作页面布局时，就可能会很麻烦。使用 CSS，你可以废除图像是内联元素这一默认性质，而让图像如块级元素一样显示（块级元素指被加入文档中时，在新行上显示的元素）。
使用 CSS 控制背景图像
可以很有把握地说，从浏览器开始支持 CSS 起，Web 设计就变得更为轻松和有趣。 有了 CSS，我们就不再需要费力地使用表格单元格来定位页面元素，及使用不间断空格（ ）来保持空格，也不再需要使用空白 GIF（指透明的 1x1 像素的 GIF 图像，被缩放后用于创建外边距），而只需使用 CSS 中的填充距、外边距、尺寸及定位属性等，让 HTML 仅控制内容的结构即可。
使用 CSS，还意味着你能以非常多的方式使用背景图像，以你希望的任何方式将背景图像定位在文本后面及周围，并能使用以一定方式重复的图像来创建背景。这里我将只简单地介绍一下 CSS 图像，后面的文章将详细地讲述关于 CSS 背景图像的内容。
如何通过 CSS 来应用背景图像
通过 CSS 来应用背景图像是很容易的。在你查看下面显示的 CSS 代码前，请在浏览器中载入 imagesandcss.html 这个示例文件，或查看图4，以大致了解 CSS 中各种可能有的背景图像的属性。
图4：通过 CSS 应用背景图像
上图中不同的盒子实际上是已被样式化的 h2 标题元素，通过 CSS 应用了一些填充距和边框属性，为显示背景图像提供足够的空间。如果你检查 HTML 源文件，你会发现每个 h2 元素都有一个独一无二的 id ，这样每个 h2 元素就都可以应用一种不相同的 CSS 规则。以上第一个例子中的 CSS 代码如下：
background-image:url(ball.gif); background-color:#eee;
你使用 background-image 选择符来添加图像，并赋予它一个带括弧的 URL 地址，以指定将要加入的图像。你同时应使用 background-color 选择符和颜色值（可以是十六进制的颜色代码、颜色名称或 RGB 颜色），提供一种背景色（此处我选用的是浅灰色），以作为图像不可用时的替代性的选择。
在默认状态下，背景图像将既水平重复又垂直重复，来填满整个元素空间。不过你可以使用 background-repeat 选择符来定义不同的重复方式：
- 背景图像完全不重复：
background-repeat:no-repeat; - 仅水平重复：
background-repeat:repeat-x; - 仅垂直重复：
background-repeat:repeat-y;
在默认状态下，背景图像（如果不重复的话）将被定位在元素的左上角。不过你可以使用 background-position 来改变背景图像的位置。垂直对齐可选择的属性值包括 top、center 和 bottom，而水平对齐可选择的属性值包括 left、center 和 right 。例如，要将图像定位在右下角，你需要使用 background-position:bottom-right;，而要将图像垂直居中，然后靠右对齐，你需要使用 background-position:center-right;。
通过使用 CSS 来控制背景图像的重复方式和位置并使用适当的图像，你可以创造出许多在 CSS 出现前不可能创造出的神奇效果。同时，通过将背景图像的定义放置在单独的 CSS 文件中，你可以仅修改数行 CSS 代码，就很容易地改变整个网站的外观和风格。在本教程第30篇文章中，将详细地讲述这方面的内容。
总结
本篇文章讲述了你在向 HTML 文档中添加图像时需要了解的知识和方法。关于使用图像和 CSS，还有很多可用的技巧和诀窍，不过你们现在首先需要掌握本篇文章中所讲述的应用图像的最佳习惯。在本篇文章中，我们讲述了：
img元素及其基本属性：src属性，用于定义图像的文件位置alt属性，用于显示在图像未载入或不能被看见时应该显示的替代文本title属性，用于显示关于图像的附加信息（有趣的，但不是关键性的信息）longdesc属性，用于指向一个外部文件，该文件包含复杂图像（如一个复杂的图表）中所表示的数据的文本显示width和height属性，用于告诉浏览器图像的尺寸大小，从而让浏览器为图像分配适当大小的空间
- CSS 背景图像的基础知识
- 什么时候该使用背景图像（一般而言，当图像不需要替代文本，仅美化和装饰页面时，即可使用背景图像）
- 如何在 CSS 中定位和重复背景图像
练习题
- 使用
alt属性为图像添加替代文本，为什么是重要的？你真的需要这样做吗？ - 如果你想把一张 1280x786 像素大小的图像显示为 40x30 像素大小的缩略图，你能在 HTML 中实现这样的效果吗？这样做是否是好的做法？
longdesc属性的功能是什么？浏览器是如何显示这种属性的？valign和align属性的功能是什么？为什么我们不在这篇文章中讲述这两个属性？- 在默认状态下，CSS 背景图像被定位在元素内的哪个位置？在默认状态下，这些 CSS 背景图像又是如何重复的？
