你的位置:首页 > 网页设计

[网页设计]html图像入门


在HTML中,图像由<img>标签定义。

<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,需要使用源属性src, src指的是"source”(源)。源属性的值是图像的url地址

定义的图像语法是:    <img src="图片地址.jpg" />   。

浏览器将图像显示在文档图像标签出现的地方。如果将图像标签在两个段落之中的话,那样浏览器

会先选择第一个段落,然后在出现图像,在者就是后一个段落了。

alt属性用来为图像定义一串预留的可替换文本。替换文本属性值是自己设定的。中英文都可以使用。

例如:  <img src="boat.gif" alt="加载失败">

养成替换文本的好习惯有助于更好的显示信息,对于那些使用纯文本浏览器的人来说非常有用的。

假如某个HTML文件包 含十个图像,那么为了正确显示这个页面,需要加载11个文件。加载图片是需要时间的。

图像背景

gif和jpg文件均可用做HTML背景,如果图像小于页面,图片会进行重复。

例如:<body background="背景图像地址.jpg>

图像对齐

图片对齐底部<img src="图片地址.jpg” align="bottom">

图片对齐中间<img src="图片地址.jpg" align="middle">

图片对齐顶部<img src="图片地址.jpg" align=top">

图片的默认对齐方式是bottom。

图像浮动

带有图像的一个段落。图像的align属性设置为"left"。图像将浮动来文本左侧

<img src="图像地址.jpg" align="left">

带有图像的一个段落。图像的align属性设置为"right"。图像将浮动到文本右侧

<img src="图像地址.jpg" align="right">

调整图像的尺寸

通过改变 img 标签的"height"和"width"属性的值可以放大或缩小图像

缩小图像:<img src="图片地址.jpg" width="50" height="50">

放大图像:<img src="图片地址.jpg" width="200" height="200">

图片制作超链接

<a href="www.baidu.com"><img border="0" src="图片地址.jpg>

border是边框的意思,border="0"在这里的意思就是指定图片没有边框,在html里面,图像默认是有边框的。

图像映射

<img src="地图地址.jpg" border="0" usemap="#mingzi" alt="大图 />

<map name="mingzi"     id="mingzi">

<area

shape="square”

coords="0.0.0.0"

href="http://www.baidu.com"

target="_blank"

alt="小图" />

其中:usemap="#名字"  alt="替换文本"  map标签定义图像映射

area是热区的意思,就是在一张图片上画一个区域,然后可以给这个区域一个链接地址

shape=形状 热区有3种画法长方形,多边形,圆形。coords=地标,3点是圆形

href=超链接。  target="_blank"是指在另外一个页面打开一个新的页面。