HTML 图片
图片可以改善网页的设计和外观。
HTML 图片语法
HTML <img> 标签用于在网页中嵌入图片。
图片在技术上并不是插入到网页中，而是链接到网页。<code class="w3-codespan"><img> 标签为所引用图片创建了一个占位符。
<code class="w3-codespan"><img> 标签是空的，它只包含属性，并且没有结束标签。
<code class="w3-codespan"><img> 标签有两个必需属性
- src - 指定图片的路径
- alt - 指定图片的替代文本
语法
<img src="url" alt="替代文本">src 属性
必需的 <code class="w3-codespan">src 属性指定图片的路径（URL）。
注意: 当网页加载时，浏览器会在那一刻从 web 服务器获取图片，并将其插入网页。因此，请确保图片相对于网页始终位于相同的位置，否则您的访问者会看到一个断开的链接图标。如果浏览器无法找到图片，则会显示断开的链接图标和 <code class="w3-codespan">alt 文本。
alt 属性
必需的 <code class="w3-codespan">alt 属性提供图片的替代文本，如果用户由于某种原因无法查看它（由于连接缓慢、<code class="w3-codespan">src 属性错误，或者用户使用屏幕阅读器）。
<code class="w3-codespan">alt 属性的值应该描述图片。
如果浏览器无法找到图片，它将显示 <code class="w3-codespan">alt 属性的值。
提示: 屏幕阅读器是一个软件程序，它读取 HTML 代码，并允许用户“听”内容。屏幕阅读器对视障人士或学习障碍人士很有用。
图片尺寸 - 宽度和高度
您可以使用 <code class="w3-codespan">style 属性指定图片的宽度和高度。
或者，您可以使用 <code class="w3-codespan">width 和 <code class="w3-codespan">height 属性
<code class="w3-codespan">width 和 <code class="w3-codespan">height 属性始终以像素定义图片的宽度和高度。
注意: 始终指定图片的宽度和高度。如果没有指定宽度和高度，网页可能会在图片加载时闪烁。
宽度和高度，还是样式？
<code class="w3-codespan">width、<code class="w3-codespan">height 和 <code class="w3-codespan">style 属性在 HTML 中都是有效的。
但是，我们建议使用 <code class="w3-codespan">style 属性。它可以防止样式表更改图片的大小。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 图标" width="128" height="128">
<img src="html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">
</body>
</html>
动手试试 »
另一个文件夹中的图片
如果您的图片位于子文件夹中，您必须在 <code class="w3-codespan">src 属性中包含文件夹名称。
另一个服务器/网站上的图片
一些网站指向另一个服务器上的图片。
要指向另一个服务器上的图片，您必须在 <code class="w3-codespan">src 属性中指定绝对（完整）URL。
有关外部图片的说明: 外部图片可能受版权保护。如果您未获得使用许可，您可能违反版权法。此外，您无法控制外部图片；它们可能会突然被删除或更改。
动画图片
HTML 允许使用动画 GIF。
图片作为链接
要将图片用作链接，请将 <code class="w3-codespan"><img> 标签放在 <code class="w3-codespan"><a> 标签内。
示例
<a href="default.asp">
<img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;">
</a>
动手试试 »
图片浮动
使用 CSS <code class="w3-codespan">float 属性可以让图片浮动在文本的右侧或左侧。
示例
<p><img src="smiley.gif" alt="笑脸" style="float:right;width:42px;height:42px;">
图片将浮动在文本的右侧。</p>
<p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;">
图片将浮动在文本的左侧。</p>
动手试试 »
提示: 要了解有关 CSS 浮动的更多信息，请阅读我们的 CSS 浮动教程。
常见图片格式
以下是所有浏览器（Chrome、Edge、Firefox、Safari、Opera）都支持的最常见图片文件类型。
| 缩写 | 文件格式 | 文件扩展名 |
|---|---|---|
| APNG | 动画便携式网络图形 | .apng |
| GIF | 图形交换格式 | .gif |
| ICO | 微软图标 | .ico, .cur |
| JPEG | 联合图像专家组图片 | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | 便携式网络图形 | .png |
| SVG | 可缩放矢量图形 | .svg |
章节总结
- 使用 HTML 的
<img>元素来定义图像 - 使用 HTML 的
src属性来定义图像的 URL - 使用 HTML 的
alt属性来定义图像无法显示时的替代文本 - 使用 HTML 的
width和height属性或 CSS 的width和height属性来定义图像的大小 - 使用 CSS 的
float属性让图像浮动到左侧或右侧
注意：加载大型图像需要时间，并且会降低网页速度。谨慎使用图像。
HTML 图像标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
| <picture> | 定义多个图像资源的容器 |
要查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
视频：HTML 图像
