W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 图像


JPG 图像

Mountain View

GIF 图像

html5 icon

PNG 图像

Graph

Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
尝试一下 »
Note 在使用中需要指定图像的宽度和高度。如果未指定宽度和高度,则当图像加载时,该页将闪烁。

HTML 图像 语法

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

<img> tag  标签是空的,它只包含属性,并且没有关闭标签。

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

<img src="url" alt="some_text">

Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

alt 属性用来替代图像的信息,如果用户因为某些原因不能查看它(连接速度慢,src属性指定错误,或者如果用户使用屏幕阅读器)。

如果浏览器不能找到一个图像,它会显示 alt文本:

Example

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
尝试一下 »

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


HTML屏幕阅读器

屏幕阅读器是可以读取在屏幕上显示的内容的软件程序。

屏幕阅读器对盲人、视力受损或学习障碍的人非常有用。

Note 屏幕阅读器可以读取alt属性。

图像尺寸 - 宽度和高度

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

这些值以像素为单位(在值后面使用px):

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
尝试一下 »

或者,您可以使用 widthheight 属性。这里,默认情况下以像素为单位指定值:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
尝试一下 »

宽度和高度 OR 样式?

宽度,高度和样式属性都在最新的HTML5标准中有效。

我们建议您使用style属性。它防止样式表更改图像的原始大小:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
尝试一下 »

图像在其他文件夹

如果未指定,浏览器将在同一文件夹中找到与网页相同的图像。

然而,在子文件夹中存储图像是常见的。你必须包括在src文件夹名称:

Example

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
尝试一下 »

图像在其他服务器

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

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

Example

<img src="http://www.w3schools.wang/images/w3schools_green.jpg" alt="W3Schools.wang">
尝试一下 »

动画图像

GIF标准允许动画图像:

Example

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
尝试一下 »

注意插入动画图像的语法与非动画图像没有什么不同。


使用图像作为链接

 使用图像作为链接,只需要简单的把 <img> 标签放到 <a> 标签里即可:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
尝试一下 »
Note 添加 "border:0;" 可以防止IE9(早)显示图像的边框。

图像浮动

使用CSS float属性来让图片漂浮。

图像可以浮动到文本的右边或左边:

Example

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>
尝试一下 »

图像映射

使用 <map> 标签定义影像图。图像映射是可点击的区域的图像。

<map> 标签的name属性与使用的地图属性相关,产生图像和地图之间的关系。

<map> 标签包含了一些 <area> 标签,在图像地图上定义可点击的区域:

Example

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
尝试一下 »

HTML 图像标签

标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域