重要事項：不能将 <frameset></frameset> 标簽放在<body></body> 标簽裡。且 HTML5 已經不支援 frameset 标簽的使用！！！
1、frameset 元素可定義一個架構集，它被用來組織多個視窗（架構）。每個架構存有獨立的文檔。配合<frame></frame>架構的使用，我們可以對頁面進行分割，局部重新整理。合理的使用會給使用者帶來非常好的體驗效果。
2、frameset 的幾個屬性：
①、cols:定義架構集中列的數目和尺寸。垂直切割畫面(如分左右兩個畫面)，接受整數值、百分數， * 則代表占用剩餘的空間。數值的個數代表分成的視窗數目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三個視窗，第一個視窗是 30 pixels 的寬度，為一絕對分割，第二個視窗是當配置設定完第一及第三個視窗後剩下的空間，第三個視窗則占整個視窗畫面的 50% 寬度為一相對分割。你可自己調整數字。
②、rows:定義架構集中行的數目和尺寸。這是橫向切割，将畫面上下分開，數值設定同上。 COLS 與 ROWS 兩參數盡量不要放在同一個 标記中，因 Netacape 偶然不能顯示這類型的架構，盡量采用多重分割。
③、frameborder：設定架構的邊框，其值隻有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。
④、border：設定架構的邊框厚度。
⑤、bordercolor：設定架構的邊框顔色。
⑥、framespacing：表示架構與架構間保留的空白的距離。
3、frame 标簽的屬性：
①、name：設定架構名稱。此為必須設定的屬性。
②、src：設定此架構要顯示的網頁名稱或路徑。此為必須設定的屬性。
③、scrolling：設定是否要顯示滾動條。設定值為auto, yes, no。
④、bordercolor：設定架構的邊框顔色。
⑤、frameborder：設定是否顯示架構邊框。設定值隻有0、1；0 表示不要邊框，1 表示要顯示邊框。
⑥、noresize：設定架構大小是否能手動調節。
⑦、marginwidth：設定架構邊界和其中内容之間的寬度。
⑧、marginhight：設定架構邊界和其中内容之間的高度。
⑨、width：設定架構寬度。
⑩、height：設定架構高度。
4、frameset使用執行個體：
如果要實作下面的效果
頁面分為三部分，頂部，左邊和右邊。其中點選左邊的超連結，右邊的架構頁面會相應變化。
整體頁面：main.html
top.html,right.html就是一個空頁面，left.html如下：
頁面的分層顯示，主要就是 frameset 标簽中對于 cols 和 rows 的使用，在配合 frame 标簽的嵌套。而想要達到點選左邊的菜單欄，右邊的frame 相應發生變化，那必須要認識屬性
target:規定在何處打開連結文檔。浏覽器将會載入和顯示用這個标簽的 href 屬性命名的、名稱與這個目标吻合的架構或者視窗中的文檔。即 main.html 中，<frame name="target值">,這裡的 name 屬性值為多少，那麼 left.html 中，<a target="name值"> 這裡要相等。
5、如何在子頁面中擷取父頁面所在的frameset中的其它的frame中的元素？
即如何在 right.html 中擷取 left.html中<a></a>标簽的屬性值等等
$(parent.parent.mainFrame.document).contents().find("body").html(); //manFrame指的是你想要檢視的那個frame的id
比如上面的 left.html頁面中,任務建立的 ID 為 taskCreat，那麼我們可以這樣擷取：并改變它的 class 屬性。
$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");
6、frameset 的優缺點
我們知道，目前的 HTML5 标準已經不支援 frameset 了，雖然使用它重載頁面時不需要重載整個頁面，隻需要重載頁面中的一個架構頁(減少了資料的傳輸，加快了網頁下載下傳速度)。但是它也有很多缺點，比如浏覽器的後退按鈕是沒用的；會産生很多頁面，不易管理；代碼複雜，不易被搜尋引擎搜尋；小型移動裝置顯示不全；多架構的頁面會增加伺服器 http 請求等等。是以對于 frameset 的使用我們需要慎重，而且現階段的 DIV+CSS 用來實作這個功能也是可以的。
本文轉自zsdnr 51CTO部落格，原文連結：http://blog.51cto.com/12942149/1929694，如需轉載請自行聯系原作者
![第一個APP——GeoQuiz[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)