1.在HTML中,图像由<img>标签定义,并且是空标签
2.想要在网页上显示图片,需要用到源(src)属性
3.若浏览器无法载入图像,需要用文本替换显示,用的是替换文本(alt)属性
4.img元素的属性:
(1)src:图片来源URL;
(2)alt:辅助效果,见上;
(3)align:有right、left、top、bottom等;
(4)height和width:图片的高度和宽度,单位为像素,如果不指定,则为默认;如果只指定height或width,则自动调整大小;
(5)hspace和vspace:图像和周围文字的空白间隙大小;
例如 :
<span style="font-family:Microsoft YaHei;"> <img src = "g1.gif" alt = "redhat os" align = "left" width = "150" height = "150" hspace = "4" vspace = "4"></span>
注:如果要把一个图片设置成很小,则建议新建一个很小的图片
5.图像映射:指一个图片的不同区域,对应不同的链接
(1)一般分为:服务器端(将点击的坐标发送给服务端,由服务端程序来决定)和客户端(根据点击的不同位置,确定链接的目标)
(2)通过<img>后添加<map>和<area>来设置
(3)<map>元素表明映射的开始,只有一个name属性
<area>元素表明区域,如果要把一个图片分4个区域,则用4个area
shape:必须的属性,用于描述区域的形状,rectangle\poly\circle\default可选,default指的是还没有被定义的区域。
coords:指定区域的坐标。比如矩形有4个坐标,前两个是左上角的x,y坐标,后两个是右下角的x,y坐标。
href和nohref:href指定目的的链接,如果不指定href属性,则需要指定nohref,nohref="nohref"
target:和<a>一样
注:
1)在<img>中设置usemap属性
2)在<map>中设置name属性
4.示例如下:
(1)背景图片:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body background="D:\download\20168521425014120.gif">
<p>
一幅动态图:
<img src="D:\download\2016842254464307.gif" width="128" height="128" alt="Big Boat">
</p>
</body>
</html></span>
展示效果:
(2)排列图片:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
动态图1:
<img src="D:\download\2016842254464307.gif" align="bottom">
</p>
<p>
动态图2:
<img src="D:\download\2016842254464307.gif" align="middle">
</p>
<p>
动态图3:
<img src="D:\download\2016842254464307.gif" align="top">
</p>
</body>
</html></span>
展示效果:
(3)浮动图片:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<p>
1.一个段落中,带有图片,将其浮动在左侧
<img src="D:\download\2016842254464307.gif" align="left">
</p>
<p>
2.一个段落中,带有图片,将其浮动在右侧
<img src="D:\download\2016842254464307.gif" align="right">
</p>
</body>
</html></span>
展示效果:
(4)调整图片尺寸:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
同一幅图片的不同尺寸展示(50 * 50)
<img src="D:\download\2016842254464307.gif" width="50" height="50">
</p>
<p>
同一幅图片的不同尺寸展示(100 * 100)
<img src="D:\download\2016842254464307.gif" width="100" height="100">
</p>
<p>
同一幅图片的不同尺寸展示(200 * 200)
<img src="D:\download\2016842254464307.gif" width="200" height="200">
</p>
</body>
</html></span>
展示效果:
(5)为图片显示替换文本:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
当浏览器无法显示图片,or当鼠标移动图像上,会显示的文本内容:
<br/>
<img src="D:\download\2016842254464307.gif" alt="请稍等...">
</p>
</body>
</html></span>
展示效果:
(6)制作带链接的图片:
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
制作有链接的图片:
<br/>
<a href="http://www.baidu.com">
<img src="D:\download\2016842254464307.gif">
</a>
</p>
</body>
</html></span>
展示效果:
(7)创建图片映射:
<span style="font-family:Microsoft YaHei;"><pre name="code" class="html"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
请分别点击图中间的左上角和右下角,有不同的效果哦!
<br/>
<img src="D:\download\2016842254464307.gif" border="0" usemap="#mymap" alt="请稍候...">
<map id="mymap" name="mymap">
<area shape="rect" coords="0,0,104,104" href="D:\download\2016842384792555.gif" target="_blank" alt="111">
<area shape="rect" coords="106,106,140,140" href="D:\download\2016852110124950.gif" target="_blank" alt="222">
</map>
</body>
</html></span>
展示效果:
(8)把图像转为图像映射
<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>请把鼠标移到图片上,有surprise哦!<p/>
<a href="D:\Learning\Coding\Html\test_tag.html">
<img src="D:\download\testimg1.gif" ismap>
</a>
</body>
</html</span>
展示效果: