HTML 图像

网页加入图片可以提高整个网站视觉感观,图文结合的方式,更受用户喜欢,提高用户体验


实例

<img src="pic_trulli.jpg" alt="意大利 Trulli">
运行 »

实例

<img src="img_girl.jpg" alt="穿夹克衣服的女孩">
运行 »

实例

<img src="/image/img_chania.jpg" alt="干尼亚的花朵">
运行 »

HTML图像语法

在HTML中,图像使用<img>标记定义。

<img>标签为空,它仅包含属性,并且没有结束标记。

src属性指定图像的URL(Web地址):

<img src=" url ">

alt属性

alt属性为图像提供替代文本,如果用户由于某种原因无法查看它(由于连接速度慢,src属性中的错误,或者用户使用屏幕阅读器)。

alt属性的值应该描述图像:

实例

<img src="/image/img_chania.jpg" alt="干尼亚的花朵">
运行 »

如果浏览器找不到图像,它将显示alt属性的值:

实例

<img src="wrongname.gif" alt="干尼亚的花朵">
运行 »

注意:alt属性是必需的。没有它,网页将无法正确验证。



图像大小 - 宽度和高度

您可以使用style属性指定图像的宽度和高度。

实例

<img src="img_girl.jpg" alt="穿夹克衣服的女孩" style="width:500px;height:600px;">
运行 »

或者,您可以使用widthheight属性设置:

实例

<img src="img_girl.jpg" alt="穿夹克衣服的女孩" width="500" height="600">
运行 »

widthheight属性始终定义图像的宽度和高度(以像素为单位)。

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


宽度和高度还是样式?

widthheightstyle属性在HTML5中有效。

但是,我们建议使用style属性。它可以防止样式表更改图像的大小:

实例

<!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;">
运行 »

在服务器上的图片

一些网站将其图像存储在图像服务器上。

实际上,您可以从世界上任何网址访问图像:

实例

<img src="https://www.uihtml.com/images/uihtml_green.jpg" alt="uihtml.com">
运行 »

您可以在HTML文件路径一章中阅读有关文件路径的更多信息。


动画图像

HTML允许动画GIF:

实例

<img src="programming.gif" alt="敲代码的男人" style="width:48px;height:48px;">
运行 »

图像作为链接

要将图像用作链接,请将<img>标记放在<a>标记内:

实例

<a href="default.html">
  <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;border:0;">
</a>
运行 »

注意:添加border:0;以防止IE9(及更早版本)在图像周围显示边框(当图像是链接时)。


图像浮动

使用CSS 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 Float的更多信息,请阅读我们的CSS Float教程


图像映射

<map>标签定义了图像映射。图像映射是具有可点击区域的图像。

在下图中,点击计算机,手机或一杯咖啡:

职场图片 Sun Mercury Venus

实例

<img src="/image/workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="/static_html/computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="/static_html/phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="/static_html/coffee.htm">
</map>
运行 »

<map>标记的name属性与<img>的usemap属性相关联,并在图像和地图之间创建关系。

<map>元素包含许多<area>标记,用于定义图像映射中的可点击区域。


背景图片

要在HTML元素上添加背景图像,请使用CSS属性background-image

实例

要在网页上添加背景图像,请在BODY元素上指定background-image属性:

<body style="background-image:url('/image/clouds.jpg')">

<h2>背景图片</h2>

</body>
运行 »

实例

要在段落上添加背景图像,请在p标签上指定background-image属性:

<body>

<p style="background-image:url('/image/clouds.jpg')">
...
</p>

</body>
运行 »

要了解有关背景图像的更多信息,请参阅我们的CSS背景教程


<picture>元素

HTML5引入了<picture>元素,以便在指定图像资源时增加更多灵活性。

<picture>元素包含许多<source>元素,每个元素都引用不同的图像源。这样浏览器可以选择最适合当前视图和/或设备的图像。

每个<source>元素都有描述其图像最适合的属性。

浏览器将使用具有匹配属性值的第一个<source>元素,并忽略任何后续<source>元素。

实例

如果浏览器窗口(视口)最小为650像素,则显示一张图片;如果不是,则显示另一张图片,但大于465像素。

<picture>
  <source media="(min-width: 650px)" srcset="/image/img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="/image/img_white_flower.jpg">
  <img src="/image/img_orange_flowers.jpg" alt="花" style="width:auto;">
</picture>
运行 »

注意:始终将<img>元素指定为<picture>元素的最后一个子元素。 <img>元素由不支持<picture>元素的浏览器使用,或者如果<source>标记都不匹配。


HTML屏幕阅读器

屏幕阅读器是一种软件程序,它读取HTML代码,转换文本,并允许用户“收听”内容。屏幕阅读器对视障人士或学习障碍人士非常有用。


章节总结

  • 使用HTML <img>元素定义图像
  • 使用HTML src属性定义图像的URL
  • 使用HTML alt属性将无法显示图像的替代文本
  • 使用HTML widthheight属性来定义图像的大小
  • 使用CSS widthheight属性来定义图像的大小
  • 使用CSS float属性让图像浮动
  • 使用HTML <map>元素定义图像映射
  • 使用HTML <area>元素定义图像映射中的可点击区域
  • 使用HTML <img>的元素usemap属性指向图像映射
  • 使用HTML <picture>元素显示不同设备的不同图像

注意:加载图像需要时间。大图片可能会降低页面速度。小心使用较大的图像哦。


HTML图片标签

标签描述
<img> 定义图片
<map> 定义图像映射
<area> 定义图像映射内的可点击区域
<picture> 定义多个图像资源定义容器