HTML的<img>标签基础

        其实当静下心去回头看过去在浮躁心态下所学过的东西，多多少少都能翻出一些以前没有留意过的内容，或许这就是「温故而知新」吧。这不，今天我除了回顾以往的知识，又有了一点新的收获。

        那么先把<img>标签的基本内容回顾一遍吧。

1.img标签的基本语法

<img src="URL" >

以上是<img>标签的最基本语法，它的作用是在网页上插入所指定的图片（image）。为什么说它是「最」基本语法呢，因为它只包含了必需的 src 属性。至于其它属性，包括了 alt（图像描述）、align（对齐方式）、heigth（图像高度）、width（图像宽度）。可见一个包含所有可选属性的<img>标签语句应该是这样的：

<img src="URL" alt="" align="" width="" height="" >

其中属性解释如下：

src（source）：必需属性。指图像的源属性，其值为图像的URL地址。指向图片的地址，它可以是网络上的图片地址，也可以是工程目录下的图片文件地址。

alt：可选属性。这个属性用于为图片定义一些预设的替换文本，当浏览器无法加载图片时，替换文本会代为显示在页面上，用于告诉用户他们所失去的信息内容。所以为了养成一个好的编程习惯，你最好每次都加上这个属性，虽然... 你即使不加这个属性，语句也可以正确编译。

align：可选属性。表示图像对齐方式。其值包括了 left（居左对齐）、right（居右对齐）、top（顶部对齐）、middle（中部对齐 / 默认值）和 bottom（底部对齐）。

width / height：可选属性。表示为图片预设大小，图片会按照预设的宽度或长度进行 等比例缩放而非裁剪，如果你的长宽比设置的不合适，那么图片有可能会显得非常「扭曲」。另外需要说明的是，这项属性的数值可以是整数值，也可以是百分比值。整数值表示将图片按照指定大小来缩放图片，百分比值表示将图片按照原大小等比例缩放图片。例如：

<img src="img/sacreCoeur.jpg" alt="圣心大教堂" width="80%" >

表示将图片按照原本大小的80%来缩放图片。

顺便说一下，<img>标签不需要添加关闭标签， 当然你就算了加了也无所谓，html还是会正确识别这个标签。

——————————————————————————————————————————————

那么接下来，就来介绍图片居中显示和以前没注意过的用法：

2.如何让图片居中显示

如果尝试过的人就会发现，光凭在<img>标签中指定 align（对齐方式） 属性为 center（居中）是无法让图片在网页中居中显示的，那么，「如何让图片在网页中居中显示呢」？下面介绍一个 最简单的方法：「设置 div块 并设定 text-align 与 padding-top 属性」令图片居中，如下所示：

<div style="text-align:center; padding-top:inherit">
   <img src="img/sacreCoeur.jpg" alt="圣心大教堂" width="360" >
</div>

以上代码将图片放置在了 div 块内并指定 text-align 和 padding-top 属性令图片居中显示。当然实现的方法有很多种，但本白认为这种方法可以说是最「懒人」的方法了...

当然最合适的方法显然是设置外部 CSS 样式来限制图片的显示方法。

3.在同一张图的不同位置分别创建链接

看过我上一篇「关于<a>标签的基本用法和特殊用法」的人都知道，火狐浏览器和 opera 浏览器是支持用<a>标签来完成这项功能的，那如果我不用火狐或者 opera，或者说用户用的有可能不是火狐或者 opera 浏览器，而我又想实现这个功能，那应该怎么办呢？其实大体上跟<a>标签差不多：

<img src="img/sacreCoeur.jpg" alt="圣心大教堂" width="360" usemap="#sacreCoeur">
<map name="sacreCoeur">
<area shape="rect" coords="0,0,180,290" target="_blank" href="http://baike.baidu.com" />
<area shape="circle" coords="270,290,90" target="_blank" href="http://zhidao.baidu.com" />
</map>

以上代码显示了如何在一张图片内的不同位置创建不同的超链接，其中的各项属性在上一篇文章中已有解释，其中比较不同的是这个示例中是用<area>来完成触发区域的指定。用<img>标签来代替<object>对象的指定。 但这种方法显然兼容性更好。

当然需要特殊说明的是图片的平面直角坐标系，笔者这里是图片最左上一点为坐标原点，从原点开始向右、向下为正。