HTML <img> 标签
下面有更多实例。
定义和用法
<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">
亲自试一试 »
<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">
亲自试一试 »
<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="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>
亲自试一试 »
<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> 元素:
