HTML基础_iframe与多媒体_交互标记

1.浮动框架标签

  <iframe width="300px" height="300px" src="HTMLDome01.html" name="ff"></iframe>
    属性
        width 宽度与 height 高度
        name与target配合使用 确定显示的位置

2.多媒体标记_视频标签

    <embed src="音频/视频/flash的链接" width="" height="">
    属性:
        width:宽度
        height:高度
        loop:是否循环播放,或者播放次数
        autostart:下载完成是否自动播放

3.,交互标记

<progress max="100" value="30"></progress>

例1

<!DOCTYPE html>
<html>
    <head>
        <meta>
        <title>列表</title>
    
    </head>
    <body>
        <img src="images/timg.gif" usemap="A#map">
        <map name="map">
            <area shape="circle" coords="129,161,500" href="HTMLDome01.html">
            <area shape="poly" coords="" href="#">
            <area shape="rect" coords="" href="#" target="ff">
        </map>
        <iframe width="300px" height="300px" src="HTMLDome01.html" name="ff"></iframe>
        <embed src="音频/视频/flash的链接" width="" height="">
            <br>
        <progress max="100" value="30"></progress>
    </body>
</html>

例2

<!-- 加载过程 -->
<!DOCTYPE html>
<html>
    <head>
        <meta>
        <title>交互</title>
    
    </head>
    <body>
        <progress max="100" value="30"></progress>
    </body>
    <script>
        setInterval(function(){
            var pro=document.getElementsByTagName("progress");
            
            if(pro[0].value==100){
                clearInterval(this);  
            }
            pro[0].value+=10;
        },1000)
    </script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_45460315/article/details/102503963