HTML 图像
图像是 HTML 内容的重要组成部分,图像可以改善网页的设计和外观。
图像是 HTML 内容的重要组成部分,图像可以改善网页的设计和外观。
HTML 图像语法
HTML <img>
标签用于在网页中嵌入图像。
! 从技术上讲,图像不会插入到 HTML 文档中,HTML <img>
只是将指向了图像文件的 URL。
<img>
标签是空的,它只包含属性,并没有关闭标签。要在网页上显示图像,需要使用 src
属性设置图像文件的 URL。
<img>
标签有两个必需的属性:
src
- 代表 source,意思是 “源”,意思是指定图像的源文件 URL。这个属性是必须的。alt
- 指定图像的替代文本
句法
<img src="图像的 URL" alt="图像的替代文本" />
src
属性
src
属性指定图像的路径 (URL),这是个必须的属性。
当网页加载时;浏览器根据 src
属性的值从 Web 服务器获取图像并将其插入到页面中。因此,请确保图像实际上与网页相关的位置相同,否则您的访问者将获得破裂的图片图标。如果浏览器找不到图像,则会显示断开的链接图标和 alt
属性中的文本。
<img src="img_chania.jpg" alt="Flowers in Chania" />
alt 属性
alt
属性为图像提供替代文本。如果用户由于某种原因(因为连接速度慢、src
中的 URL 错误,或者如果用户使用屏幕阅读器)无法下载或查看图片,会显示替代文本。
! alt
的值不应该是随意填写,而应该是对图像的描述。这样即使图像无法显示,用户也会了解到此处图片的意义。对于屏幕阅读器的使用者,能听到对 alt
内容的阅读。
<img src="img_chania.jpg" alt="Flowers in Chania" />
如果浏览器找不到图像,显示该 alt
属性的值:
<img src="wrongname.gif" alt="这是图片加载失败的案例" />
图像宽度和高度
您可以使用 使用 width
和 height
属性来设置图像的宽度和高度,或者在 style
属性中通过 CSS 属性来指定。
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
! width
和 height
属性的单位是像素(px
)或者百分比(比如: 50%
)
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" />
! 注意: 如果未指定宽度和高度,则加载图像时网页可能会闪烁。所以在图像上指定宽度和高度是一个很好的习惯,虽然他们不是必须的属性。
直接使用 width
和 height
属性,还是使用 style
?
width
,height
和 style
属性都在 HTML 有效。但是,我们建议使用 style
属性,这样更有利于代码的维护。也符合 “HTML 负责内容 CSS 负责样式” 的设计原则。
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128" />
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" />
</body>
</html>
另一个文件夹中的图像
如果您的图像位于子文件夹中,则必须在src
属性中包含文件夹名称:
例子
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;" />
图像的绝对 URL 和相对 URL
<img>
元素的 src
属性是图像文件的 URL,和链接
的 href
中的 URL 一样,也分为绝对 URL 和相对 URL 。
- 绝对 URL,使用完整的网址(可以是本站的,也可以是网络上的任意图片),比如
https://www.gobeta.net/user/images/favicon/favicon-32x32.png
- 相对 URL
- 当以
/
开头时,相对的是网站的根目录。 - 其他相对当前文件本身。
- 当以
更多关于路径的描述,请参考章节: HTML 文件路径
常见图像格式
以下是所有浏览器(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
属性或 CSSwidth
和height
属性来定义图像的大小
HTML 图像标签
标签 | 说明 |
---|---|
<img> |
定义图片 |
<map> |
定义一个图像映射(一个可点击的链接区域) |
<area> |
在图片上定义一个热点区域,可以关联一个超链接。<area> 元素仅在 <map> 元素内部使用。 |
<picture> |
定义一个容器包含多个图像资源 |
如需所有可用 HTML 标签的完整列表,请访问 HTML 标签参考。