HTML自学之旅(四)--插入图像
<html> <body background="D:\响O(∩_∩)O\响的东东\漂漂桌面\%5Bwallcoo_com%5D_best_of_nature_15173434.jpg"> <img src="http://www.webshu.net/Soft/UploadSoftPic/200603/20060325143500917.gif"> <br /> <!--img src="C:\Users\Ideal\Desktop\^_^\webweb\img\ali.png" alt="阿狸阿狸"--> <p>如果图像无法显示(没找到资源,或浏览器不支持),则会显示alt定义的文本。否则文本不显示。在浏览器无法载入图像时,替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。<br /> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小纯洁.gif" alt="小纯洁动画"/> </p> <p>来自另一个文件夹的图像: <img src="C:\Users\Ideal\Desktop\^_^\webweb\Icons\favorite.png" alt="爱心"/> </p> <hr />图像在不同位置插入 <p> 图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif">在文本中 </p> <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="bottom">在文本中(文本与图像底端对齐)</p> <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="middle">在文本中(文本与图像中端对齐)</p> <p>图像<img src="C:\Users\Ideal\Desktop\^_^\webweb\img\刷牙.gif" align="top">在文本中(文本与图像顶端对齐)</p> <p>注意!默认的是文本与图像的底端对齐!</p> <hr />浮动图像 <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\鱼兔妹.gif" align="left"> <br /> 带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。 </p> <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\鱼兔妹.gif" align="right" /> <br /> 带有图像的一个段落,图像的align属性设定为“right”。图像将浮动到文本的右侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。带有图像的一个段落,图像的align属性设定为“left”。图像将浮动到文本的左侧。 </p> <hr />调整图像大小 <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="90" height="50" /> </p> <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="150" height="100" /> </p> <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="250" height="200" /> </p> <hr />制作图像链接 <p> <a href="http://www.baidu.com"> <img border="0" src="C:\Users\Ideal\Desktop\^_^\webweb\img\eg_buttonnext.gif" /> </a> </p> <hr />制作图像映射 <p> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" width="288" height="180" alt="小女孩壁纸" usemap="#girlmap"> <map name="girlmap"> <area href="girl.html" shape="rect" coords="148,52,232,172" target="_blank" alt="girl"> <area href="flower.html" shape="circle" coords="108,86,20" target="_blank" alt="flower"> </map> </p> <hr />把图像转换为图像映射 <p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p> <p>也可以把下面的html改成服务器asp文件,然后点击图片,服务器会返回一个坐标值</p> <a href="插入图像.html"> <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\小女孩.jpg" ismap/> </a> <body> </html>