HTML基础篇（3）——Map,iframe,img

143144次阅读

共计 4270 个字符，预计需要花费 11 分钟才能阅读完成。

作者：ITattoo

图片标签：img;常用来连接图片，但是还是有一些很少使用的方法；例如：插入视频剪辑（一部分）;IE8以下才能识别
```
<img src="loading.gif" dynsrc="chapter.avi" loop="2" start="mouseover"/>
```
属性：src为gif图像；作为视频的封面（当avi文件未完全读取时）；dynsrc为插入的视频;loop表示播放次数；start表示什么时候开始播放（fileopen/mouseover）;loopdelay表示延迟多少秒；control播放的控制条
图片映射标签：map。map属性name的值对应 <==> img的usemap属性的值（一定要有#号）
```
<img src="img.png" usemap="#MapName"/>
<map name="MapName">
    <area shape="circle" coords="Ox,Oy,r"href="a.html"target="_blank">
    <area shape="rect" coords="Ax,Ay,Dx,Dy"href="b.html"target="_blank">
    <area shape="poly" coords="Ax,Ay,Bx,By,Cx,Cy,..."href="c.html"target="_blank">
</map>
```
circle表示圆，coords的值表示圆心和半径；rect表示矩形，coords的值表示对角点的坐标；poly表示多边形，coords的值表示多边形顶点坐标。

See the Pen NGGvzz by iTattoo (@ZhouYanlang) on CodePen.

多媒体标签：embed；定义了一个容器，用来嵌入外部应用或者互动程序（插件）.解决embed标签显示在div上层，在embed里加入 wmode=”transparent”即可解决此问题.

<embed src="#.swf" name="swfPlayer" autostart="true"
       allowscriptaccess="sameDomain" swliveconnect="true" 
       quality="high"pluginspage="#" type="application/x-shockwave-flash"
       height="650" width="650">

插入多媒体标签：object。

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。object标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

(1)添加一个Flash文件

<object type="application/x-shockwave-flash"data="flash文件路径"id=""class=""width="500"height="500">
    <param name="movie" value="flash文件路径">
    <param name="allowScriptAcess" value="sameDomain">
    <param name="quality" value="best">
    <param name="bgcolor" value="#ffffff">
    <param name="scale" value="noScale">
    <param name="salign" value="TL">
    <param name="FalshVars" value="playerMode=embedded">
</object>

(2)添加一个视频文件（IE有控制器，其他没有）

<object type="video/x-ms-wmv"data="wmv文件路径" id="#2" class=""width="500"height="500">
    <param name="src" value="wmv文件路径">
    <param name="autostart" value="true">
    <param name="controller" value="true">>
</object>

常常实战中object会结合embed一起使用

<object id="#"class="#" codebase="#" height="650" width="650">
    <param name="movie" value="#.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="autoplay" value="true">
    <embed src="#.swf" name="swfPlayer" autostart="true"
           allowscriptaccess="sameDomain" swliveconnect="true"
           quality="high"pluginspage="#" type="application/x-shockwave-flash"
           height="650" width="650">
</object>

声音标签：bgsound(这个是一个很少用的标签，IE低版本识别)
```
<bgsound src="ccnn.wmv" loop="2"/>
```
滚动文字标签：marquee
```
<marquee behavior="scroll" direction="left"scrollamount="3"loop="-1"scrollderlay="5">来回滚动</marquee>
```
behavior=”scroll/slide/altermate” 滚动方式：循环/一次/来回。direction=”left/right/up/down” 滚动方向。scrollamount=”3″ 滚动速度。scrollderlay=”5″ 停顿时间。algin=top/middle/botton

主页面（不能有bofy）；文件名all.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" contect="text/html";charset=UTF-8">
</head>
<frameset cols="30%,70%">
    <frame name="aRight" style="background: gainsboro" src="html_right.html" noresize frameborder="0">
    <frame name="aLeft" style="background: grey" src="html_left.html" frameborder="0">
</frameset>
</html>

右框架；文件名html_right.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" contect="text/html";charset=UTF-8">
</head>
<body >
<a href="zjl.html" target="aLeft">周杰伦的歌</a>
<a href="ljj.html" target="aLeft">林俊杰的歌</a>
</body>
</html>

左框架；文件名html_left.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" contect="text/html";charset=utf-8">
</head>
<body>
歌曲大全
</body>
</html>

次页面；文件名 zjl.html 和 ljj.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" contect="text/html";charset=UTF-8">
</head>
<body>
<h1>周杰伦歌曲</h1>
<a href="#">东风破</a>
<a href="#">七里香</a>
<a href="#">不能说的秘密</a>
<a href="#">黑色毛衣</a>
<a href="#">双节棍</a>
<a href="#">菊花台</a>
<a href="#">夜曲</a>
</body>
</html>

一般使用iframe；可以直接放在HTML页面的任何位置,并设置其宽高

<iframe src="html_left.html" width="100%"height="30%"frameborder="1" scrolling="yes"></iframe>

正文完

发表至： Html

2015-09-11

0

转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。

【转载】前端开发工程化–基础篇

HTML基础篇（2）——tabke,form

TaobaoUED博客笔记（1）

Shadow DOM 综述

HTML基础篇（2）——tabke,form

HTML基础篇（3）——Map,iframe,img

多媒体

框架

在HTML4中

在HTML5中

日期