跳到主要内容

<img>


HTML <img> 标签

如何插入图像:

实时编辑器
结果
Loading...
提示

更多实例见页面底部


标签定义及使用说明

<img> 标签定义 HTML 页面中的图像。

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

警告

从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示

通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档的链接。


HTML 4.01 与 HTML5之间的差异

HTML5 中不支持以下属性:align、border、hspace、longdesc、vspace。

在 HTML 4.01 中,以下属性:align、border、hspace、vspace(已废弃)。

提示

已废弃

已废弃的元素或者属性意味着它已经过时。

废弃的元素在以后将会过时,但是浏览器会继续支持已废弃的元素。

已过时

已过时的元素和属性浏览器不再支持,W3C也不会再去定义它。


HTML 与 XHTML 之间的差异

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

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


属性

🆕 :HTML5 中的新属性。

属性描述
aligntop bottom middle left rightHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
loadingeager:立即加载 lazy:延迟加载指定浏览器是应立即加载图像还是延迟加载图像。
alttext规定图像的替代文本。
borderpixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin🆕anonymous use-credentials设置图像的跨域属性
heightpixels规定图像的高度。
hspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismapismap将图像规定为服务器端图像映射。
longdescURLHTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
srcURL规定显示图像的 URL。
usemap#mapname将图像定义为客户器端图像映射。
vspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
widthpixels规定图像的宽度。

全局属性

<img> 标签支持全局属性,查看完整属性表 HTML全局属性


事件属性

<img> 标签支持所有 HTML事件属性


尝试一下 - 实例

排列图片

本例演示如何在文字中排列图像。

浮动图像

本例演示如何使图片浮动至段落的左边或右边。

设置图像链接

本例演示如何将图像作为一个链接使用。

创建图像映射

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


浏览器兼容性

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
img
align
Deprecated
alt
Aspect ratio computed from width and height attributes
border
Deprecated
crossorigin
decoding
fetchpriority
Experimental
height
hspace
Deprecated
ismap
loading
longdesc
Deprecated
name
Deprecated
onerror
Deprecated
referrerpolicy
sizes
src
srcset
usemap
Content is case-sensitive
vspace
Deprecated
width

相关文章

HTML 教程:HTML 图像