HTML教程(7)-插入图形

原创 2004年10月30日 00:09:00

插入图形

  超文本之所以在很短的时间内如此广泛的受到人们的青睐,很重要的一个原因时它能支持多媒体的特性,如图象、声音、动画等。这一部分,我们先来学习在一个页面中如何插入图象。


基本格式

  超文本支持的图象格式一般有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">
flowers0.jpg

flowers0.jpg



图形与文字的对齐排列:

  由IMG中的ALIGN属性来设置图文的对齐方式,有以下几种:

ALIGN=top 〈IMG SRC="love.gif" ALIGN=top>美丽的心灵  love.gif 美丽的心灵
ALIGN=middle 〈IMG SRC="love.gif" ALIGN=middle>美丽的心灵  love.gif 美丽的心灵
ALIGN=buttom 〈IMG SRC="love.gif" ALIGN=buttom>美丽的心灵  love.gif 美丽的心灵
ALIGN=texttop 〈IMG SRC="love.gif" ALIGN=textop>美丽的心灵  love.gif 美丽的心灵
ALIGN=baseline 〈IMG SRC="love.gif" ALIGN=baeline>美丽的心灵  love.gif 美丽的心灵
ALIGN=left 〈IMG SRC="love.gif" ALIGN=left>美丽的心
灵,有着数不清的爱心,象天空里的星星,明
亮晶莹。
love.gif美丽的心灵,
有着数不清的
爱心,象天空
里的星星,明
亮晶莹。
ALIGN=right 〈IMG SRC="love.gif" ALIGN=right>美丽的心
灵,有着数不清的爱心,象天空里的星星,明
亮晶莹。
love.gif美丽的心灵,
有着数不清的
爱心,象天空
里的星星,明
亮晶莹。




图文之间的距离设置:

  在HTML文件里图形水平位置的配置,可由HSPACE属性来完成,其垂直位置的配置,由VSPACE来完成。

<IMA SRC="love.gif" > love.gif美丽的心灵
<IMA SRC="love.gif" HSPACE=30> love.gif美丽的心灵
<IMA SRC="love.gif" VSPACE=30> love.gif美丽的心灵




图形按钮:

  图形按钮就是使用者通过在图形上单击,就能连接到某个地址上去。很简单,我们只要调用一下前面的知识就可以完成了。其基本格式如下:

  <A HREF="资源地址"><IMG SRC="图形文件地址"></A>

例:

  <A HREF="index.htm"><IMA SRC="html.gif"></A>

HTML语言剖析(九)图形标记_HTML教程

■ :  称图形标记,主要用以插入图片于网页中,至于其它用处如配合影片文件等的播 放及影像地图(Image Map 或称一图多连结)则于不会在这节提及,请看【影像地图】及 【其他标记】。 的...
  • feixiangdexin123087
  • feixiangdexin123087
  • 2011年12月16日 11:20
  • 269

Eclipse 下的HTML 新手安装使用教程

1.首先我们安装一些软件如下:   (1)一个编译器eclipse软件(各个网站上都可以进行下载)   (2)JDK(JDK安装后产生JAVA下的jdk文件,如图所示)        (3)apach...
  • Kuangqiu
  • Kuangqiu
  • 2016年12月06日 09:19
  • 710

html教程

http://bbs.zb7.com/forum.php?mod=forumdisplay&fid=53&filter=typeid&typeid=64
  • leeandmins
  • leeandmins
  • 2015年07月17日 18:41
  • 238

HTML教程

HTML HTML:(Hype Text Markup Language)超文本标记语言,是最基本的网页语言。代码由标签组成,不区分大小写。 由开始,结束,分头部分(head)和体部分(body)...
  • me10zyl
  • me10zyl
  • 2014年05月23日 23:41
  • 991

HTML入门笔记25-HTML改变背景颜色

本篇学习改变背景颜色,在HTML中背景颜色用bgcolor表示,我们继续在前一篇表格基础上,添加一个背景颜色设置。我们把第一行设置绿色,第二行设置黄色,第三行设置蓝色,第四行设置粉色,具体效果如下图。...
  • u011541946
  • u011541946
  • 2017年07月28日 23:24
  • 561

POI Excel 12 图形绘制

图形绘制 POI支持图形绘制,使用的是Microsoft Office的图形绘制工具,开始绘制图形你需要根据HSSFSheet 类createPatriarch 方法创建图形绘制对象,这个将会 ...
  • u012868901
  • u012868901
  • 2016年04月15日 16:51
  • 554

CentOS7环境搭建--Notes

00 CentOS环境搭建1 所需软件:VMware-player-12.5.1CentOS-7-x86_64-Minimal.isojdk-8u111-linux-x64.rpmhadoop-2.7...
  • Flora_C
  • Flora_C
  • 2016年12月02日 12:44
  • 385

html5视频教程百度网盘下载

HTML5入门视频教程 /html5视频教程/HTML5入门视频教程 分享时间:2014-12-06 19:16分享用户:丶**峰哥文件大小:未知文件类型:文件夹 HTML5视频教程 /视...
  • yjsxxgm
  • yjsxxgm
  • 2016年10月02日 23:51
  • 4342

Centos 7.2 图形界面修改运行级别

安装 Gnome 包 yum groupinstall "GNOME Desktop" "Graphical Administration Tools" 设置开机运行级别5 ln -...
  • hanzheng260561728
  • hanzheng260561728
  • 2016年12月28日 13:06
  • 927

Latex插入图形

1、matlab绘制图形 >> x=-2*pi:0.1:2*pi; >> y1=sin(x); >> y2=sin(x+pi/3)+2; >> y3=cos(x); >> plot(x,y1,'.-...
  • whucv
  • whucv
  • 2012年09月08日 11:57
  • 1783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML教程(7)-插入图形
举报原因:
原因补充:

(最多只允许输入30个字)