HTML图像

一般我们用到的就是插入图片,将图片多为背景,再者将图片作为链接。涉及到的标签就是< img> 接下来我们就动手开始写一个HTML文件加深了解 首先我们用浏览器在网页上下载几张图片(放到和HTML文件一个文件夹中)供后面使用。

1.先设置一张图片为网页背景图片

在body属性中加入background属性添加背景图片

QQ截图20161011091200.png

2.举例插入一张图片 写法如下

<img src="路径加文件名">

插入图片以后: 

QQ截图20161011091631.png

这时我们可以看出,字体和图片的低端是对其的,下面我们就来调整下对其方式

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>

QQ截图20161011091656.png

4.调整插入图片尺寸 

大多数的尺寸都没有那么合适,直接插入以后会破换整体页面的效果。所以在插入图片时,很有必要控制其尺寸,这是很容易办到的,就孩子需要在< img>标签中加入width height 两个属性。 那我们顺势就控制下上面的那几副图吧

width="80" height="80"

QQ截图20161011091717.png

(当然,我还调整了字体大小)

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>

然后,当我们点击小松鼠举起的栗子,你就会看见跟多栗子 

QQ截图20161011091743.png

shape属性的取值可以是:rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。

coords属性对于矩形而言,coords有4个值,分别用逗号隔开,表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标,这里获取坐标的方式,就用截图工具帮忙就好。

继续学习
||
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body background="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面,图像会进行重复。</p> </body> </html>
提交重置代码