<img>图片标签
img标签常用的属性:
src:
规定显示图像的 URL
width:
设置图片的宽
height:
设置图片的高
alt:
如果图片资源无法找到,那么就显示对应的文字,对图片进行说明
特殊功能:
热点图(
图像映射
)
热点图利用Dreamweaver软件 操作步骤如下:
①鼠标放在要添加热点图的图片代码处
②切换到“拆分”视图
③点击不同形状的热点图样式,在图片上选取要作为热点图的部分
④更改链接URL和链接目标,保存即可
⑤Dreamweaver自动生成的代码如下:
案例Demo
<!DOCTYPE html >
<!--
<img>图片标签
img标签常用的属性:
src: 规定显示图像的 URL
width: 设置图片的宽
height: 设置图片的高
alt: 如果图片资源无法找到,那么就显示对应的文字,对图片进行说明
热点图:
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>图像标签</title>
<meta name="keywords" content="关键词,关键词"/>
<meta name="description" content="描述……………………"/>
</head>
<body>
<img src="yz.jpg" alt="这是什么图片呢??" width="100px" border="0" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="32,33,73,69" href="http://baidu.com" target="_blank">
</map>
<br/><hr/>
<img src="cool.png" alt="这是什么图片呢??" border="0" usemap="#Map2"/>
<map name="Map2">
<area shape="circle" coords="41,77,10" href="http://QQ.com" target="_blank">
<area shape="rect" coords="69,69,90,85" href="http://baidu.com" target="_blank">
</map>
<br/><hr/>
<img src="cool.png" width="40px" height="40px" alt="这是什么图片呢??"/>
<br/><hr/>
<img src="cool2.png" alt="这是什么图片呢??alt图片说明"/>
</body>
</html>