HTML5：嵌入内容

嵌入图像

在超链接里嵌入图片

<a href="链接地址" target="">    <img src="图片地址" title="" align=""></a>

创建客户端分区响应图

我们可以创建一个客户端分区响应图，通过点击某张图像上的不同区域让浏览器导航到不同的URL上。这一过程不需要通过服务器引导，因此需要使用元素来定义图像上的各个区域以及它们所代表的行为。客户端分区响应图的关键元素是‘map’。

map元素包含多个‘area’元素，它们各自代表了图像可被点击的一块区域。

1、area 元素常用属性：

• shape：指定热点响应区域形状，值为：rect、circle、poly以及default；

• coords：指定对应的shape值；

• hreflang：目标文档语言；

• title：相应区域标题；

• alt：与img的alt属性类似；

• target：打开连接的目标窗口；

注意：shape和coords属性标明用户可以点击的各个图像区域。shape和coords属性是共同起作用的。coords属性的意思根据shape属性的值而定。

下面代码演示了当shape值为‘rect’以及‘circle’时coords值得配置方法：

<!-- shape="rect"  矩形，参照方向为左和上，从左开始，顺时针赋值。 --><area shape="rect" coords="图像‘左’边缘与矩形‘左’侧距离，图像‘上’边缘与矩形‘上’侧距离，图像‘左’边缘与矩形‘右’侧距离，图像‘上’边缘与矩形‘下’侧距离" href="#"><!-- shape="circle"  圆形 --><area shape="circle" coords="从图像‘左’边缘到‘圆心’的距离，从图像‘上’边缘到圆心的距离，圆的半径" href="#">

代码示例：

<p>    <img src="map.jpeg" usemap="#mymap">    <map name="mymap">        <area shape="rect" coords="0, 0, 150, 117"  href="http://baike.baidu.com/item/%E9%AA%91%E8%A1%8C" alt="riding" title="骑行" target="_blank">        <area shape="rect" coords="150, 0, 300, 117" href="http://baike.baidu.com/item/%E6%B8%B8%E6%B3%B3/65394" alt="swiming" title="游泳" target="_blank">        <area shape="rect" coords="300, 0, 450, 117" href="http://baike.baidu.com/item/%E6%8B%B3%E5%87%BB/53858" alt="pugilism" title="拳击" target="_blank">    </map></p>

效果演示：

素材图片：

嵌入网页 iframe 内嵌框架

iframe 常用属性

• name：设置‘iframe’的名称；

• width：用于设置‘iframe’的宽度，值可以为像素（不用添加“px”单位）和百分数；

• height：用于设置‘iframe’的高度，值可以为像素（不用添加“px”单位）和百分数；

• src：用于设置‘iframe’元素内需要显示页面或文件的URL地址，该属性的值可以由与之关联的‘a’标签点击设置（通过将‘a’标签的“target”属性的值设置为该‘iframe’的“name”属性的值进行关联）。

• frameborder：是否显示边框，它只有两个值，‘0’表示不显示边框，‘1’表示要显示边框；

• marginwidth：用于设置‘iframe’内容的左侧和右侧的距离，值为像素（不用添加“px”单位），若‘iframe’内的页面设置有CSS的“margin”属性，则‘iframe’设置的“marginwidth”属性将无效。

• marginheight：用于设置‘iframe’内容的顶部和底部的距离，值为像素（不用添加“px”单位），若‘iframe’内的页面设置有CSS的“margin”属性，则‘iframe’设置的“marginheight”属性将无效。（不过通常也不建议设置“marginwidth”和“marginheight”这两个属性，因为基本上都会被‘iframe’所关联网页的CSS样式所覆盖，除非‘iframe’所关联的文件并非一个Web页面，而是文本文件、图片文件及其它多媒体文件等）

• scrolling：是否在‘iframe’中显示滚动条，有三个可用值：

  • auto：默认，根据内容自动出现或隐藏滚动条；
  • yes：始终显示滚动条；
  • no：始终隐藏滚动条；

代码示例

<nav>    <ul>        <li><a href="http://news.baidu.com/" target="_ifm">百度新闻</a></li>        <li><a href="http://www.qq.com/" target="_ifm">腾讯新闻</a></li>    </ul></nav><iframe src="" style="width:100%; height: 400px;" frameborder="1" scrolling="auto" name="_ifm"></iframe>

效果演示

通过插件嵌入内容

embed 元素

常用属性

• src：指定内容地址；

• type：指定内容的MIME类型；

• width/height：设置嵌入内容将在屏幕上占据的空间大小；

• allowfullscreen：启用全屏；

代码示例：

<embed src="宣传资料.mp4" type="video/mp4" width="560" height="390" ></embed>

object 元素

object元素实现的效果和embed元素一样，但它的工作方式稍有不同，并带有一些额外的功能。

常用属性：

• data：提供内容地址；

• type：指定内容的MIME类型；

• width/height：设置嵌入内容将在屏幕上占据的空间大小；

• allowfullscreen：启用全屏；

使用param元素来定义需要传递给插件的参数，每个需要定义的参数都各自使用一个param元素。

<object data="宣传资料.mp4" type="video/mp4" width="560" height="390">    <param name="alloFullScreen" value="true"></object>

如上代码所示，name和value属性定义了参数的name和value。

object元素的一大优点就是可以包含备用内容，在指定内容不可用时显示出来，类似于img的alt属性。

<object data="../Desktop/WebTeaching/上课班级/IOS elite class/代码/Lesson02/media/chuai【>>】.mp4" type="video/mp4" width="560" height="390">    <param name="alloFullScreen" value="true">    <!-- 备用内容 -->    <p><b>Soory!</b>We can't display this content!</p></object>

上面代码，我故意将data的值写错，运行之后将会显示备用内容作为提示。

【object元素嵌入图片】：

<object data="test.png" type="image/png"></object>

【object元素创建分区响应图】：

<p align="center" style="border: 1px solid gray; border-radius: 10px;">    <!-- <img src="map.jpg" usemap="#mymap"> -->    <object data="map.jpg" usemap="#mymap"></object>    <map name="mymap">        <area shape="rect" coords="0, 0, 150, 117"  href="http://baike.baidu.com/item/%E9%AA%91%E8%A1%8C" alt="riding" title="骑行" target="_blank">        <area shape="rect" coords="150, 0, 300, 117" href="http://baike.baidu.com/item/%E6%B8%B8%E6%B3%B3/65394" alt="swiming" title="游泳" target="_blank">        <area shape="rect" coords="300, 0, 450, 117" href="http://baike.baidu.com/item/%E6%8B%B3%E5%87%BB/53858" alt="pugilism" title="拳击" target="_blank">    </map></p>

注意：Chrome和Safari浏览器不支持这一功能；

嵌入视频和音频

嵌入视频使用‘video’元素，嵌入音频使用‘audio’元素，二者在使用上没有太大的区别，都需在内部嵌套‘source’元素配置音频或视频的链接地址以及MIME类型。

audio/video 元素常用属性：

• width/height：视频大小；

• autoplay：如果出现该属性，则音频在就绪后马上播放；

• controls：如果出现该属性，则向用户显示控件，比如播放按钮；

• loop：如果出现该属性，则每当音频结束时重新开始播放；

• muted：规定视频输出应该被静音；

• prelpad：如果出现该属性，则音频在页面加载时进行加载，并预备播放。若和“autoplay”同时使用，则该属性值会被忽略；

source 元素常用属性：

• src：规定媒体文件的URL地址；

• type：规定媒体资源的MIME类型（Multipurpose Internet Mail Extensions，它包含文本、图像、音频、视频以及其他应用程序专用的数据）；

• media：规定媒体资源的类型，如：“screen and (min-width:320px)”；

音频代码示例：

<audio controls="controls" preload>    <source src="../Material/media/cityOfSky.mp3" type="audio/mpeg">    <source src="../Material/media/cityOfSky.ogg" type="audio/ogg"></audio>

视频代码示例：

<video controls="controls" preload width="500" height="400">    <source src="../Material/media/scenery.mp4" type="video/mp4">    <source src="../Material/media/scenery.ogg" type="video/ogg"></video>

提示：在嵌入视频或音频时，为了各大浏览器支持，我使用‘ogg’，‘MP3’或‘MP4’格式的文件。