站内搜索

第 8 章 嵌入元素

学习要点：

1.嵌入元素总汇

2.嵌入元素解析

主讲教师：李炎恢

本章主要探讨 HTML5 中嵌入元素，嵌入元素主要功能是把外部的一些资源插入到HTML 中。

一．嵌入元素总汇

这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等会在后面章节或季度讲解。

元素名称

说明

img

嵌入图片

map

定义客户端分区响应图

area

表示一个用户客户端分区响应图的区域

audio

表示一个音频资源

video

表示一个视频资源

iframe

嵌入一个文档

embed

用插件在 HTML 中嵌入内容

canvas

生成一个动态的图形画布

meter

嵌入数值在许可值范围背景中的图形表示

object

在 HTML 文档中嵌入内容

param

表示将通过 object 元素传递给插件的参数

progress

嵌入目标进展或任务完成情况的图形表示

source

表示媒体资源

svg

表示结构化矢量内容

track

表示媒体的附加轨道（例如字幕）

二．嵌入元素解析

1.嵌入图像

<img src="img.png">

解释：元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。

img 的私有属性

属性名称

说明

src

嵌入图像的 URL

alt

当图片不加载时显示的备用内容

width

定义图片的长度（单位是像素）

height

定义图片的高度（单位是像素）

ismap

创建服务器端分区响应图

usemap

关联元素

<a href="index.html"><img src="img.png" width="339" height="229" alt="风景图" ismap> a>

2.创建分区响应图

<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map"> <map name="Map"><area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"><area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圆形"><area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多边形">map>

解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver 进行操作生成的。

3.