《HTML教程》07章 图象


图像的显示
    <img src="URL" width="宽度" height="高度">
<img src="image/i07_01.jpg">(图像原图)
<img src="image/i07_01.jpg" width="140" height="100">(附上原图尺寸)
<img src="image/i07_01.jpg" width="140" height="50">(高度减半)
<img src="image/i07_01.jpg" width="70" height="100">(宽度减半)
<img src="image/i07_01.jpg" width="50%">(百分比表示)
<img src="image/i07_01.jpg" width="120%">(放大表示)

图像不能显示
    <img src="URL" alt="图像不存在的替换文本">
<img src="image/i07_##.jpg">
<img src="image/i07_##.jpg" alt="图像不能显示"> 图像不能显示
<img src="image/i07_##.jpg" alt="">

图像外框的设定
    <img src="URL" border="#">
<a href="#"><img src="image/i07_01.jpg" border="0"></a>
<a href="#"><img src="image/i07_01.jpg"></a>
<a href="#"><img src="image/i07_01.jpg" border="5"></a>
<img src="image/i07_01.jpg" border="0">
<img src="image/i07_01.jpg">
<img src="image/i07_01.jpg" border="5">

图像与文字对齐
    <img src="URL" align="top/middle/bottom">
当前图像<img src="image/i07_01.jpg" align="top">与文字顶部对齐 当前图像与文字顶部对齐
当前图像<img src="image/i07_01.jpg" align="middle">与文字中间对齐 当前图像与文字中间对齐
当前图像<img src="image/i07_01.jpg" align="bottom">与文字底顶部对齐 当前图像与文字底部对齐

文字环绕图像
    <img src="URL" align="left/right">
<img src="image/i07_01.jpg" align="left">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆,其中一架随后被美军战机摧毁,以免落入伊拉克军队手中。

据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。

<img src="image/i07_01.jpg" align="right">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆,其中一架随后被美军战机摧毁,以免落入伊拉克军队手中。

据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。


图像与周围文本的间隔
    <img src="URL" vspace="垂直间隔" hspace="水平间隔">
<img src="image/i07_01.jpg" align="left" vspace="25" hspace="25">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆,其中一架随后被美军战机摧毁,以免落入伊拉克军队手中。

据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。

<img src="image/i07_01.jpg" align="right" vspace="25" hspace="25">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆,其中一架随后被美军战机摧毁,以免落入伊拉克军队手中。

据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。


文字环绕图像的解除
    <img src="URL" align="left/right">
<img src="image/i07_01.jpg" align="left">中新网华盛顿3月20日电<br clear="left">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆。


据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。

<img src="image/i07_01.jpg" align="right">中新网华盛顿3月20日电<br clear="right">文字省略

中新网华盛顿3月20日电,美国国防部官员20日说,两架美军直升机在伊拉克和科威特边境的密集行动中紧急着陆。


据路透社报道,美国官员说,一架MH-53特种行动直升机上的六名机组人员和一架AH-64“阿帕奇”武装直升机上的两名机组成员都未受伤。


图像映像
    <img src="URL" usemap="#map名称">
    <map name="map名称">
    <area shape="形状" coods="坐标" href="URL">
                 形状: rect(矩形)、circle(圆形)、poly(多边形)、default(全体)
    </map>
<img src="i07_02.gif" usemap="#Laner">
<map name="Laner">
<area shape="rect" href="sample/s07_01.htm" target="sample" coords="140,20,280,60">
<area shape="poly" href="sample/s07_02.htm" target="sample" coords="100,100,180,80,200,140">
<area shape="circle" href="sample/s07_03.htm" target="sample" coords="80,100,60">
</map>

Java Applet
    Applet是由Java制作的客户端称的被作为“小应用程序”,在html中提供了如下接口。
    <applet code="Applet类名" width="宽度" height="高度">
    <param name="参数名" value="参数值">
    <applet>
<applet code="Lake.class" align="absmiddle" width="250" height="340" id="Lake">
<param name="bgcolor" value="#d2ffd2">
<param name="image" value="image/i07_03.gif">
</applet>


配置各种形式的数据

可以用下面的元素来配置各种形式的数据,诸如图像、动画、JavaApplet、PlugIn插件等。加在<object>和</object>之间的内容除了<embed>、</embed>、<para>和<map>两元素外,其余皆无效。

<object data="需要配置的数据的url"   type="MIME类型"
        classid="执行程序的MIME标识" codebase="执行程序的url"
        width="宽度"  height="高度">
    <param name="参数名" value="参数值">
        <embed src="" quality="" plusinspage="" type="宽度" width="" height="高度">
    </embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="446" height="316">
<param name=movie value="html07.swf ">
<param name=quality value=high>
<embed src="html07.swf " quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="446" height="316">
</embed>
</object>