【html学习笔记19】- Iframe

作者: 兔小小 | 来源:发表于2023-09-01 23:32 被阅读0次

HTML的入门学习（二）
和<a>标签——html学习笔记2</a></li><li><a href="#r3">iframe和html交互</a></li><li><a href="#r4">iframe 父子互调函数</a></li><li><a href="#r5">HTML Iframe</a></li><li><a href="#r6">HTML5学习笔记之表格标签</a></li><li><a href="#r7">HTML5学习笔记之表单标签</a></li><li><a href="#r8">HTML5学习笔记之基础标签</a></li><li><a href="#r9">HTML5学习笔记之音视频标签</a></li><li><a href="#r10">iframe和a标签</a></li></ol></div> <p>HTML iframe 用于在网页中显示网页。</p> <h1>HTML Iframe 语法</h1> <p>HTML <code><iframe></code>标记指定一个内联框架。内联框架用于在当前 HTML 文档中嵌入另一个文档。</p> <pre><code class="html"><iframe src="url" title="description"></iframe> </code></pre> <p><code>title</code>最好始终包含<code><iframe></code>的属性, 屏幕阅读器使用它来读出的内容。</p> <h1>Iframe - 设置高度和宽度</h1> <p>使用<code>height</code>和<code>width</code>属性指定内嵌框架的大小。默认情况下，高度和宽度以像素为单位指定：</p> <pre><code class="html"><iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> </code></pre> <img src="https://img.haomeiwen.com/i21922576/a34683b808709db5.png"> <p>可以添加<code>style</code>属性并使用 CSS 属性<code>height</code>和<code>width</code></p> <pre><code class="html"><iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> </code></pre> <img src="https://img.haomeiwen.com/i21922576/d9fdacb101fc3972.png"> <h1>Iframe - 删除边框</h1> <p>默认情况下，iframe 周围有边框。若要删除边框，请添加<code>style</code>属性并使用 CSS 属性<code>border</code>：</p> <pre><code class="html"><iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> </code></pre> <img src="https://img.haomeiwen.com/i21922576/8faea32145ddc307.png"> <p>使用 CSS，您还可以更改 <code>iframe</code> 边框的大小、样式和颜色：</p> <pre><code class="html"><iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe> </code></pre> <img src="https://img.haomeiwen.com/i21922576/ad2c80fc26a2d9e5.png"> <h1>Iframe - 链接的目标</h1> <p><code>iframe</code> 可用作链接的目标框架。属性<code>target</code>的链接必须引用<code>name</code>的属性：</p> <pre><code class="html"><iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> </code></pre> <img src="https://img.haomeiwen.com/i21922576/64e17c357f44479b.png"> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/drashxtx.html"><img src="https://img.haomeiwen.com/is14376033/d6a0631bdd915149.png" width="80"></a><h3><a href="/subject/dkslzftx.html">HTML的入门学习（二）</a></h3><p>本篇文章主要记录的是自己学习的HTML 常用的标签。 1、iframe 标签——嵌套页面 iframe这个标签目前...</p></li><li id="r2"><a href="/user/uvwzlttx.html"><img src="https://img.haomeiwen.com/us3652208/608903ea-1122-466c-9893-6b0ea599d9b5.jpg" width="80"></a><h3><a href="/subject/rwrpgftx.html"><iframe>和<a>标签——html学习笔记2</a></h3><p><iframe> 用于在网页中嵌套页面。常用属性： frameborder：规定是否显示 iframe 周围的边...</p></li><li id="r3"><h3><a href="/subject/ednbfdtx.html">iframe和html交互</a></h3><p>iframe传递事件给html html传递事件给iframe 刷新浏览器窗口方式</p></li><li id="r4"><h3><a href="/subject/ffghqltx.html">iframe 父子互调函数</a></h3><p>纯html中：父html调用子iframe内方法：子Iframe中调用父html中方法： VUE中：父htm...</p></li><li id="r5"><h3><a href="/subject/onnijxtx.html">HTML Iframe</a></h3><p>2017-09-07摘抄自W3school-HTML Iframe希望帮助自己系统地打好基础，也能在做笔记的同时添...</p></li><li id="r6"><a href="/user/dsutdttx.html"><img src="https://img.haomeiwen.com/is647982/151e7c132c68a833.png" width="80"></a><h3><a href="/subject/mhuuqxtx.html">HTML5学习笔记之表格标签</a></h3><p>HTML5学习笔记之表格标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...</p></li><li id="r7"><a href="/user/dsutdttx.html"><img src="https://img.haomeiwen.com/is647982/9f6f2cfcfdf04c42.png" width="80"></a><h3><a href="/subject/qluuqxtx.html">HTML5学习笔记之表单标签</a></h3><p>HTML5学习笔记之表单标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...</p></li><li id="r8"><a href="/user/dsutdttx.html"><img src="https://img.haomeiwen.com/is4122543/3e921651c9eb3c47.png" width="80"></a><h3><a href="/subject/ybseqxtx.html">HTML5学习笔记之基础标签</a></h3><p>HTML5学习笔记之基础标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...</p></li><li id="r9"><a href="/user/dsutdttx.html"><img src="https://img.haomeiwen.com/is647982/0d0c0be17835a633.png" width="80"></a><h3><a href="/subject/fmvuqxtx.html">HTML5学习笔记之音视频标签</a></h3><p>HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...</p></li><li id="r10"><a href="/user/bshuvttx.html"><img src="https://img.haomeiwen.com/is8018340/68fea0326afeefa3.png" width="80"></a><h3><a href="/subject/pramkqtx.html">iframe和a标签</a></h3><p>iframe 嵌套页面 iframe的src可以是网址也可以是自己写的html文件，iframe的name和a标签...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">【html学习笔记19】- Iframe</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/pjqxvdtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/ydqxvdtx.html">想弹一首曲子</a></li><li><a class="meiwen" href="/subject/edqxvdtx.html">人生海海</a></li><li><a class="meiwen" href="/subject/jdqxvdtx.html">2023-09-02</a></li><li><a class="meiwen" href="/subject/rdqxvdtx.html">跨越时空的爱恋</a></li><li><a class="meiwen" href="/subject/kdqxvdtx.html">生活之悟125/1000</a></li><li><a class="meiwen" href="/subject/cdqxvdtx.html">秋老虎</a></li><li><a class="meiwen" href="/subject/orqxvdtx.html">好好日更吧</a></li><li><a class="meiwen" href="/subject/grqxvdtx.html">2023-09-02</a></li><li><a class="meiwen" href="/subject/irqxvdtx.html">余生，做自己的“小太阳”，温暖自己</a></li><li><a class="meiwen" href="/subject/brqxvdtx.html">深夜｜周末的样子</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/pjqxvdtx.html">【html学习笔记19】- Iframe</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>