HTML Images

HTML Images 

The <img> Tag and the Src Attribute

The <img> tag is empty, it contains  attributes only , and has  no closing tag.

该标签是空的，只包含属性。

The <img> tag has two required attributes: src and alt.

<img src="url" alt="some_text">

The URL points to the location where the image is stored. src的属性值URL指向图片所在位置

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages.The <img> tag creates a holding space for the referenced image.

 图片并不是技术性地被插入到一个HTML页面中，而是链接到其中。

<img> 标签为这个引用的图片创建一个放置的空间。

The Alt Attribute

Thealt attribute provides alternative information for an image if it cannot be displayed (because of slow connection, an error in the src attribute, or if the user uses a screen reader)

该属性为一个图片提供可替换的信息，如果用户因为某些原因无法看到它。（链接慢，src 属性出错，或者是用户在使用屏幕阅读器）

这个属性是required 的。A web page will not validate correctly without it.

Image Size - Height and Width

The height and width attributes are specified in pixels by default. 图片的宽高属性默认以pixel为单位。
可以在CSS文件里定义图片的尺寸，也可在图片html元素上设定宽高属性值。

Tip:  It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. 

在<img>上直接设定的宽高属性值，是个好的实践，因为如果设定了这些属性，当页面加载的时候，图片的所占空间就会被预留下来。

However, without these attributes, the page layout will change during loading (while the images load).

如不指定，图片加载时将改变页面布局。

注意: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so use images carefully.

如果一个HTML文件包含10张图，为了正确显示这个页面则需要11个文件。加载图片花时间，请小心地使用图片。

注意: The following attributes: align, border, hspace, longdesc, and vspace are not supported in HTML5.

Examples：

1. 图片浮于段落文字左侧。使用float

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="42" height="42"> A paragraph with an image. The image will float to the left of this text.
</p>

2.  To link an image to another document, simply  nest the <img> tag inside <a> tags .

给图片加一个超链接，只需将<img>元素内嵌到一个<a>元素中。此时，在IE9及之前版本的浏览器中，图片外围会显示一个边框，为去掉这个border，需设置style=“border:0;”

The <map> tag

Used to define a client-side image-map which is an image with clickable areas.

该标签用于定义一个客户端的图片地图（图片有一些支持点击的区域）

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

The  required name attribute  of the <map> element is associated with the <img>'s  usemap attribute 

该元素所需的 name 属性值和与之相关的图片的 usemap 属性值#号后面内容一致。

It contains a number of <area> elements. 它包含一系列定义了地图上可以点击的区域元素<area>。

Note: In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.

在 H5 中，如果要设定该标签的id属性，且必须和 name 属性值相同。

The <area> tag

The <area> element is always nested inside a <map> tag and hasno end tag. 

该标签总是内嵌在<map> 标签里，它没有闭合标签。