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>
原文地址:https://www.cnblogs.com/lx09110718/p/2839585.html