html如何加载图片

旧城等待， 2022-09-17 05:27 142阅读 0赞

# HTML 5 <img> 标签 #

## 定义和用法 ##

<img> 标签定义图像。

## HTML 4.01 与 HTML 5 之间的差异 ##

在 HTML 4.01 中，图像的 "align", "border", "hspace" 以及 "vspace" 不赞成使用。在 HTML 5 中，不再支持这些属性。

## 例子 ##

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
   <th>4</th> 
   <th>5</th> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>text</td> 
   <td>定义有关图形的短的描述。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>URL</td> 
   <td>要显示的图像的 URL。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td> 
    <ul> 
     <li>top </li> 
     <li>bottom </li> 
     <li>middle </li> 
     <li>left </li> 
     <li>right </li> 
    </ul> </td> 
   <td>规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。</td> 
   <td>4</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>pixels</td> 
   <td>定义图像周围的边框。不支持。请使用 CSS 代替。</td> 
   <td>4</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>pixels %</td> 
   <td>定义图像的高度。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>hspace</td> 
   <td>pixels</td> 
   <td>定义图像左侧和右侧的空白。不支持。请使用 CSS 代替。</td> 
   <td>4</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>ismap</td> 
   <td>URL</td> 
   <td>把图像定义为服务器端的图像映射。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>longdesc</td> 
   <td>URL</td> 
   <td>一个 URL，指向了描述该图像的文档。不支持。</td> 
   <td>4</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>usemap</td> 
   <td>URL</td> 
   <td>定义作为客户端图像映射的一幅图像。请参阅 &lt;map&gt; 和 &lt;area&gt; 标签，了解其工作原理。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>vspace</td> 
   <td>pixels</td> 
   <td>定义图像顶部和底部的空白。不支持。请使用 CSS 代替。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>pixels %</td> 
   <td>设置图像的宽度。</td> 
   <td>4</td> 
   <td>5</td> 
  </tr> 
 </tbody> 
</table>

### 标准属性 ###

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, 
    lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

### 事件属性 ###

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, 
    ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, 
    ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, 
    onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, 
    onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

## TIY 实例 ##

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中。

浮动图像

本例演示如何使图片浮动至段落的左边或右边。

调整图像尺寸

本例演示如何将图片调整到不同的尺寸。

制作图像链接

本例演示如何将图像作为一个链接使用。