HTML <img> 标签
下面有更多“自己尝试”的示例。
定义和用法
这 <img> 标签用于在 HTML 页面中嵌入图像。
从技术上来说，图像并非插入到网页中；图像是链接到网页的。 <img> 标签为引用的图像创建一个保存空间。
这 <img> 标签有两个必需属性：
- src——指定图像的路径
- alt - 如果图像由于某种原因无法显示，则指定图像的替代文本
笔记： 另外，请务必指定图像的宽度和高度。如果没有指定宽度和高度，则图像加载时页面可能会闪烁。
提示： 要将图像链接到另一个文档，只需嵌套<img> 标签内的<a> 标签（见下面的例子）。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <img> | 是的 | 是的 | 是的 | 是的 | 是的 |
属性
| 属性 | 价值 | 描述 |
|---|---|---|
| 替代 | 文本 | 规定图像的替代文本 |
| 跨域 | 匿名的 使用凭证 |
允许将允许跨域访问的第三方网站的图像与画布一起使用 |
| 高度 | 像素 | 指定图像的高度 |
| 伊斯马普 | 伊斯马普 | 指定图像作为服务器端图像映射 |
| 加载中 | 渴望的 懒惰的 |
指定浏览器是否应立即加载图像或推迟加载图像直到满足某些条件 |
| 长描述 | 网址 | 规定图像详细描述的 URL |
| 引荐政策 | 无引荐来源 降级时无推荐人 起源 跨域时原点 不安全的网址 |
指定获取图像时要使用的 referrer 信息 |
| 尺寸 | 尺寸 | 指定不同页面布局的图像大小 |
| 源码 | 网址 | 规定图像的路径 |
| 源码 | URL 列表 | 指定在不同情况下使用的图像文件列表 |
| 使用地图 | #地图名称 | 指定图像作为客户端图像映射 |
| 宽度 | 像素 | 指定图像的宽度 |
全局属性
这 <img> 标签还支持HTML 中的全局属性.
事件属性
这 <img> 标签还支持HTML 中的事件属性.
更多示例
例子
对齐图像（使用 CSS）：
<img src="../images/smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:bottom">
<img src="../images/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="../images/smiley.gif" alt="笑脸" width="42" height="42" style="float:right">
<img src="../images/smiley.gif" alt="笑脸" width="42" height="42" style="float:left">
亲自尝试 »
例子
添加图像边框（使用 CSS）：
<img src="../images/smiley.gif" alt="笑脸" width="42" height="42" style="border:5px solid black">
亲自尝试 »
例子
为图像添加左右边距（使用 CSS）：
<img src="../images/smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
亲自尝试 »
例子
为图像添加顶部和底部边距（使用 CSS）：
<img src="../images/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.w3schools.com/images/lamp.jpg" alt="灯" width="32" height="32">
亲自尝试 »
例子
如何向图像添加超链接：
<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
亲自尝试 »
例子
如何创建带有可点击区域的图像地图。每个区域都是一个超链接：
<img src="workplace.jpg" alt="工作场所" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
亲自尝试 »
相关页面
HTML 教程： HTML 图像
HTML DOM 参考： 图像对象
CSS 教程： 图像样式
默认 CSS 设置
大多数浏览器会显示 <img> 元素具有以下默认值：
