码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 - 图像相关元素

时间:2015-10-13 17:24:01      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:

HTML5保留了<img.../>元素在页面中定义图像,它是一个空元素,必须指定以下两个属性:

1、src:该属性指定图片文件所在位置,可以是相对或绝对路径

2、alt:该属性指定一段文本,作为该图片的提示信息

除此之外,还可以指定以下两个可选属性:

1、height:指定该图片的高度,可以是百分比或像素值

2、width:指定该图片的宽度,可以是百分比或像素值

除此之外,还有两个相关的标签:

1、<map>:用于定义图片映射

2、<area>:用于定义图片映射的内部区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片相关标签</title>
	</head>
	<body>
		<img src="logo.jpg" alt="疯狂Java的Logo" /><br />
		<!-- 定义图片,指定高、宽 -->
		<img src="img/logo.jpg" width="300" height="120" alt="疯狂Java的Logo" /><br />
		<!-- 定义图片,使用指定的图片映射 -->
		<img src="img/logo.jpg" width="300" height="120" border="0" usemap="#test" alt="疯狂Java的Logo" /><br />
		<!-- 定义图片映射 -->
		<map name="test" id="test">
			<!-- 为该图片映射定义2个区域 -->
			<area shape="circle" coords="57,55,25" href="http://www.leegang.org" alt="leegang.org" />
			<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.crazyit.org" alt="crazyit.org" />
		</map>
	</body>
</html>



HTML5 - 图像相关元素

标签:

原文地址:http://my.oschina.net/u/2399867/blog/516561

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!