html插入图象:<img>标签
html插入图象:<img>标签
超文本之所以在很短的时间内如此广泛的受到人们的青睐,很重要的一个原因时它能支持多媒体的特性,如图象、声音、动画等。这一部分,我们先来学习在一个页面中如何插入图象。
<hr width="100%">
基本格式
超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种,所以我们对图片处理后要保存为这三种格式中的任何一种,这样才可以在浏览器中看到。
插入图象的标签是<IMG>,其格式为:
<IMG SRC="图形文件地址" />
SRC属性指明了所要链接的图象文件地址,这个图形文件可以是本地机器上的图形,也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。
例: <IMG SRC="images/ball.gif">
IMG还有两个属性是HEIGHT和WIDTH,分别表示图形的高和宽。通过这两个属性,可以改变图形的大小,如果没有设置,图形按原大显示:
例:
<hr width="100%">
图形与文字的对齐排列:
由IMG中的ALIGN属性来设置图文的对齐方式,有以下几种:
<hr width="100%">
图文之间的距离设置:
在HTML文件里图形水平位置的配置,可由HSPACE属性来完成,其垂直位置的配置,由VSPACE来完成。
<hr width="100%">
图形按钮:
图形按钮就是使用者通过在图形上单击,就能连接到某个地址上去。很简单,我们只要调用一下前面的知识就可以完成了。其基本格式如下:
<A HREF="资源地址"><IMG SRC="图形文件地址"></A>
例:
<A HREF="index.htm"><IMA SRC="html.gif"></A>
<hr width="100%">
基本格式
超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种,所以我们对图片处理后要保存为这三种格式中的任何一种,这样才可以在浏览器中看到。
插入图象的标签是<IMG>,其格式为:
<IMG SRC="图形文件地址" />
SRC属性指明了所要链接的图象文件地址,这个图形文件可以是本地机器上的图形,也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。
例: <IMG SRC="images/ball.gif">
IMG还有两个属性是HEIGHT和WIDTH,分别表示图形的高和宽。通过这两个属性,可以改变图形的大小,如果没有设置,图形按原大显示:
例:
<IMG SRC="flowers0.jpg"> | <IMG SRC="flowers0.jpg" width="200" heigth="100"> |
550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> |
<hr width="100%">
图形与文字的对齐排列:
由IMG中的ALIGN属性来设置图文的对齐方式,有以下几种:
ALIGN=top | 〈IMG SRC="love.gif" ALIGN=top>美丽的心灵 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> 美丽的心灵 |
ALIGN=middle | 〈IMG SRC="love.gif" ALIGN=middle>美丽的心灵 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> 美丽的心灵 |
ALIGN=buttom | 〈IMG SRC="love.gif" ALIGN=buttom>美丽的心灵 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> 美丽的心灵 |
ALIGN=texttop | 〈IMG SRC="love.gif" ALIGN=textop>美丽的心灵 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> 美丽的心灵 |
ALIGN=baseline | 〈IMG SRC="love.gif" ALIGN=baeline>美丽的心灵 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;"> 美丽的心灵 |
ALIGN=left | 〈IMG SRC="love.gif" ALIGN=left>美丽的心 灵,有着数不清的爱心,象天空里的星星,明 亮晶莹。 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">美丽的心灵, 有着数不清的 爱心,象天空 里的星星,明 亮晶莹。 |
ALIGN=right | 〈IMG SRC="love.gif" ALIGN=right>美丽的心 灵,有着数不清的爱心,象天空里的星星,明 亮晶莹。 | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">美丽的心灵, 有着数不清的 爱心,象天空 里的星星,明 亮晶莹。 |
<hr width="100%">
图文之间的距离设置:
在HTML文件里图形水平位置的配置,可由HSPACE属性来完成,其垂直位置的配置,由VSPACE来完成。
<IMA SRC="love.gif" > | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">美丽的心灵 |
<IMA SRC="love.gif" HSPACE=30> | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">美丽的心灵 |
<IMA SRC="love.gif" VSPACE=30> | 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;">美丽的心灵 |
<hr width="100%">
图形按钮:
图形按钮就是使用者通过在图形上单击,就能连接到某个地址上去。很简单,我们只要调用一下前面的知识就可以完成了。其基本格式如下:
<A HREF="资源地址"><IMG SRC="图形文件地址"></A>
例:
<A HREF="index.htm"><IMA SRC="html.gif"></A>
您在这个论坛的权限:
您不能在这个论坛回复主题