html5的img标签的深入学习-20131005

img元素向网页中嵌入一幅图像。
<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src属性和alt属性。

src属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

为了整理文档的存储，创作者通常会把图像文件存放在一个单独的文件夹中，而且通常会将这些目录命名为"pics"或者"images"之类的名称。

alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。
alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

HTML 与 XHTML 之间的差异

在 HTML 中，<img> 标签没有结束标签。
在 XHTML 中，<img> 标签必须被正确地关闭。

属性可以选择的属性

align 属性

align 属性定义了图像相对于周围元素的水平和垂直对齐方式。没有定义图像相对于其他文字和与其处于同一行中的其他图像的对齐关系。HTML图像在行中出现时通常只伴有一行文字。而通常的印刷媒体，像杂志，则把文字在图像的周围进行环绕，这样就会有很多行文字与图像相邻，而不只是一行。

<img src="/i/eg_cute.gif" align="middle" />

border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。
使用border属性和一个用像素表示的宽度值就可以去掉border="0"或加宽图像的边框。

<a href="/index.html">
<img src="/i/eg_logo_w3school.gif" border="1" />
</a>

<br />

<a href="/index.html">
<img src="/i/eg_logo_w3school.gif" border="2" />
</a>

<br />

hspace 和 vspace 属性

通常图形浏览器不会在图像和其周围的文字之间留出很多空间。除非创建一个透明的图像边框来扩大这些间距，否则图像与其周围文字之间默认的两个像素的距离，对于大多数设计者来说是太近了。如果把图像放在超链接中，特殊颜色的边框会把留出的所有间距都占据了，而且还会使人们注意到文字与图像是多么接近。

<img src="w3school.gif" hspace="30" vspace="30" />

ismap 属性

ismap 属性将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以URL查询字符串的形式发送到服务器。

<a href="demo_form.asp">
<img src="tulip.gif" ismap />
</a>

longdesc 属性

longdesc 属性规定指向图像信息页面的URL。img标签的longdesc属性与alt属性类似，但它允许更长的描述性文字。longdesc的值是一个指向包含图像说明的文档的URL。如果说明多于 1024个字符，那么可以使用longdesc属性来设置指向它的链接。

<img src="eg_logo_w3school.gif" alt="W3School.com.cn" longdesc="w3s.txt" />