什麼是網頁的佈局？網頁佈局就是我們在拿到設計稿後進行切片處理（所謂切圖），然後我們通過DIV+CSS佈局，書寫靜態頁面按照設計稿還原排列，把我們想要實現的功能與內容進行填充！早期的frameset佈局主要書寫管理後臺控制菜單的切換實現局部的刷新，至於頁面的嵌套則是通過iframe ...
通常我們從設計師手上拿到設計稿，按照功能劃分為很多小塊，然後再利用div+css寫成靜態頁面按照設計稿排列還原，最後把具體內容填充到小塊裡面。網頁佈局就是你想要的頁面功能在你拿到設計圖切塊完成重新排列還原好！
div是一個容器，具體根據內容自動適配，可以設置它的寬高，內容儘可能的排列到div當中，當然在設置div寬高後，它裡面的圖片文字是可能超出設置的寬高度的。
table佈局，可以查看HTML基礎標簽圖片文本超鏈接列表表格介紹這裡面有講到，需要註意的是在table表格中，colspan是可以跨列合併單元格的，rowspan是可以跨行合併單元格的！以前的佈局除了div+css還有frameset佈局,它主要運用於管理後臺控制菜單切換，實現這個局部的刷新。
iframe翻譯過來是頁面框架，其實它是用來嵌套頁面的，在頁面裡面可以嵌套別人的頁面，展示代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ifame嵌套</title> 7 </head> 8 <body> 9 <iframe src="https://www.baidu.com/" frameborder="0" width="50%"></iframe> 10 <iframe src="https://hao.360.com/" frameborder="0" width="50%" style="float: left;"></iframe> 11 </body> 12 </html>
其次是frameset基於frame一個一個頁面嵌套進來的,需要註意的是frameset不能和body共用，它們是平級的關係，二者只能出現其一！具體按照下麵的代碼來看，也可以實際操作下，有點繞哈，按照講解一二三依次來看，有相應的註釋：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>frameset實現局部刷新</title> 7 </head> 8 <!--講解一：frameset中frame的嵌套--> 9 <!-- <frameset rows="30%,70%"> 10 <frame src="frame1.html"> 11 <frame src="frame2.html"> 12 </frameset> --> 13 14 <!--講解二：frameset和table表格差不多，2行2列--> 15 <!-- <frameset rows="30%,70%"> 16 <frame src="frame1.html"> 17 <frameset cols="20%,80%"> 18 <frame src="frame2.html"> 19 <frame src="frame3.html"> 20 </frameset> 21 </frameset> --> 22 23 <!--講解三：frameset如何控制實現局部刷新--> 24 <!-- 4個frame文件寫的內容如下： --> 25 <!-- frame1中寫著： --><!--frame1--> 26 <!-- frame2中寫著： --><!-- <a href="frame3.html" target="showframe">frame3.html</a><a href="frame4.html" target="showframe">frame4.html</a> --> 27 <!-- frame3中寫著： --><!--frame3--> 28 <!-- frame4中寫著： --><!--frame4--> 29 <frameset rows="30%,70%"> 30 <frame src="frame1.html"> 31 <frameset cols="20%,80%"> 32 <frame src="frame2.html"> 33 <frame src="frame3.html" name="showframe"><!--如果不寫name="showframe"沒辦法實現局部刷新，會打開新的視窗--> 34 </frameset> 35 </frameset> 36 </html>
最後關於iframe與frame的區別在我看來：iframe翻譯過來是嵌套，其實就是把別的頁面嵌套到自己的頁面進來<iframe src="嵌套目標文件" frameborder="0"></iframe>；而這個frame是frameset實現局部刷新的基石，沒有frame，frameset就無法實現局部刷新,同時要註意的是frameset與body不能同時出現!
