你的位置:首页 > 软件开发 > 网页设计 > html图像入门

html图像入门

发布时间:2015-10-19 17:00:08
在HTML中,图像由<img>标签定义。<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,需要使用源属性src, src指的是"source”(源)。源属性的值是图像的url地址定义的图像语法是 ...

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

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

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

定义的图像语法是:    <img src='/images/loading.gif' data-original="图片地址.jpg" />   。

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

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

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

例如:  <img src='/images/loading.gif' data-original="boat.gif" >

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

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

图像背景

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

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

图像对齐

图片对齐底部<img src='/images/loading.gif' data-original="图片地址.jpg” align="bottom">

图片对齐中间<img src='/images/loading.gif' data-original="图片地址.jpg" align="middle">

图片对齐顶部<img src='/images/loading.gif' data-original="图片地址.jpg" align=top">

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

图像浮动

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

<img src='/images/loading.gif' data-original="图像地址.jpg" align="left">

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

<img src='/images/loading.gif' data-original="图像地址.jpg" align="right">

调整图像的尺寸

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

缩小图像:<img src='/images/loading.gif' data-original="图片地址.jpg" width="50" height="50">

放大图像:<img src='/images/loading.gif' data-original="图片地址.jpg" width="200" height="200">

图片制作超链接

<a href="www.baidu.com"><img border="0" src='/images/loading.gif' data-original="图片地址.jpg>

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

图像映射

<img src='/images/loading.gif' data-original="地图地址.jpg" border="0" usemap="#mingzi" mingzi"     id="mingzi">

<area

shape="square”

coords="0.0.0.0"

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

target="_blank"

/>

其中:usemap="#名字"    map标签定义图像映射

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

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

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


原标题:html图像入门

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。