HTML语言剖析（九）图形标记

本是古典何须时尚 2022-08-25 12:55 147阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
     <font></font> 
    </div><a rel="nofollow">■</a> &lt;IMG&gt; ： </td> 
  </tr> 
  <tr> 
   <td>&lt;IMG&gt; 称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播 放及影像地图（IMAGE MAP 或称一图多连结）则于不会在这节提及，请看【影像地图】及 【其他标记】。 <p>&lt;IMG&gt; 的一般参数设定： </p> <p>例如 &lt;IMG <font>SRC</font>="LOGO.GIF" <font>WIDTH</font>=100 <font>HEIGHT</font>=100 <font>HSPACE</font>=5 <font>VSPACE</font>=5 <font>BORDER</font>=2 <font>ALIGN</font>="TOP" <font>ALT</font>="LOGO OF PENPALS GARDEN" <font>LOWSRC</font>="PRE_LOGO.GIF"&gt; </p> 
    <ul> 
     <li><font>SRC</font>="LOGO.GIF" <br>图片来源，接受 .GIF, .JPG 及 .PNG 格式，前两者通行己久，后者由 96 年开始发展， 于未来取代前两者。若图片文件与该 HTML 文件同处一目录则只　写上文件案名称，否则 必须加上正确的途径，相对及绝对皆可。 </li> 
     <li><font>WIDTH</font>=100 <font>HEIGHT</font>=100 <br>设定图片大小，此宽度、及高度一般采用 PIXELS 作单位。通常只设为图片的真实 大小以免失真，若　要改变图片大小最好事先使用图像编辑工具。 </li> 
     <li><font>HSPACE</font>=5 <font>VSPACE</font>=5 <br>设定图片边沿空白，以免文字或其它图片过于贴近。HSPACE 是设定图片左右的空 间，VSPACE 则是设定图片上下的空间，高度采用 PIXELS 作单位。 </li> 
     <li><font>BORDER</font>=2 <br>图片边框厚度。 </li> 
     <li><font>ALIGN</font>="TOP" <br>调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、 左右等，可选值：TOP, MIDDLE, BOTTOM, LEFT, RIGHT，内定为 BOTOM。NETSCAPE 还支持 TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM， <br>TEXTTOP 表示图片和文字依顶线对　， <br>BASELINE 表示图片对　到目前文字行底线值， <br>ABSMIDDLE 表示图片对　到目前文字行绝对中央， <br>ABSBOTTOM 表示图片对　到目前文字行绝对底部，（绝对底部意指它考虑到比方 Y 、G、Q 等字的下缘）。 </li> 
     <li><font>ALT</font>="LOGO OF PENPAL GARDEN" <br>这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文 字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些 文字亦会显示。 </li> 
     <li><font>LOWSRC</font>="PRE_LOGO.GIF" <br>设定先显示低解像图片，若所加入的是一张很大的图片，下载　时很长，这张低 解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。 </li> 
    </ul> <p>例子一： </p> 
    <table> 
     <tbody> 
      <tr> 
       <td><font>原始码</font></td> 
       <td><font>&lt;IMG SRC="GIRL.GIF" WIDTH=100 HEIGHT=112 BORDER=0 ALT="BEAUTIFUL GIRL"&gt;</font> 普通插入 </td> 
      </tr> 
      <tr> 
       <td><font>显示结果</font></td> 
       <td> 
        <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
         <img height="112" alt="BEAUTIFUL GIRL" src="http://wwwb.pconline.com.cn/PCEDU/SJ/JQ/HTMLP/02/GIRL.GIF" width="100"> 普通插入 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> <p></p> <p>例子二： </p> 
    <table> 
     <tbody> 
      <tr> 
       <td><font>原始码</font></td> 
       <td><font>&lt;IMG SRC="GIRL.GIF" WIDTH=100 HEIGHT=112 BORDER=0 ALT="BEAUTIFUL" HSPACE=10 VSPACE=20"&gt;</font> 设定上下左右空白位置 </td> 
      </tr> 
      <tr> 
       <td><font>显示结果</font></td> 
       <td> 
        <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
         <img height="112" alt="BEAUTIFUL" src="http://wwwb.pconline.com.cn/PCEDU/SJ/JQ/HTMLP/02/GIRL.GIF" width="100"> 设定上下左右空白位置 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> <p></p> <p>例子三： </p> 
    <table> 
     <tbody> 
      <tr> 
       <td><font>原始码</font></td> 
       <td><font>&lt;IMG SRC="GIRL.GIF" WIDTH=100 HEIGHT=112 BORDER=4 ALT="BEAUTIFUL" HSPACE=10 VSPACE=20"&gt;</font> 设定上下左右空白位置 </td> 
      </tr> 
      <tr> 
       <td><font>显示结果</font></td> 
       <td> 
        <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
         <img height="112" alt="BEAUTIFUL LADY" src="http://wwwb.pconline.com.cn/PCEDU/SJ/JQ/HTMLP/02/GIRL.GIF" width="100" align="middle"> 设定字画中间对　，边框厚度为 4。 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> <p></p> <p>例子四： </p> 
    <table> 
     <tbody> 
      <tr> 
       <td><font>原始码</font></td> 
       <td><font>&lt;IMG SRC="GIRL.GIF" WIDTH=100 HEIGHT=112 ALT="BEAUTIFUL LADY" ALIGN="RIGHT" BORDER=0&gt;</font> 设定图片靠右。 </td> 
      </tr> 
      <tr> 
       <td><font>显示结果</font></td> 
       <td> 
        <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
         <img height="112" alt="BEAUTIFUL LADY" src="http://wwwb.pconline.com.cn/PCEDU/SJ/JQ/HTMLP/02/GIRL.GIF" width="100" align="right"> 设定图片靠右。 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> <p></p> <p>例子五： </p> 
    <table> 
     <tbody> 
      <tr> 
       <td><font>原始码</font></td> 
       <td><font>&lt;IMG SRC="GIRL.GIF" WIDTH=200 HEIGHT=220 ALT="I'M NOT BEAUTIFUL RIGHT NOW" BORDER=0&gt;</font> 放大了的图片 </td> 
      </tr> 
      <tr> 
       <td><font>显示结果</font></td> 
       <td> 
        <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 
         <img height="220" alt="I'M NOT BEAUTIFUL RIGHT NOW" src="http://wwwb.pconline.com.cn/PCEDU/SJ/JQ/HTMLP/02/GIRL.GIF" width="200"> 放大了的图片 
        </div> </td> 
      </tr> 
     </tbody> 
    </table> <p></p> </td> 
  </tr> 
 </tbody> 
</table>