嵌入图像
在超链接里嵌入图片
<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’格式的文件。