轻松上手,快乐学习!

HTML <img> 标签



实例

如何插入图像:

<img src="img_girl.jpg" alt="穿夹克的女孩" width="500" height="600">
亲自试一试 »

下面有更多实例。


定义和用法

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

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

<img> 标签有两个必需的属性:

  • src - 指定图像的路径
  • alt - 如果由于某种原因无法显示图像,则为图像指定备用文本

注释: 此外,请始终指定图像的宽度和高度。如果未指定宽度和高度,则在加载图像时页面可能会闪烁。

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


浏览器支持

元素
<img> Yes Yes Yes Yes Yes

属性

属性 描述
alt text 规定图像的替代文本。
crossorigin anonymous
use-credentials
设置图像的跨域属性
height pixels 规定图像的高度。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL 指向包含长的图像描述文档的 URL。
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
指定在获取图像时要使用的引荐来源网址
sizes sizes 指定不同页面布局的图像大小
src URL 规定显示图像的 URL。
srcset URL-list 指定在不同情况下使用的图像文件列表
usemap #mapname 将图像定义为客户器端图像映射。
width pixels 规定图像的宽度。

全局属性

<img> 标签支持 HTML 中的全局属性


事件属性

<img> 标签支持 HTML 中的事件属性


更多实例

实例

对齐图像 (使用 CSS):

<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="float:left">
亲自试一试 »

实例

添加图像边框 (使用 CSS):

<img src="smiley.gif" alt="笑脸" width="42" height="42" style="border:5px solid black">
亲自试一试 »

实例

向图像添加左右边距 (使用 CSS):

<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
亲自试一试 »

实例

向图像添加上下页边距 (使用 CSS):

<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
亲自试一试 »

实例

如何从其他文件夹或其他网站插入图像:

<img src="/images/stickman.gif" alt="火柴人" width="24" height="39">
<img src="https://www.begtut.com/images/lamp.jpg" alt="灯" width="32" height="32">
亲自试一试 »

实例

如何向图像添加超链接:

<a href="https://www.begtut.com">
<img src="bthtml.gif" alt="BEGTUT.com" width="100" height="132">
</a>
亲自试一试 »

实例

如何创建具有可单击区域的图像地图。每个区域都是一个超链接:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="计算机" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="电话" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="一杯咖啡" href="coffee.htm">
</map>
亲自试一试 »

相关页面

HTML 教程: HTML 图像

HTML DOM 参考手册: Image 对象

CSS 教程: 样式图像


默认CSS设置

大多数浏览器将使用以下默认值显示 <img> 元素:

实例

img {
  display: inline-block;
}
亲自试一试 »