当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML语言剖析(九)图形标记

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 HTML语言剖析(九)图形标记


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 33 ::
收藏到网摘: n/a

 
<IMG>
■ <IMG> :
<IMG> 称图形标记,主要用以插入图片于网页中,至于其它用处如配合影片文件等的播 放及影像地图(Image Map 或称一图多连结)则于不会在这节提及,请看【影像地图】及 【其他标记】。

<IMG> 的一般参数设定:

例如 <img src="/upload/tech/20091104/20091104155238_8fe0093bb30d6f8c31474bd0764e6ac0.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="/upload/tech/20091104/20091104155239_c410003ef13d451727aeff9082c29a5c.gif">

  • src="/upload/tech/20091104/20091104155238_8fe0093bb30d6f8c31474bd0764e6ac0.gif"
    图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称,否则 必须加上正确的途径,相对及绝对皆可。
  • width=100 height=100
    设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若 要改变图片大小最好事先使用图像编辑工具。
  • hspace=5 vspace=5
    设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。
  • border=2
    图片边框厚度。
  • align="top"
    调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
    texttop 表示图片和文字依顶线对 ,
    baseline 表示图片对 到目前文字行底线值,
    absmiddle 表示图片对 到目前文字行绝对中央,
    absbottom 表示图片对 到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
  • alt="Logo of PenPal Garden"
    这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
  • lowsrc="/upload/tech/20091104/20091104155239_c410003ef13d451727aeff9082c29a5c.gif"
    设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。

例子一:

原始码<img src="/upload/tech/20091104/20091104155241_fa83a11a198d5a7f0bf77a1987bcd006.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入
显示结果
beautiful girl 普通插入

例子二:

原始码<img src="/upload/tech/20091104/20091104155241_fa83a11a198d5a7f0bf77a1987bcd006.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置