HTML <img> 标签

定义和用法

img 元素可定义一副图像。

HTML 与 XHTML 之间的差异

在 HTML 中,<img> 标签没有结束标签。

在 XHTML 中,<img> 标签必须被正确地关闭。

在 HTML 4.01 中,image 元素的"align"、"border"、"hspace" 以及 "vspace" 是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,image 元素的 "align"、"border"、"hspace" 以及 "vspace" 是不被支持的。

Mozilla Firefox 和 alt 属性

如果您在 Firefox 中使用 alt 属性,那么当鼠标悬浮在图片或图像地图时不会像其他的浏览器那样出现提示文本。

Firefox 使用 alt 属性的方式与此属性被预想的方式是一致的,比如假如图像没有载入时出现的替代文本,而不是 mouse-over 文本。

如果您在 <img> 标签中使用 title 属性,那么 Firefox 不会支持图像或图像地图之上的 mouse-over 注释。

例如,<img src="image.gif" alt="bla" title="bla bla bla" />

例子

<img src="angry.gif" alt="Angry" />

必需的属性

DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.

属性 描述 DTD
alt text 定义图像的简短描述(即图像的替代文本)。不超过 1024 个字符。 STF
src URL 所显示图像的 URL。 STF

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 描述 DTD
align
  • top
  • bottom
  • middle
  • left
  • right
规定如何根据周围的文本来排列图像。 TF
border pixels 定义图像周围的边框。 TF
height
  • pixels
  • %
定义图像的高度。 STF
hspace pixels 定义图像左侧和右侧的空白。 TF
ismap URL 定义作为服务器端图像映射的一幅图像。有关 ismap 属性的详细信息 STF
longdesc URL 指向包含长的图像描述文档的 URL。 STF
usemap URL

定义作为客户端图像映射的一幅图像。有关 usemap 属性的详细信息

请参阅 <map><area> 标签,以领会其工作原理。

STF
vspace pixels 定义图像顶部和底部的空白。 TF
width
  • pixels
  • %
设置图像的宽度。 STF

标准属性

id, class, title, style, lang, xml:lang

如需完整的描述,请访问标准属性

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

如需完整的描述,请访问事件属性

TIY 实例

插入图像
本例演示如何在网页中显示图像。
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。
背景图片
本例演示如何添加背景图片到HTML页面。
排列图片
本例演示如何在文字中排列图像。
浮动图像
本例演示如何使图片浮动至段落的左边或右边。
调整图像尺寸
本例演示如何将图片调整到不同的尺寸。
为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接
本例演示如何将图像作为一个链接使用。
创建图像地图
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。