HTML 标签
❮ 上一篇 完整的 HTML 参考 下一篇 ❯
示例
如何插入图像

自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
标签用于在 HTML 页面中嵌入图像。
图像实际上并非插入到网页中;图像是链接到网页的。 标签为引用的图像创建了一个占位符。
标签有两个必需的属性
src - 指定图像的路径
alt - 如果图像因某种原因无法显示,则为图像指定替代文本
注意: 还要始终指定图像的宽度和高度。如果未指定宽度和高度,则页面在图像加载时可能会闪烁。
提示: 要将图像链接到另一个文档,只需将 标签嵌套在 标签内(请参见下面的示例)。
浏览器支持
元素
是
是
是
是
是
属性
Attribute
值
描述
alt
text
为图像指定替代文本
crossorigin
anonymoususe-credentials
允许来自允许跨域访问的第三方站点的图像与 canvas 一起使用
height
像素
指定图像的高度
ismap
ismap
将图像指定为服务器端图像映射
loading
eagerlazy
指定浏览器是立即加载图像还是推迟加载图像,直到满足某些条件
longdesc
URL
指定图像详细描述的 URL
referrerpolicy
no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
指定获取图像时要使用的引用者信息
sizes
sizes
为不同的页面布局指定图像尺寸
src
URL
指定图像的路径
srcset
URL-list
指定在不同情况下使用的图像文件列表
usemap
#mapname
将图像指定为客户端图像映射
width
像素
指定图像的宽度
全局属性
标签也支持 HTML 中的全局属性。
事件属性
标签也支持 HTML 中的事件属性。
更多示例
示例
对齐图像(使用 CSS)
![]()
![]()
![]()
![]()
![]()
自己动手试一试 »
示例
添加图像边框(使用 CSS)
![]()
自己动手试一试 »
示例
为图像添加左右边距(使用 CSS)
![]()
自己动手试一试 »
示例
为图像添加上下边距(使用 CSS)
![]()
自己动手试一试 »
示例
如何从另一个文件夹或另一个网站插入图像
![]()
![]()
自己动手试一试 »
示例
如何为图像添加超链接
自己动手试一试 »
示例
如何创建图像映射,带有可点击的区域。每个区域都是一个超链接

自己动手试一试 »
相关页面
HTML 教程:HTML 图像
HTML DOM 参考:Image 对象
CSS 教程:样式化图像
默认 CSS 设置
大多数浏览器将使用以下默认值显示 元素
示例
img { display: inline-block;}
自己动手试一试 »
❮ 上一篇 完整的 HTML 参考 下一篇 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费!
登录 注册
