[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,寫一個簡易的后臺模板。
- 序言
- 第一章:準備工作
- 寫在學習之前的話
- web應用開發結構
- 開發工具/環境
- 第二章:展現層面(HTML/CSS)
- HTML簡介
- HTML基礎
- HTML編碼
- HTML鏈接
- HTML圖像
- HTML列表
- HTML表單
- HTML表格(分水嶺)
- HTML 實體
- HTML框架
- CSS層疊樣式表
- CSS選擇器
- CSS文本/字體
- CSS繼承和疊加
- CSS框模型
- CSS浮動(分水嶺)
- CSS定位
- CSS背景
- CSS圖標字體
- CSS補充
- 開發技巧
- 第三章:展現層面(Javascript)
- JS簡介
- JS實現
- JS輸出交互
- JS變量
- JS數據類型
- JS運算符
- JS流程控制(分水嶺)
- JS函數
- JS數組
- JS對象(分水嶺)
- JS數組對象
- JS字符串對象
- JS數學對象
- JS日期對象
- JS BOM對象(分水嶺)
- JS DOM對象
- JS事件對象
- JS元素對象
- JS DOM節點
- 第四章:展現層面(Jquery)
- JQ簡介
- JQ使用
- JQ選擇器
- JQ篩選
- JQ屬性
- JQ-CSS
- JQ事件
- JQ文檔處理
- JQ效果
- JQ-ajax
- 第五章:邏輯/業務層面(PHP)
- PHP簡介
- PHP變量
- PHP數據類型
- PHP常量
- PHP運算符
- PHP流程控制
- PHP函數(分水嶺)
- PHP日期
- PHP數學
- PHP數組
- PHP字符串
- PHP正則表達式(分水嶺)
- PHP目錄操作
- PHP文件
- PHP上傳/下載
- PHP面向對象(分水嶺)
- PHP圖像處理
- PHP會話控制
- Ajax異步處理
- PHPMysql擴展
- PHPMysqli擴展
- PHPPdo擴展
- PHP接口
- PHP命名空間
- 第六章:邏輯/業務層面(框架設計)
- 第七章:存儲層面(mysql)
- Mysql基礎
- Mysql Sql簡介
- Mysql數據庫
- Mysql數據類型
- Mysql數據表
- Mysql操作記錄
- Mysql查詢
- Mysql修改表結構
- Mysql日期與時間
- Mysql分組統計
- Mysql多表查詢
- Mysql安全
- Mysql存儲引擎
- Mysql事務
- Mysql視圖
- Mysql觸發器
- Mysql存儲過程
- Mysql存儲函數
- Mysql優化
- 第八章:服務器(Linux)
- Linux介紹與安裝
- Shell
- 目錄與文件操作
- VIM編輯器使用
- 帳號管理
- SUDO
- 權限控制
- 壓縮與打包
- 軟件安裝
- 計劃任務
- 進程管理
- 寶塔Linux面板