HTML基础篇(3)——Map,iframe,img

作者:ITattoo

 多媒体

  1. 图片标签:img;常用来连接图片,但是还是有一些很少使用的方法;例如:插入视频剪辑(一部分);IE8以下才能识别
    <img src="loading.gif" dynsrc="chapter.avi" loop="2" start="mouseover"/>

    属性:src为gif图像;作为视频的封面(当avi文件未完全读取时);dynsrc为插入的视频;loop表示播放次数;start表示什么时候开始播放(fileopen/mouseover);loopdelay表示延迟多少秒;control播放的控制条

  2. 图片映射标签: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.

  3. 多媒体标签: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">
  4. 插入多媒体标签: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>
  5. 声音标签:bgsound(这个是一个很少用的标签,IE低版本识别)
    <bgsound src="ccnn.wmv" loop="2"/>
  6. 滚动文字标签: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

框架

在HTML4中

  1. 主页面(不能有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>
  2. 右框架;文件名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>
  3. 左框架;文件名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>
  4. 次页面;文件名 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>

在HTML5中

  • 一般使用iframe;可以直接放在HTML页面的任何位置,并设置其宽高
    <iframe src="html_left.html" width="100%"height="30%"frameborder="1" scrolling="yes"></iframe>