在HTML文档中嵌入内容，可以使你的页面更加丰富。

嵌入图像

使用img元素可以在HTML文档里嵌入图像，该元素包含如下属性：

1）src：显示图像的URL；

2）alt：图像的替代文本；

3）height：图像的高度；

4）width：图像的宽度；

5）usemap：将图像定义为客户端图像映射；

6）ismap：将图像定义为服务端图像映射。

下面具体介绍对图像的操作。

嵌入图像

使用src和alt属性就可以嵌入一张图像。

src定义了图像的URL，alt属性定义了当图像无法显示时，浏览器将显示的替代文本。图像无法显示可能有以下原因：

1）网速太慢；

2）src属性中的错误；

3）浏览器禁用图像；

4）用户使用的是屏幕阅读器。

强烈推荐在每个图像中都使用该属性，这样当图像无法显示时，用户还是可以看到关于图像的一些信息，而对于残疾人来说，alt属性是他们了解图像内容的唯一方式。

alt属性的最大长度是1024个字符，包括空格和标点，可以包含对特殊字符的实体引用，但不允许任何形式的标签。

alt文本的使用原则：

1）如果图像包含信息，使用alt描述图像；

2）如果图像在a元素中，使用alt描述目标链接；

3）如果图像仅供装饰，使用alt=""。

图像在HTML标记处理完毕后才会加载，浏览器通常不知道该给图像预留多大的空间，这样就导致加载图像后，浏览器需要重定位屏幕上的内容来容纳它，导致屏幕的晃动。可以指定图像的width和height属性来解决该问题，但注意width和height属性应该仅用来告诉浏览器图像的尺寸，而不应该用来动态缩放图像。

在超链接中嵌入图像

结合a元素，img元素可以生成一个基于图像的超链接。

这样当点击该图像后，浏览器会导航至父元素a的href属性所指定的URL上。给img元素应用ismap属性就创建了一个服务器端分区响应图：

这样，图像的点击的位置会附加到URL上，例如，如果点击的位置是距图像顶部4像素，左边10像素，则浏览器将导航到一下URL：

http://bjpowernode/listings/https://www.jb51.net/html5/otherpage.html?10,4

服务端分区响应图通常意味着服务器会根据用户在图像上点击区域的不同做出有差别的反应。

客户端分区响应图

客户端分区响应图支持用户通过点击某张图的不同区域让浏览器导航到不同的URL上，我们需要使用元素来定义图像上的各个区域以及他们所代表的行为，需要用到的元素包括map元素和area元素。

map元素

map元素的作用是定义一个客户端图像映射，map元素中包含一个或者area元素，他们各自代表了图像上可被点击的一块区域。map元素通常包含属性：

1）id：必须，为map标签定义唯一的标识；

2）name：可选，名称。

area元素

area元素定义图像映射中的区域，该元素总是嵌套在map元素中。area元素的属性分为两类，第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL：

1）href：此区域被点击后浏览器应该加载的URL；

2）alt：替代内容，同img元素的对应属性；

3）target：显示URL的浏览上下文，同base元素的对应属性；

4）rel：描述当前文档和目标文档的关系，同link元素的对应属性；

5）media：媒介，同style元素的对应属性；

6）hreflang：目标文档的语言；

7）type：目标文档的MIME类型。

第二类包含了属性：shape和coords属性，用来标明用户可以点击的各个图像区域。shape属性的取值如下：

1）rect：代表了一个矩形区域。对应的coords属性必须由四个用逗号分隔的整数组成(a,b,c,d)：a代表图像的左边缘与矩形的左侧；b代表图像的上边缘与矩形的上侧；c代表图像的右边与矩形的右侧；d代表图像的下边缘与矩形的下侧；

2）circle：代表了一个圆形区域。coords属性必须由三个用逗号分隔的整数组成(a,b,c)：a代表从图像左边缘到圆心的距离；b代表从图像上边缘到圆心的距离；c代表圆的半径；

3）poly：代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点；

4）default：默认区域，即覆盖整张图片。不需要提供coords值。

下面是一个例子：

上面的脚本定义了用户如果点击图片的游泳部分，浏览器导航至swimpage.html，如果用户点击图像上的骑车部分，浏览器则会导航至cyclepage.html，点击其它部分则导航至https://www.jb51.net/html5/otherpage.html。

嵌入HTML文档

iframe元素可以在现有的HTML文档中嵌入另一张文档。该元素支持的属性如下：

1）src：在iframe中显示的文档的URL；

2）srcdoc：规定在iframe中显示的页面的HTML内容；

3）name：规定iframe的名称，可以在浏览上下文与其他元素（如a、form、button、input和base）的target属性中使用该名称；

4）width：定义iframe的宽度；

5）height：规定iframe的高度；

6）sandbox：对iframe中的内容的额外限制，支持的值包括：

---""：应用以下所有的限制；

---allow-same-orgin：允许iframe内容被视为与文档其余部分拥有同一个来源；

---allow-top-navigation：允许链接指向顶层的浏览上下文，这样就能用另一个文档替换当前整个文档，或者创建新的标签和窗口； ---allow-top-scripts：启用脚本； ---allow-forms：启用表单。

7）seamless：指示浏览器把iframe的内容显示得像主HTML文档的一个整体组成部分；默认情况下iframe的内容会有一个边框，如果内容比width和height属性所指定的尺寸要大，还会出现一个滚动条。该属性的使用方式如下（该属性大部分浏览器还不支持）：

下面是iframe的一个完整例子：

  
    
Things I like