HTML <img>标签

示例

在HTML页面中显示一幅图像:

<img src="/static/images/angry.gif" alt="愤怒表情" />

试一个 »
(本页底部提供了更多示例)

定义及用法

<img>标签用于在HTML页面中嵌入一个图像。

注意:从技术上讲并不是在HTML页面里嵌入一幅图像,而是引用一幅图像。<img>标签在页面里创建了一块区域,用以容纳被引用的图像。

<img>标签有两个必选属性:src和alt。


浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有浏览器均支持<img>标签。


HTML和XHTML之间的差异

在HTML中,<img>元素不需要结束标签。

但XHTML中,<img>元素必须正确关闭。


提示和注意

提示:alt属性用于为图像指定备选文本。备选文本是无法加载图像时显示的文本,不是鼠标光标悬停时显示的文本——那个叫提示文本。如要设置提示文本,应采用title属性,如下:<img src="angry.gif" alt="愤怒表情" title="愤怒表情" />

注意:图片本身并不包含在网页里。直到加载网页时,浏览器才会实际从Web服务器上下载图片,并在网页上显示出来。因此,请确保图片文件的URL实际可用,否则访问者将看到的是一个表示断链的图标。


必选属性

DTD栏表明哪种文档类型支持此属性。S=Strict,T=Transitional,F=Frameset。

属性 描述 DTD
alt 文本 为图像指定备选文本 STF
src URL 指定图像的URL STF

可选属性

属性 描述 DTD
align top
bottom
middle
left
right
被弃用的。 请采用样式作为替代。
指定图像相对于四周元素的对齐方式
TF
border 像素 被弃用的。 请采用样式作为替代。
指明图像四周边框的宽度
TF
height 像素
%
指定图像的高度 STF
hspace 像素 被弃用的。 请采用样式作为替代。
指定图像左右两侧的空白
TF
ismap ismap 指定图像为一个服务器端图像地图。极少使用,请参见usemap属性。 STF
longdesc URL 指定一个文档的URL,该文档中包含关于图像的详细描述 STF
usemap #地图名称 指定一个图像作为客户端图像地图 STF
vspace 像素 被弃用的。 请采用样式作为替代。
指定图像上下两端的空白
TF
width 像素
%
指定图像的宽度 STF


核心属性

<img>标签支持以下核心属性:

属性 描述 DTD
class 类名 指明元素的类名 STF
dir rtl
ltr
指定元素里内容的文本方向 STF
id id 指明元素的唯一id STF
lang 语言代码 指定元素内容的语言代码 STF
style 样式定义 指定元素的内嵌样式 STF
title 文本 指定元素的提示文本 STF
xml:lang 语言代码 在XHTML文档中指定元素内容的语言代码 STF

更多关于核心属性的信息。


事件属性

<img>标签支持以下事件属性:

属性 描述 DTD
onabort 脚本 当图像被中断加载时执行脚本 STF
onclick 脚本 在元素区域内单击鼠标(不区分左右键)时执行脚本 STF
ondblclick 脚本 在元素区域内双击鼠标(不区分左右键)时执行脚本 STF
onmousedown 脚本 在元素区域内按下鼠标键(不区分左右键)时执行脚本 STF
onmousemove 脚本 当鼠标指针在元素区域内移动时执行脚本 STF
onmouseout 脚本 当鼠标指针移出元素区域时执行脚本 STF
onmouseover 脚本 当鼠标指针移入元素区域时执行脚本 STF
onmouseup 脚本 在元素区域内松开鼠标键(不区分左右键)时执行脚本 STF
onkeydown 脚本 按下一个键时执行脚本 STF
onkeypress 脚本 按下并松开一个键时执行脚本 STF
onkeyup 脚本 松开一个键时执行脚本 STF

更多关于事件属性的信息。


示例

试一个——示例

插入来自别处的图像
本例演示了如何在网页中插入一幅来自另一个文件夹或另一个服务器的图像。

图像对齐方式
本例演示了如何设置图像在文本中的对齐方式。

图像漂浮方式
本例演示了如何令图像往段落左侧或右侧漂浮。

将图像作为超链接
本例演示了如何将图像作为超链接。

创建客户端图像地图
本例演示了如何创建客户端图像地图(image map)及热区。每一个热区都是一个超链接。

粤ICP备11097351号-1