HTML图像
一般我们用到的就是插入图片,将图片多为背景,再者将图片作为链接。涉及到的标签就是< img> 接下来我们就动手开始写一个HTML文件加深了解 首先我们用浏览器在网页上下载几张图片(放到和HTML文件一个文件夹中)供后面使用。
1.先设置一张图片为网页背景图片
在body属性中加入background属性添加背景图片
2.举例插入一张图片 写法如下
<img src="路径加文件名">
插入图片以后:
这时我们可以看出,字体和图片的低端是对其的,下面我们就来调整下对其方式
3.添加属性调整图片的对其方式
在< img>标签中加入align属性,调整对其。 相对习题的上下可以加的参数有 bottom、middle、top,默认就是我们刚看见的bottom 相对字体左右可加的参数有right,left默认为right
下面我们直接来比较下:
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>let's have an example<img src="./julizi.png"></p> <p> align top<img src="./julizi.png" align="top" ></p> <p>align middle<img src="./julizi.png" align="middle"></p> <p>align left<img src="./julizi.png" align="left" ></p> </body> </html>
4.调整插入图片尺寸
大多数的尺寸都没有那么合适,直接插入以后会破换整体页面的效果。所以在插入图片时,很有必要控制其尺寸,这是很容易办到的,就孩子需要在< img>标签中加入width height 两个属性。 那我们顺势就控制下上面的那几副图吧
width="80" height="80"
(当然,我还调整了字体大小)
5.创建图像映射
在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方。意思就是,一张图片我们可以创建带有可供点击区域的图像地图,其中每个区域就是一个超链接。涉及到的标签就是< map>标签,用来指定图片,< area>用来指定超链接区域
<img src="xx.jpg" usemap="#mp"/> <map name="mp" id="mp"> <area> ... ... ... </area> </map>
这里以一张图片作为地图, 在< area>标签中我们会涉及到shape ,coords, href属性,分别用来指定超链接区域形状,超链接区域坐标,还有超链接跳转地。
这是具体实现内容
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>tap the li zi </p> <img src="./julizi.png" usemap="#lizi"/> <map name="lizi"> <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank" </map> </body> </html>
然后,当我们点击小松鼠举起的栗子,你就会看见跟多栗子
shape属性的取值可以是:rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言,coords有4个值,分别用逗号隔开,表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标,这里获取坐标的方式,就用截图工具帮忙就好。