HTML框架 · 学并思Web应用程序

[TOC] >[info]帧窗口是一种页面技术，应用帧技术可以使得用户在同一个浏览器中，浏览不同的页面，并且各个页面之间相互联系，并且能够相互访问和进行操作。 ### 实现思路将浏览器的窗口按照不同的功能分割成多个小窗口，每个窗口对应自己的HTML页面，按照一定的方式组合起来，实现特殊的效果。 ### 应用场景网站后台操作界面,内容层级明确的页面 ### 缺点页面布局比较复杂，效率没有单页面高，对搜索引擎的友好程度不高 ## 一、 frameset * <frameset></frameset>不能和body共存。 * <frameset></frameset>表示框架开始，指定框架的个数以及边框等属性 * 属性：rows="" 、cols=""、值可以是百分比也是可以是具体的数字，也可以是* 进行等分 * frameborder="" ,0表示没有边框，1表示有边框 **例1** ~~~ <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> ~~~ **例2** ~~~ <frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> ~~~ ## 二、 iframe >[info]<iframe></iframe>用于在网页内显示网页,可以和body体共存，用法和类似，用于早期实现异步传输等视觉效果。 **实例** ~~~ <iframe class="HtmlEdit" width="100%" frameborder=0 height="100" scrolling="no" src="http://www.sina.com.cn" MARGINHEIGHT="1" MARGINWIDTH="1" name="testframename"> </iframe> <a href="http://www.sina.com.cn" target="testframename">点击指向其它框架</a> ~~~ <table class="dataintable"> <tbody> <tr> <th style="width:20%;"> 属性 </th> <th style="width:25%;"> 值 </th> <th style="width:55%;"> 描述 </th> </tr> <tr> <td> <a title="HTML <iframe> 标签的 align 属性"> align </a> </td> <td> <ul> <li> left </li> <li> right </li> <li> top </li> <li> middle </li> <li> bottom </li> </ul> </td> <td> <p> <span class="deprecated"> 不赞成使用。 </span> 请使用样式代替。 </p> <p> 规定如何根据周围的元素来对齐此框架。 </p> </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 frameborder 属性"> frameborder </a> </td> <td> <ul> <li> 1 </li> <li> 0 </li> </ul> </td> <td> 规定是否显示框架周围的边框。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 height 属性"> height </a> </td> <td> <ul> <li> <i> pixels </i> </li> <li> <i> % </i> </li> </ul> </td> <td> 规定 iframe 的高度。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 longdesc 属性"> longdesc </a> </td> <td> <i> URL </i> </td> <td> 规定一个页面，该页面包含了有关 iframe 的较长描述。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 marginheight 属性"> marginheight </a> </td> <td> <i> pixels </i> </td> <td> 定义 iframe 的顶部和底部的边距。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 marginwidth 属性"> marginwidth </a> </td> <td> <i> pixels </i> </td> <td> 定义 iframe 的左侧和右侧的边距。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 name 属性"> name </a> </td> <td> <i> frame_name </i> </td> <td> 规定 iframe 的名称。 </td> </tr> <tr> <td class="html5_new"> <a title="HTML <iframe> 标签的 sandbox 属性"> sandbox </a> </td> <td> <ul> <li> "" </li> <li> allow-forms </li> <li> allow-same-origin </li> <li> allow-scripts </li> <li> allow-top-navigation </li> </ul> </td> <td> 启用一系列对 <iframe> 中内容的额外限制。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 scrolling 属性"> scrolling </a> </td> <td> <ul> <li> yes </li> <li> no </li> <li> auto </li> </ul> </td> <td> 规定是否在 iframe 中显示滚动条。 </td> </tr> <tr> <td class="html5_new"> <a title="HTML <iframe> 标签的 seamless 属性"> seamless </a> </td> <td> seamless </td> <td> 规定 <iframe> 看上去像是包含文档的一部分。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 src 属性"> src </a> </td> <td> <i> URL </i> </td> <td> 规定在 iframe 中显示的文档的 URL。 </td> </tr> <tr> <td class="html5_new"> <a title="HTML <iframe> 标签的 srcdoc 属性"> srcdoc </a> </td> <td> <i> HTML_code </i> </td> <td> 规定在 <iframe> 中显示的页面的 HTML 内容。 </td> </tr> <tr> <td> <a title="HTML <iframe> 标签的 width 属性"> width </a> </td> <td> <ul> <li> <i> pixels </i> </li> <li> <i> % </i> </li> </ul> </td> <td> 定义 iframe 的宽度。 </td> </tr> </tbody> </table> >[danger]**作业：**通过结合css，写一个简易的后台模板。