HTML 图像基础 _ 网站源代码

摘要： 要将一幅图像插入到网页中，应当使用元素，并把元素中的 src 属性设置为该图像的 URL。正如在第 4 章中所讨论的，URL 的形式既可以是绝对 URL,也可以是相对 URL。最可能的情况

HTML 图像基础
要将一幅图像插入到网页中，应当使用<img>元素，并把<img>元素中的 src 属性设置为该图像的 URL。正如在第 4 章中所讨论的，URL 的形式既可以是绝对 URL,也可以是相对 URL。最可能的情况是，image 元素将使用本地图像的相对 URL。要把一个名为 logo.gif的 GIF 图像插入到同一目录下的当前文档中，使用：
<img src="logo.gif">
使用外部 URL 并不被推荐，因为图像的存放位置可能会移动，而且这可能导致网页各部分的下载速度参差不齐。
注意：src 属性必须包含在元素中，否则，浏览器可能会显示一个图像占位符或损坏图像图标。
要建立一个简单的范例，首先创建一个新目录来存放你的图像。把你所有的图像保存在一个名为“images^的目录里通常是个好主意，这样在你建设网站时，能够使网站内容的存放更有条理。现在，把一个名为“robot.gif”的 GIF 格式图像放到这个目录中。要保存一幅网络上的图像，你可以简单地在图像上右击鼠标，把图像另存到你的目录中。对于Macintosh 用户来说，他们需要在图像上按下鼠标键不放，以访问存储图像的菜单。一旦有了一个 GIF 图像，你就已经能够使用一小段 HTML 标记来实验<img>元素的使用，如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2 align="center">Image Example</h2>
<img src="images/robot.gif" width="234" height="150" border="0">
</body>
</html>
注意：这幅图像的名称、路径、宽度和高度都是仅就这个范例而言，实际使用中的属性值可能与此不同。
根据最初的 HTML 2 规范，除了 src 以外，<img>元素只有三个其他属性：ismap、align和 alt。之后，Netscape 和 Microsoft 为之添加了很多属性，它们中的许多已经被集成到现在进展中的 HTML 4 规范中。下面几小节将涵盖这些基本的属性，随后是更完整的图像选项纲要。
使用 alt 属性设置替换文本
alt 属性设置为不显示图像的用户代理，或为被用户关闭了图像显示的浏览器提供替换的文本，如图 5-5 所示。alt 属性的值在基于图像的浏览器上可以替代图像显示，或者作为工具提示或占位符信息。今天，随着 title 属性的出现，alt 的值应当只用于在图像不可用时显示替换文本，而 title 属性中所指定的咨询文本应当用作工具提示。当然，我们无法确保浏览器能够正确解释 alt 和 title 属性的含义，因此为这两个属性设置相同的值或许是有意义的。
虽然有一些资料建议把 alt 文本控制在 1024 字符以内，但在理论上，对替换文本的大小并没有限制。只不过，超过数百字符的文本可能会冗长而不适用。此外，一部分浏览器，包括 Netscape 4 的某些版本，不能处理过长的工具提示，而且可能不支持替换文本的滚动。
替换文本的重要性
人们很容易忘记有许多不同类型的浏览器可以用于访问网络。尽管大多数人都使用Netscape 或 Microsoft 的软件来浏览网页，那么其他的人又怎样呢？有的人仍然在只能显示文本的环境（text-only）下访问网络。图 5-6 显示了同一网页的不同显示结果，分别是在Netscape 和 Lynx 环境下。
除了在 text-only 环境下访问网络的人之外，视觉障碍者可能也需要特殊类型的浏览器。盲人可能会使用集成了合成屏幕阅读器的浏览器，如 pwWebSpeak（www.issound.com）来访问网络。其他一些用户可能会因为其易于使用或是需要迅速得到信息而使用电话或其他自动化系统访问网络。想像一下下面这个情形：一个自动化电话系统在访问网络时通过声音提示“公司信息请按 1，产品信息请按 2”，这提供了网站内容的索引，然而，如果使用图像，由于图像是无法阅读的，它在这种情形下不能提供任何索引信息。在以上这些情形——文本模式的浏览器、自动 Web 访问系统、自动网站索引——中，图像没有用武之处，所以在这时，alt 属性是非常重要的。

Font的属性详细解析	CSS样式中几个常用的度量单位
一个完整的css样式表范例	css样式的继承性
样式中伪类和伪元素的使用实例	网站样式中class命名规则
网页中id的命名规则	常用的几个创建样式规则的方法
网页布局中div和span使用有什么不	如何使用CSS行内样式

HTML 图像基础

Tags： html教程