HTML 图像

通过使用 HTML，可以在文档中显示图像。

实例

插入图像

   
 一幅图像：  
 
 一幅动画图像：  
 
请注意，插入动画图像的语法与插入普通图像的语法没有区别。
  

从不同的位置插入图片

  
 来自另一个文件夹的图像：  
 
 来自 W3School.com.cn 的图像：  
  

（ 可以在本页底端找到更多实例 。）

图像标签（）和源属性（Src）

在 HTML 中，图像由 标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

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

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

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

更多实例

背景图片

  
图像背景
 
gif 和 jpg 文件均可用作 HTML 背景。
 
如果图像小于页面，图像会进行重复。
  

排列图片

  
未设置对齐方式的图像：
 
图像  在文本中
 
已设置对齐方式的图像：
 
图像  在文本中
 
图像  在文本中
 
图像  在文本中
 
请注意，bottom 对齐方式是默认的对齐方式。
  

浮动图像

  
  带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 
 
  带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 
  

调整图像尺寸

   
  
  
通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。
  

为图片显示替换文本

  
仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。
 
请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。
  
如果无法显示图像，将显示 "alt" 属性中的文本：
   

制作图像链接

  
 您也可以把图像作为链接来使用：    
  

创建图像映射

  
请点击图像上的星球，把它们放大。
   
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
  

把图像转换为图像映射

   
请把鼠标移动到图像上，看一下状态栏的坐标如何变化。
     

图像标签

标签	描述
	定义图像。
	定义图像地图。
	定义图像地图中的可点击区域。