Heim  >  Artikel  >  Web-Frontend  >  HTML-Frame-Tags: Frameset, Frame, Iframe, Noframes

HTML-Frame-Tags: Frameset, Frame, Iframe, Noframes

高洛峰
高洛峰Original
2017-02-13 15:19:522159Durchsuche

Im Allgemeinen kann in einem Browser-Dokumentfenster nur eine Webseitendatei angezeigt werden. Mithilfe von Frame-Tags kann ein Browser-Dokumentfenster jedoch in mehrere Unterfenster unterteilt werden und in jedem Unterfenster kann eine unabhängige Webseitendatei angezeigt werden -Fenster.
Frame ist eine Übersetzung aus dem Englischen „Frame“, was ein Unterfenster im Browser-Dokumentfenster darstellt. Jeder Frame kann eine HTML-Datei anzeigen und mehrere Frames bilden ein Frameset (Frameset). Die übliche Art und Weise, ein Frameset zu verwenden, besteht darin, eine Webseite in einem Frame zu platzieren. Diese Webseite enthält Hyperlink-Einträge, die auf mehrere andere Webseiten verweisen können. Nachdem der Besucher auf diese Hyperlink-Einträge geklickt hat, wird die Webseitendatei angezeigt, auf die der Hyperlink verweist kann in einem anderen angegebenen Rahmen angezeigt werden. Frames können verwendet werden, wenn mehr als eine Webseite in einem einzigen Anwendungsfenster angezeigt werden soll.


1. Frameset-Tag …

Ein in mehrere Frames unterteilter Fensterbereich wird Frameset genannt und das Frame-Fenster muss in In definiert werden Für ein Frameset werden die Tags verwendet, um zu definieren, wie viele Frames es im Frameset gibt und wie die einzelnen Frames angeordnet sind.
-Tags sind im Tag-Paar verschachtelt ;-Tags, da die Tags nur zum Teilen des Frame-Fensters verwendet werden und keine anderen Webseitenelemente anzeigen können. Das
-Tag verfügt über zwei wichtige Attribute, rows und cols. Bei Verwendung dieses Tags sollte mindestens eines dieser beiden Attribute ausgewählt werden, andernfalls zeigt der Browser nur den ersten definierten Frame an und die restlichen
Die Tags ;frameset> und spielen keine Rolle.

Das rows-Attribut wird verwendet, um die Anzahl der Zeilen von Rahmenfenstern im Hauptdokument und die Größe jedes Rahmenfensters anzugeben.

Das cols-Attribut wird verwendet, um die Anzahl der Spalten von Rahmenfenstern und die Größe jedes Rahmenfensters im Hauptdokument anzugeben.

Der Attributwert kann ein Prozentsatz oder ein absoluter Pixelwert sein. Oder eine Kombination aus Sternchen (*), die Anzahl der Werte gibt die Anzahl der Zeilen und Spalten an, (*) stellt diese nicht spezifizierten Leerzeichen dar. Wenn mehrere Sternchen (*) im selben Attribut erscheinen, dann Der verbleibende nicht spezifizierte Raum wird geteilt gleichmäßig, wobei jeder Wert durch Kommas getrennt ist.

Beispiel: Das bedeutet, dass drei Frames in Reihen angeordnet sind, wobei jeder Frame

1/ der gesamten Größe des Browserfensters 3 einnimmt des Raumes.

Das bedeutet, dass drei Frames in Spalten angeordnet sind. Der erste Frame nimmt 40 % des gesamten Browserfensters ein Der Raum wird gleichmäßig zwischen den Fenstern der anderen beiden Rahmen aufgeteilt.

Das bedeutet, dass es sechs Frames, zwei Zeilen und drei Spalten gibt

2. Das Frame-Tag


wird zwischen den Tags platziert Rahmenfenster. Das -Tag verfügt über zwei wichtige Attribute, das src-Attribut und das name-Attribut, denen beide Werte zugewiesen werden müssen. src gibt die URL-Adresse der ursprünglich im gesamten Frame-Fenster geladenen HTML-Datei an. Name gibt den Namen des Frame-Fensters an. a Das Zielattribut in href=""target=""> gibt den Frame an, in dem die verknüpfte HTML-Datei angezeigt wird. Wenn beispielsweise ein Frame-Name als „main“ definiert ist und der Zielattributwert des Hyperlink-Tags in einem anderen Frame-Fenster dem Namen dieses Frame-Fensters „main“ entspricht, wird beim Klicken auf den Hyperlink die HTML-Datei angezeigt, auf die er verweist werden im Hauptfenster angezeigt.

Darüber hinaus verfügt auch über die Bildlauf- und Noresize-Attribute, um anzugeben, ob Bildlaufleisten am Rand des Rahmenfensters angezeigt werden sollen Der Inhalt der Webseite ist größer als das Space-Fenster. Andernfalls wird er nicht angezeigt. Das Attribut „noresize“ kann direkt durch Hinzufügen eines Tags verwendet werden, ohne dass ein Wert zugewiesen werden muss. Es wird verwendet, um zu verhindern, dass Benutzer die Trennlinien zwischen Frames verwenden, um die Größe der Frames anzupassen.

3. Tags <p></p><noframes> Die Rahmenfunktion wird nicht unterstützt. Was Sie sehen, ist leer. Um diese Situation zu vermeiden, können Sie das Tag <noframes> verwenden. Wenn der von Ihnen verwendete Browser den Frame nicht sehen kann, wird der Inhalt zwischen <noframes> angezeigt Raum. . Bei diesen Inhalten kann es sich um Text handeln, der Sie beim Surfen daran erinnert, zu einem neuen Browser zu wechseln, oder auch um eine Webseite ohne Frames, oder es kann automatisch auf eine Version ohne Frames umgeschaltet werden. Zwischen diesem Tag-Paar sollten die Tags <body> und </body> <p></p> <p>4. Floating-Window-Tags <iframe>…</iframe></p> <p><iframe> Die Tags <iframe> müssen nicht zwischen den Tags </frameset> platziert werden In diesem Rahmenfenster können Sie eine weitere Datei anzeigen, sodass ein „Bild-in-Bild“-Effekt erzielt werden kann. Der in den Tag-Paaren <iframe> platzierte Text wird nur angezeigt, wenn der Browser das Tag <iframe> nicht unterstützt. Die Verwendung der Attribute des <iframe>-Tags ähnelt der des <frame>-Tags, daher werden wir sie hier nicht vorstellen. </p> <p>Weitere Artikel zu den HTML-Frame-Tags Frameset, Frame, Iframe und Noframes finden Sie auf der chinesischen PHP-Website! </p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="AngularJS-zeigt HTML-Elemente an" href="http://m.php.cn/de/faq/351835.html">AngularJS-zeigt HTML-Elemente an</a></span><span>Nächster Artikel:<a class="dBlack" title="AngularJS-zeigt HTML-Elemente an" href="http://m.php.cn/de/faq/351837.html">AngularJS-zeigt HTML-Elemente an</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>