2. Tech
  3. Framework in HTML

Framework in HTML

xiaoxiao2021-03-06  48

Framework can generate independent changes and scrolling windows, which can split a window into several word windows. Display an HTML document in each word window. Let's take a look at the cross link between the basic structure of the multi-document and the child window.

First, the basic structure HTML uses the , and tags to define the framework. Let's take a look at the role of these three labels and the corresponding properties.</p> <p>(1), <frameset> tag.</p> <p>This label is a frame design label and is used. The content between the first tail tag is the use of the HTML body part of the frame. The <body> tag cannot appear in the HTML document using the frame, otherwise it will cause the browser to ignore all the box definitions and only the content between <body> and </ body>.</p> <p>The <frameset> tag effect is to split the window into several self-windows, and the number of sub-windows depends on the bibliographic items nested in the "" Frame> tab in this tag. <Frameset> Tags have two properties. Rows and COLs are used to determine the height and width of the sub-window, the format is <frameset rows = "value 1, value 2, ... value n">; <frameest cols = "value 1, value 2, ... value n ">. Each parameter is divided by commas, and represents the height (width) of each self-window. The parameter values ​​of these two attributes can be numbers, percentages, or symbols "*". Let's explain it separately:</p> <p>(1) numbers. Represents the number of pixels occupied by the sub-window height (width).</p> <p>(2) percentage. Represents sub-window height (width) accounts for a percentage of the entire browser window height (width).</p> <p>(3) Symbol "*". When the symbol * only occurs once. That is, when the size of other sub-windows has a clear definition, it indicates that the size of the sub-window will be automatically adjusted according to the size of the browser window. When the symbol * occurs once, the remaining space is represented by the proportional split browser window. E.g:</p> <p><Frameset cols = "40%, 2 *, *"> indicates that the browser window is divided into 3 columns, the first sub-window is in the first column, the window width is 40% of the entire browser window width; the second sub-window In the second column, 2/3 of the remaining space of the browser window, that is, its width is 40% of the entire browser window width, the third child window accounts for 1/3 of the remaining space, the width is the entire browsing browser window width 20%.</p> <p>(2), <frame> label. HTML uses the <frame> tag to identify the sub-window. The <frame> tag is a separate tag that is nested in the Frame Set Tags <Frameset> tab. How many sub-windings are defined in <frameset>, how many <frame> tags are matched, and the nature of each window is defined. The <frame> tag has seven attributes, except that the SRC property is indispensable, other properties are optional.</p> <p>(1) SRC properties. The name used to define the sub-window.</p> <p>(2) .name properties. The name used to define the sub-window.</p> <p>(3) FrameBoder property. The value of this property is 1 or 0. When the parameter value is 1, there is no border when the sub-window has a border, and is 0. This attribute default is 1.</p> <p>(4) Bordercolor property. The border color used to specify the child window. If the border color of the sub-window is defined in more than one <frame> tag, the color is standard in the first specified color. When specifying the border color, you can use the color's RBG code or use the English word that you want to correspond to the color. The parameter value of the BorderColor property can be any of 16 colors. (5) SCLLING attribute. The parameter value of the property is one of YES, NO or AUTO. When the parameter value is YES, it indicates that the sub-window always has a scroll bar. It has never been scroll bar when NO. When the content of the document is exceeded for Auto, the browser automatically adds a scroll bar for the sub-window. The default value for the Scolling property is Auto.</p> <p>(6) MAGINWIDTH and MarginWidHt properties. These two attributes are used to specify a blank distance between display content and window boundaries. The MAGINWIDTH attribute is used to determine the distance between the display content and the left and right boundaries; MAGINWIDHT is used to determine the distance between the display content and the upper and lower boundaries. The parameter values ​​of these two attributes are numbers. The number of pixels occupied by the left and right margins, respectively.</p> <p>(3), <noframes> tags. Using this tab can not support the user's display when the user browser does not support the user's related information, so as not to feel inexplicable to the blank window picture. The <NOFRAMES> tag is used to use. The content between the first tail label will earn the information of the viewer. If you see a blank screen, your browsing does not support the frame display. While commonly used two browsers IE and NC are supported by supporting frameworks. But in order to strengthen the applicability of the document, we best develop a habit of using this label.</p> <p>(4) The basic structure.</p> <p>We will exemplify the basic structure of frame documentation in HTML:</p> <p><html></p> <p><HEAD></p> <p><title> Document Title </ Title></p> <p></ hEAD></p> <p><Frameset cols = "value 1, value 2, ..., value n> divide the browser window into N windows.</p> <p><Frame src = "1.html"></p> <p><frame src = "2.html"></p> <p>.</p> <p>.</p> <p>.</p> <p><Frame SRC = "N.html"></p> <p></ Frameset></p> <p><NOFRAMES> If you see a blank screen, your browser is not supported by </ NOFRAMES></p> <p></ html></p> <p>Among them, the <frameset> tag is a nested, that is, one or several sub-windows can be divided into several smaller windows. E.g:</p> <p><html></p> <p><Frameset cols = "30%, 90, *"></p> <p><frame src = "1.html" Name = Cont></p> <p><frame src = "caipage.gif"></p> <p><frame src = "2.html"></p> <p></ frameset></p> <p><frame src = "f2.html" Name = another marginheight = 120></p> <p></ frameset></p> <p><NOFRAMES> Your browser does not support framework </ NOFRAMES></p> <p></ html></p> <p>Second, the intersection of the target window.</p> <p>In order to facilitate the user to search and browse, we often use the index directory of a series of anchors to display in a sub-window, and placed the content points to the anchor in another sub-window. The sub-window that displays the anchor is usually become a "source window" and the window of the target document is called "Target Window". When cross-connection, we must define the name of the target window with the Name property of the <frame> tag, and then modify the document displayed in the source window. Add a statement Target = "Target Window Name" to specify the display location of the target document in all <a> tags. E.g:</p> <p><html></p> <p><HEAD></p> <p><Title> Target Window Test Page </ Title></p> <p></ hEAD></p> <p><frameset cols = "30%, 90, *"></p> <p><frame src = 'f1.html "MarginHeight = 60></p> <p><Frameset Rows = "120, *"></p> <p><frame src = "caipage.gif"></p> <p><frame src = "2.html"></p> <p></ frameset></p> <p><frame src = "f2.html" Name = another marginheight = 60></p> <p></ frameset></p> <p><NOFRAMES> Your browser does not support frame structure </ noframes></p> <p>Where the first sub-window is the source window. We define a series of anchors in the corresponding document F1.html of the source window, which is as follows:</p> <p><html></p> <p><body></p> <p><< Center> (Description: Document main content weight loss display</p> <p><P> <a href=" Total garden wind .jpg"target="another"> idyllic scenery </a> <p></p> <p><a href="qiu.jpg"target="another"> golden autumn </a> <p></p> <p><a href="tong.html"target="another"> fishermen sing late </a> <p></p> <p><a href="pig.gif"target="another"> sunset unlimited </a> <p></p> <p></ body></p> <p></ html></p> <p>When the user clicks on the anchor "idyllic scenery", the browser will display anchor connection object in the target document.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-57537.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="57537" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.032</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '78lJH87YGckoAUAzaMPh50k3bZeJR_2Bx1bGLrs9r3LJMyiaF6NUja9ezFSuH8KiBK9ZmAJjVtgl_2BxM_2BXwsCR_2FsA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>