第六十五，html嵌入元素

html嵌入元素

学习要点：

    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="401.png" alt="风景图" width="318" height="213" title="风景图">

效果：

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

属性名称                                 说明

src       嵌入图像的URL

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

title　　图片标题，鼠标放到图片上显示

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

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

ismap      创建服务器端分区响应图

usemap      关联元素

创建服务器端分区响应图

<a href="1.html">
    <img src="401.png" alt="风景图" width="318" height="213" title="风景图" ismap>
a>

分区响应图，就是鼠标在图片不同位置点击，就会将图片当前的区域参数发送到网址后面，如：http://localhost:63342/py/1.html?170,160

 

2.创建分区响应图，图片地图

<imgsrc="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.