🌈 搜索
📅 最后修改于: 2020-11-04 00:53:26 🧑 作者: Mango
的HTML标签定义HTML文件中可以显示另一个HTML网页的特定区域。
一种标签用于
注意：请勿使用HTML标签，因为HTML5不支持该标签，您可以使用要么<div>CSS可以在HTML中实现类似的效果。</strong></p> <h4>句法</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;">< frame src = "URL" > </span></code></pre> </div> <p>以下是有关HTML的一些规范<frame>标签</p> <table style="width: 100%; border-collapse: collapse; border-color: #b0b7d6; border-style: dotted; background-color: #f2eded;"> <tbody> <tr> <td><strong>Display</strong></td> <td><strong>Block</strong></td> </tr> <tr> <td><strong>Start tag/End tag</strong></td> <td>Start tag(required), End tag(forbidden)</td> </tr> <tr> <td><strong>Usage</strong></td> <td>Frames</td> </tr> </tbody> </table> <h4>例子1</h4> <h4>创建垂直框架：</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <title>Frame tag</title> </head> <frameset cols="25%,50%,25%"> <frame src="frame1.html" > <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </html> </span></code></pre> </div> <p>输出：</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/html/html-frame-tag.png"/></p> <p>Frame1.html</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <style> div{ background-color: #7fffd4; height: 500px; } </style> </head> <body> <div> <h2>This is first frame</h2> </div> </body> </html> </span></code></pre> </div> <p>Frame2.html</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <style> div{ background-color: #2f4f4f; height: 500px; } </style> </head> <body> <div> <h2>This is Second frame</h2> </div> </body> </html> </span></code></pre> </div> <p>Frame3.html</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <style> div{ background-color: #c1ffc1; height: 500px; } </style> </head> <body> <div> <h2>This is Third frame</h2> </div> </body> </html> </span></code></pre> </div> <h4>范例2：</h4> <h4>创建水平框架：</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <title>Frame tag</title> </head> <frameset rows="30%, 40%, 30%"> <frame name="top" src="frame1.html" > <frame name="main" src="frame2.html"> <frame name="bottom" src="frame3.html"> </frameset> </html> </span></code></pre> </div> <p>输出：</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/html/html-frame-tag2.png"/></p> <h4>属性</h4> <h4>特定于标签的属性</h4> <table style="width: 100%; border-collapse: collapse; border-color: #b0b7d6; border-style: dotted; background-color: #f2eded;"> <tbody> <tr> <th>Attribute</th> <th>Value</th> <th>Description</th> </tr> <tr> <td>frameborder</td> <td>0<br/> 1</td> <td>It specifies whether to display a border around the frame or not, and its default value is 1</td> </tr> <tr> <td>longdsec</td> <td>URL</td> <td>It specifies a page which contains the long description of the content of the frame.</td> </tr> <tr> <td>marginheight</td> <td>pixels</td> <td>It specifies the top and bottom margins of the frame.</td> </tr> <tr> <td>marginwidth</td> <td>pixels</td> <td>It defines the height of the margin between frames.</td> </tr> <tr> <td>name</td> <td>text</td> <td>It is used to assign the name to the frame.</td> </tr> <tr> <td>noresize</td> <td>noresize</td> <td>It is used to prevent resizing of the frame by the user.</td> </tr> <tr> <td>scrolling</td> <td>yes<br/> no<br/> auto</td> <td>It specifies the existence of the scrollbar for overflowing content.</td> </tr> <tr> <td>src</td> <td>URL</td> <td>It specifies the URL of the document which we want to display in a frame.</td> </tr> </tbody> </table> <h4>支持的浏览器</h4> <table style="width: 100%; border-collapse: collapse; border-color: #b0b7d6; border-style: dotted; background-color: #f2eded;"> <tbody> <tr> <td><strong>Element</strong></td> <td><img alt="chrome browser" class="img-fluid" src="https://static.javatpoint.com/htmlpages/images/chrome_browser.png"/> Chrome</td> <td><img alt="ie browser" class="img-fluid" src="https://static.javatpoint.com/htmlpages/images/ie_browser.png"/> IE</td> <td><img alt="firefox browser" class="img-fluid" src="https://static.javatpoint.com/htmlpages/images/firefox_browser.png"/> Firefox</td> <td><img alt="opera browser" class="img-fluid" src="https://static.javatpoint.com/htmlpages/images/opera_browser.png"/> Opera</td> <td><img alt="safari browser" class="img-fluid" src="https://static.javatpoint.com/htmlpages/images/safari_browser.png"/> Safari</td> </tr> <tr> <td><strong><frame></strong></td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>