图像
实例
在下面的例子中，我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片：
<网页>
<主体>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_tulip.jpg“ 替代=“上海鲜花港 - 郁金香" />
</主体>
</网页>
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <图像> | 是 | 是 | 是 | 是 | 是 |
所有浏览器都支持 <图像> 标签。
定义和用法
图像 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<图像> 标签并不会在网页中插入图像，而是从网页上链接图像。<图像> 标签创建的是被引用图像的占位空间。
<图像> 标签有两个必需的属性：资源地址 属性 和 替代 属性。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| 替代 | 文本 | 规定图像的替代文本。 |
| 资源地址 | 地址 | 规定显示图像的 地址。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| 水平对齐 |
顶端 底端 中间 左边 右边 |
不推荐使用。规定如何根据周围的文本来排列图像。 |
| 边框 | 像素 | 不推荐使用。定义图像周围的边框。 |
| 高度 |
像素% |
定义图像的高度。 |
| 左右空 | 像素 | 不推荐使用。定义图像左侧和右侧的空白。 |
| 服务端映射 | 地址 | 将图像定义为服务器端图像映射。 |
| 长描述 | 地址 | 指向包含长的图像描述文档的 地址。 |
| 客户端映射 | 地址 | 将图像定义为客户器端图像映射。 |
| 上下空 | 像素 | 不推荐使用。定义图像顶部和底部的空白。 |
| 宽度 |
像素% |
设置图像的宽度。 |
全局属性
<图像> 标签支持 超文本（HTML ）中的全局属性。
事件属性
<图像 > 标签支持 超文本（HTML ）中的事件属性。
实例
- 插入图像
- 本例演示如何在网页中显示图像。
-
<!文章类型 网页>
<网页>
<主体>
<段落>
一幅图像：
<图像 资源地址=“https://www.w3school.com.cn/i/eg_mouse.jpg“ 宽度=“128“ 高度=“128“ />
</段落>
<段落>
一幅动画图像：
<图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 宽度=“50“ 高度=“50“ />
</段落>
<段落>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</段落>
</主体>
</网页> - 从不同的位置插入图片
- 本例演示如何将其他文件夹或服务器的图片显示到网页中。
-
<网页>
<主体>
<段落>
来自另一个文件夹的图像：
<图像 资源地址=“https://www.w3school.com.cn/i/ct_netscape.jpg“ />
</段落>
<段落>
来自 w3school.com.cn 的图像：
<图像 资源地址=“http://www.w3school.com.cn/i/w3school_logo_white.gif“ />
</段落>
</主体>
</网页> - 背景图片
- 本例演示如何添加背景图片到超文本（HTML）页面。
-
<网页>
<主体 背景=“htt段落s://www.w3school.com.cn/i/eg_background.jpg“>
<标题3>图像背景</标题3>
<段落>gif格式 和 jpg 格式的文件均可用作 超文本（html ）背景。</段落>
<段落>如果图像小于页面，图像会进行重复。</段落>
</主体>
</网页> - 排列图片
- 本例演示如何在文字中排列图像。
-
<网页>
<主体>
<标题2>未设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“> 在文本中</段落>
<标题2>已设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“底端“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“中间“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“上边“> 在文本中</段落>
<段落>请注意，底端 对齐方式是默认的对齐方式。</段落>
</主体>
</网页> - 浮动图像
- 本例演示如何使图片浮动至段落的左边或右边。
-
<网页>
<主体>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“左边“>
带有图像的一个段落。图像的 水平对齐 属性设置为 “左边“。图像将浮动到文本的左侧。
</段落>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“右边“>
带有图像的一个段落。图像的 水平对齐 属性设置为 “右边“。图像将浮动到文本的右侧。
</段落>
</主体>
</网页> - 调整图像尺寸
- 本例演示如何将图片调整到不同的尺寸。
-
<网页>
<主体>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_mouse.jpg“ 宽度=“50“ 高度=“50“>
<换行 />
<图像 资源地址=“https://www.w3school.com.cn/i/eg_mouse.jpg“ 宽度=“100“ 高度=“100“>
<换行 />
<图像 资源地址=“https://www.w3school.com.cn/i/eg_mouse.jpg“ 宽度=“200“ 高度=“200“>
<段落>通过改变 图像 标签的 “高度“ 和 “宽度“ 属性的值，您可以放大或缩小图像。</段落>
</主体>
</网页> - 为图片显示替换文本
- 本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
-
<网页>
<主体>
<段落>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 “替代“ 属性中指定的文本。在这里，"替代“ 的文本是“向左转“。</段落>
<段落>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 “替代“ 文本。</段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_goleft.gif“ 替代=“向左t转" />
<段落>如果无法显示图像，将显示 “替代“ 属性中的文本：</段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_goleft123.gif“ 替代=“向左转“ />
</主体>
</网页> - 制作图像链接
- 本例演示如何将图像作为一个链接使用。
-
<网页>
<主体>
<段落>
您也可以把图像作为链接来使用：
<超链接 超引用=“https://www.w3school.com.cn/example/html/lastpage.html“>
<图像 边框=“0“ 资源地址=“https://www.w3school.com.cn/i/eg_buttonnext.gif“ />
</超链接>
</段落>
</主体>
</网页> - 创建图像地图
- 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
<网页>
<主体>
<段落>请点击图像上的星球，把它们放大。</段落>
<图像
资源地址=“https://www.w3school.com.cn/i/eg_planets.jpg“
边框=“0“ 客户端映射=“#星际地图“
替代=“planets“ />
<地图 名字=“星际地图“ 标识=“星际地图“>
<区域
形状=“圆形“
坐标=“180,139,14“
超引用=“https://www.w3school.com.cn/example/html/venus.html“
目标=“新窗口“
替代=“venus“ />
<区域
形状=“圆形“
坐标=“129,161,10“
超引用=“https://www.w3school.com.cn/example/html/mercur.html“
目标=“新窗口“
替代=“mercury“ />
<区域
形状=“矩形“
坐标=“0,0,110,260“
超引用=“https://www.w3school.com.cn/example/html/sun.html“
目标=“新窗口“
替代=“sun“ />
</地图>
<段落><粗体>注释：</粗体>图像 元素中的 “客户端映射“ 属性引用 地图 元素中的 “标识“ 或 “名字“ 属性（根据浏览器），所以我们同时向 地图 元素添加了 “标识“ 和 “名字“ 属性。</段落>
</主体>
</网页>
浙公网安备 33010602011771号