017_html图像

原创已于 2024-02-19 13:05:11 修改 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2020-10-09 00:12:52 首次发布

html学习专栏收录该内容

89 篇文章

订阅专栏

1. 使用html的时候, 可以在文档中显示图像。

2. 图像标签

3. 图像标签(<img />)和源属性(src)

3.1. 在html中, 图像由<img />标签定义。

3.2. 要在页面上显示图像, 你需要使用源属性(src)。src指"source"。源属性的值是图像的URL地址。

3.3. 定义图像的语法是:

<img src="url" />

3.4. URL指存储图像的位置。如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中, 那么其URL为http://www.w3school.com.cn/images/boat.gif。

4. 替换文本属性(alt)

4.1. alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat" />

4.2. 在浏览器无法载入图像时, 替换文本属性告诉读者图像失去的信息。此时, 浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯, 这样有助于更好的显示信息, 并且对于那些使用纯文本浏览器的人来说是非常有用的。

4.3. src属性和alt属性是<img />标签的两个必需属性。

5. 图像标签属性

5.1. 必需的属性

5.2. 可选的属性

6. 图像标签例子

6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>为图片显示替换文本</title>
	</head>
	<body>
		<p>仅支持文本的浏览器无法显示图像, 仅仅能够显示在图像的"alt"属性中指定的文本。在这里, "alt"的文本是"向左转"。</p>
		<p>请注意, 如果您把鼠标指针移动到图像上, 大多数浏览器会显示"alt"文本。</p>
		<img src="eg_goleft.gif" alt="向左转" />
		<p>如果无法显示图像, 将显示"alt"属性中的文本:</p>
		<img src="eg_goleft123.gif" alt="向左转" />
	</body>
</html>

6.2. 效果图

7. <area>标签

7.1. 定义和用法

7.1.1. <area>标签定义图像映射中的区域(注: 图像映射指得是带有可点击区域的图像)。

7.1.2. area元素总是嵌套在<map>标签中。

7.1.3. 注释: <img>中的usemap属性可引用<map>中的id或name属性(由浏览器决定, 一般用id), 所以我们需要同时向<map>添加id和name两个属性。

7.2. <area>属性

7.2.1. 必需的属性

7.2.2. 可选的属性

8. <map>标签

8.1. 定义和用法

8.1.1. 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

8.2. <map>属性

8.2.1. 必需的属性

8.2.2. 可选的属性

9. 图像映射例子

9.1. imgae_map_area.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>行星</title>
	</head>
	<body>
		<p>请点击图像上的星球, 把它们放大。</p>
		<img src="eg_planets.jpg" usemap="#planetmap" alt="Planets" />
		<map name="planetmap" id="planetmap">
			<area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" />
			<area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" />
			<area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" />
		</map>
		<p><b>注释: </b>img元素中的"usemap"属性引用map元素中的"id"或"name"属性(根据浏览器), 所以我们同时向map元素添加了"id"和"name"属性。</p>
	</body>
</html>

9.2. sun.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>太阳</title>
	</head>
	<body>
		<img src="eg_sun.gif" width="99px" height="98px" alt="sun" />
	</body>
</html>

9.3. mercur.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>水星</title>
	</head>
	<body>
		<img src="eg_mercur.gif" width="100px" height="100px" alt="mercur" />
	</body>
</html>

9.4. venus.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>金星</title>
	</head>
	<body>
		<img src="eg_venus.gif" width="100px" height="100px" alt="venus" />
	</body>
</html>

9.5. 效果图