更新时间:2014年8月2日

img元素(设置图像)

<img src=" " alt=" "/>

img元素用于在文档中嵌入图像。

img是Image的简写,使用src属性指定图像文件的URL。能够使用于WEB的图形形式有GIF、JPEG、PNG,它们有自身的优点,根据情况酌情使用。

使用width属性与height属性指定图像在浏览器上表示的尺寸。最好指定图像的尺寸,当指定了图形的尺寸时,浏览器就会提前预知图形大小,并在页面上给图像留出相应的空间尺寸,文字部分则提前显示,让读者有速度快的感觉。

属性

1、alt内容属性
用于指定能够描述图像的文本文件,当图像不能正常显示时显示的内容。
2、src内容属性
指定图像的保存地址,即:URL
3、usemap内容属性
客户端图形映射,指定与图形相关的map元素的名称。
4、ismap内容属性
服务器端图像映射。
5、width内容属性
指定图像的宽度。
6、height内容属性
指定图像的高度。

图像映射的使用例

<h1>请选择合适的形状:</h1>

<img src="../html5/material/images/area.gif" usemap="#sample" alt="红色有孔方形、绿色的圆、蓝色三角形" width="400" height="150">

<map name="sample">

<area href="www.webkkl.com" shape="rect" alt="红色方形的孔" coords="50,50,100,100" >

<area href="http://www.yahoo.co.jp/" shape="rect" alt="红色方形" coords="25,25,125,125">

<area href="https://www.google.co.jp/" shape="circle" alt="绿色的圆" coords="200,75,50">

<area href="#" shape="poly" alt="蓝色三角形" coords="310,26,267,120,370,110" target="_blank">

</map>

浏览器上的显示结果↓



请选择合适的形状:

红色有孔方形、绿色的圆、蓝色三角形 红色方形的孔 红色方形 绿色的圆 蓝色三角形
X

浏览器支持情况

元素
img yes yes yes yes yes