html5嵌入内容_动力节点Java学院整理

在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/otherpage.html?10,4

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