img

图片元素，程序样例：

<img src="images/IDE_Xdebug_PortSet.png" alt="图片">

src
指定图片路径，可以使绝对路径，也可以是相对路径
alt
指定当图片访问不到时显示的字符串

style

height / width
单独指定其中的一个，最终图片是长宽都缩小或者扩大对应的比例；如果同时指定两者，那么就会显示为设定的大小。

与a元素联用

可以把图片作为一个链接，点击图片即可跳转网页：

<a href="test.php"><img src="images/IDE_Xdebug_PortSet.png" alt="图片" style="height: 100px;" >
</a>

就是a元素的内容部分替换为img元素

与map元素联用

<a href="test.php?all=1"><img src="images/IDE_Xdebug_PortSet.png" alt="图片" style="height: 100px; width: 100px" usemap="#testMap">
</a><map name="testMap">
<!-- <area shape="rect" coords="0px, 0px, 50px, 50px" href="base.php?rect=1" alt="alt", target="_self"> -->
<!-- <area shape="circle" coords="75px, 25px, 25px" href="base.php?circle=1" alt="alt"> -->
<!-- <area shape="poly" coords="0px, 50px, 50px, 50px, 0px, 100px" href="base.php?poly=1" alt="alt"> --><area shape="rect" coords="0, 0, 50, 50" href="test.php?rect=1" alt="alt", target="_self"><area shape="circle" coords="75, 25, 25" href="test.php?circle=1" alt="alt"><area shape="poly" coords="0, 50, 50, 50, 0, 100" href="test.php?poly=1" alt="alt">
</map>

首先需要定义map，然后通过img中usemap属性和map的name属性产生关联，然后在map中定义area，这样，img图片的不同区域就会映射到不同area，然后点击对应区域就会跳转响应链接;
同时，还可以定义整个的img图片链接，这样，在area覆盖没有覆盖的区域就跳转该链接。

area

area可以定义不同形状，coords的单位为px，可以省略单位。

rect
矩形，coords为矩形左上角x, 矩形左上角y, 矩形右下角x, 矩形右下角y
circle
圆形，coords为圆心x, 圆心y, 半径
poly
圆形，coords为点1_x, 点1_y, 点2_x, 点2_y,... 点n_x, 点n_y，最后一个点不需要和第一个点闭环。

和figure元素联用

figure，指代，定义;
用来提升语义性，通常用于把图片、图片标题、图片描述包裹起来，表示整个信息都是描述图片信息。

<figure><img src="images/IDE_Xdebug_PortSet.png" alt="图片" style="height: 100px; width: 100px" usemap="#testMap"><figcaption><p>测试图片</p></figcaption><p>测试图片描述</p>
</figure>

figcaption，也是提升语义用的，指定figure标题。

文字与图片在同一行

当文字与图片在同一行，图片高度从小到大的规律是：

当图片在文字基线到行顶之间高度时，图片底部一直挨着基线
当图片高度超出了文字基线到行顶之间的高度，那么图片的上边会抵住行顶，此时他会顶着基线向下，所有的文字都会随着基线向下移动

解决方法

一种方法是使用浮动，一种方法是使用绝对定位将图片定位过去。

希望设置导航中链接文字的盒子宽度，高度

设置盒子的宽度、高度一般发生在需要给链接设置背景图，背景图有指定宽高；
首先，链接是行盒，他是不能直接设置，那么就需要将其转换为块盒，方法有浮动、行块盒，设置后即可设置宽高；非常方便。

希望手动设定盒子位置

不论是行盒，还是块盒，都可通过相对定位的方式实现盒子位置的手动指定。

关于div包裹img、iframe等标签会多3px或4px的问题

当img所在盒子(块盒、行块盒、行盒)高度自动，图片底部和父元素底边之间往往会出现空白。
div标签直接包裹img或iframe等标签的时候，div不设置高度，子标签设置高度，此时div标签会被撑开，同时div的高度会比子标签多3px或4px，这是由于子标签底部多了几个px的空白(基线到底线的距离)，由于子标签是行内元素，display属性值为inline，类似于文本，需要把img或iframe标签设置为块级元素，即给img、iframe这些标签设置{display:block}，就不会出现几像素的空白。
解决方法：