iframe标签使用的一点小结.md

1.what is iframe ?

功能:iframe标签用于定义内联框架。

语法:

内联框架是在一个页面中嵌入另一个页面。

有很多网页看上去是一个网页,但实际上它其中可能镶嵌有其它网页,标签就可以把其它网页无缝地嵌入在一个页面中。

主要用于那些多个网页的共有部分,如导航栏、广告栏等。

HTML与XHTML之间的差异:无。

2.iframe 的一些属性
在这里插入图片描述

3.我的小demo,有需要的可以复制粘贴下,嘿嘿嘿

<style>
    #divide {
        height:100px;background-color: aqua;
    }
    #one,#two {
        cursor:pointer;
    }

</style>

<button id="one" style="background-color: red;float: left;">show one</button>
<button id="two" style="background-color: pink;float: right;">show two</button>

<div id="divide" style="display:block;clear: both;" ></div>
<div style="display:block;">
    <iframe align="left" id="remark-two" scrolling="no" src="http://fanyi.youdao.com/" frameborder="0"  width="100%" height="100%" >
    </iframe>
</div>

<div style="margin-left:40%;">
    <iframe id="remark-one" align="left" scrolling="no" src="https://tianqiapi.com/api.php?style=ya&skin=pitaya" frameborder="0" width="30%" height="30%" allowtransparency="true"></iframe>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>

    $('#remark-one').show();
    $('#remark-one').hide();
    $('#one').on('click',function(){
        $('#remark-one').show();
        $('#remark-two').hide();
    })

    $('#two').on('click',function(){
        $('#remark-two').show();
        $('#remark-one').hide();
    })
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值