HTML 图像

在 HTML 中，图像是由

当 src 属性指定了一张不存在的图片后，属性 alt 的自定义值的作用就显现出来了：

如果图片 url 设置有问题或其他原因导致浏览器加载图片时出错，同时 html 代码中没有设置 alt 的值的话，那么浏览器会展示一张小的破碎的图片。

height（高度） 与 width（宽度）属性可用于设置图像的高度与宽度。属性值默认单位为像素。指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏 HTML 页面的整体布局。

因为修改了图片的像素，导致图片的高度和宽度失去了原有尺寸的比例，所以展示与原图有比例上的不同。

还可以使用 align 属性来设置图片与文字的对齐方式。

设置图片与文字向下对齐，即默认对齐方式：align=”bottom”

这个向下对齐可理解为图片的下沿与文字的下沿处于同一水平线上。

设置图片与文字居中对齐，即 align=”center”

居中对齐即图片的中线与文字的中线位于同一水平线上。

设置图片与文字向上对齐，即 align=”top”

向上对齐即图片的上沿与文字的上沿位于同一水平线上。

图片和文字在垂直方向上的对齐可以使用 align 属性来设置，除此之外，也可以使用 属性来设置图片与文本在水平方向上的关系，即图片应该位于文字的左边还是应该位于文字的右边。

也可在图片上设置链接，供跳转使用。

我们在 50 * 50 的图片上设置了一个链接，以打开新窗口的方式跳转到下一个页面，在下一个页面上展示该图片的原始尺寸。

设置了链接的图片在浏览器中把鼠标放上去之后，箭头鼠标会变成手指鼠标。

上面这个示例是在 50 * 50 的图片上设置了一个链接，也就是说只要鼠标点击的区域在这 50 * 50 的范围内，那就可以成功跳转到下一个页面，这也是图片链接跳转时的默认设置，即全区域的点击跳转。其实还可以在图片上设置可支持点击跳转的区域，比如可以设置为圆形、矩形或多边形。这种操作可以通过 map 属性完成，称为创建图片映射。

map 中可包含多个 area 标签，这样的话也就等于支持一张图片通过指定的不同区域跳转到不同的页面的功能。area 标签中 shape 属性表示指定的区域的形状，circle 为圆形，rect 为矩形，poly 为多边形。coords 为指定形状的区域坐标，单位也是像素。不同形状的坐标指定规则为：

涉及到的所有代码为：

图片展示
设置图片的尺寸
设置图片与文字的对齐方式为默认默认方式即向下对齐
设置图片与文字的对齐方式为居中对齐
设置图片与文字的对齐方式为向上对齐
设置图片浮动在文字的左边
设置图片浮动在文字的右边
在图片上创建链接:
创建图片圆形映射
创建图片矩形映射
创建图片多边形映射

本文参考自：HTML 图像 | 菜鸟教程