HTML 图像
示例
试一个 » |
 |
试一个——示例 |
插入图像
本例演示了如何在网页中插入一幅图像。
插入来自别处的图像
本例演示了如何在网页中插入一幅来自另一个文件夹或另一个服务器的图像。
（本页底部提供了更多示例）
<img>标签与src属性
在HTML里，图像是用<img>标签来定义的。
<img>是个空元素，也就是说，它仅包含属性而没有结束标签。
要在页面上显示图像，你需要指定src属性。“src”代表“源（source）”的意思。src属性的值就是你想在页面上显示的图像的URL。
定义图像的语法为：
| <img src="url" /> |
URL指向图像的存储位置。例如，一个存放在“yige.org”的“images”目录里、文件名为“boat.gif”的图像的URL是：http://yige.org/images/boat.gif。
浏览器将在文档里<img>标签所在位置显示图像。假如你把一个<img>标签放在两个段落之间，那么浏览器将首先显示第一段，然后显示图像，接着显示第二段。
alt属性
alt属性用于为图像定义“备选文本（alternate text）”。你可以随便在alt属性值里写什么内容。
| <img src="boat.gif" alt="Big Boat" /> |
当浏览器无法正常载入图像时，将显示备选文本以代替图片，从而令读者知道这是一幅关于什么的图像。为页面里的所有图像提供“alt”属性是个较好的做法。对于那些浏览器仅显示文本的用户而言，此举可以改善显示并提高有用性。
要点——实用技巧
如果一个HTML文档里包含有10幅图像，那么为了正确显示页面，就需要11个文件。加载图像是比较费时的，因此我的建议是：请谨慎使用图像。
|
更多示例 |
背景图像
本例演示了如何为HTML页面增加背景图像。
图像对齐方式
本例演示了如何设置图像在文本中的对齐方式。
图像漂浮方式
本例演示了如何令图像往段落左侧或右侧漂浮。
调节图像尺寸
本例演示了如何调节图像的显示尺寸。
为图像指定备选文本
本例演示了如何为图像指定备选文本。当浏览器无法正常载入图像时，“alt”属性可以告诉读者这幅图像是关于什么的。为页面里的所有图像提供“alt”属性是个较好的做法。
将图像作为超链接
本例演示了如何将图像作为超链接。
创建客户端图像地图
本例演示了如何创建客户端图像地图（image map）及热区。每一个热区都是一个超链接。
创建服务端图像地图
本例演示了如何创建服务端图像地图。你会发现，当鼠标光标在图像区域上移动时，其坐标将显示在状态栏里。
图像标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 在图像地图里定义可点击的热区 |