今天我們來一起學習HTML簡單基礎的網頁框架。
首先我們補充一個簡略的小知識，系統的架構可以分爲兩種：
B/S架構，也就是Browser/Server(瀏覽器/服務器)架構。也就是基於瀏覽器和服務器之間的一種架構。可以實現用瀏覽器即可對服務端進行訪問和操作的目的。比如大部分的網站和網頁遊戲就是採用這種架構的。
B/S架構的優點是可以使用瀏覽器進行訪問服務端，方便，省事。可以使用一個瀏覽器同時訪問多個服務端。
缺點就是由於 瀏覽器 的顯示效果以及功能有限以及 網速 的限制，會在訪問一些大型的遊戲等可能會有很差的訪問和顯示效果，甚至無法訪問。C/S架構，也就是Client/Server(客戶機/服務器)架構。也就是基於客戶機和服務端之間的一種架構。可以實現較好的訪問和顯示效果。但是缺點也很明顯：
由於要解決網速的問題，所以對於C/S架構需要下載安裝對應的客戶端。大部分的客戶端需要隨着服務端的更新而更新才能使用。而且維護成本過高。
我們學習的網頁採用的就是B/S的架構。一般來說一個網頁可以對它進行劃分將它分成幾個區域。舉個例子：就拿菜鳥教程 來說，它的網頁是：
我們可以對它進行一定程度的劃分，如下：
可以首先將網頁劃分爲上下兩部分如黑色邊框所劃分的 頭部導航 和 下半部分。而 下半部分 又可以分爲左右兩大塊 菜單部分 和 主題內容部分。結構就很簡單了。而對於複雜的網頁也可以由簡化繁的劃分，由大到小的進行劃分。我們今天就來學習一下大的整體的框架。
我們需要知道實現上述簡單網頁的代碼是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>這是一個簡單的網頁框架</title>
</head>
<frameset rows="150px,*">
<frame />
<frameset cols="150px,*">
<frame />
<frame />
</frameset>
</frameset>
</html>
結果如下：
其中，<frameset></frameset> 標籤就是網頁的框架標籤，它有子標籤<frame></frame> 表示一個獨立的區域。像上述總共有3個區域，其中第一個<frameset></frameset> 有一個區域，就有一個<frame></frame> 而下面有2個區域，所以就有2個<frame></frame>
而<frameset></frameset> 有屬性 rows 和 cols 表示框架中存在多少列多少行，它們的屬性值代表它的行或者列的寬度，如果有多行或者列則屬性值之間用， 分開。
既然框架有了那麼內容呢?下面我們來學習怎麼填充內容使這個網頁具有一定的功能。
首先是框架的頭部，只需要重新編寫一個 頭部（top） html文件，將它導入編寫好的框架中就好。具體內容可以根據實際需求或者喜好而定。
然後是左側的菜單（menu），它要實現的功能是顯示功能列表以及能夠隨着不同的功能鏈接到不同的內容顯示在 內容(content） 區域裏。
右側的內容框架功能是隨着menu的鏈接而改變。
我自己編寫的代碼如下：
共有如圖5個html文件。其中 index 是 web項目 自帶的文件沒有具體內容的哦~
homework2代碼如下：是大體框架的代碼
<html>
<head>
<meta charset="UTF-8">
<title>模擬教務在線框架</title>
</head>
<frameset rows="150px,*">
<frame src="Top.html"/>
<frameset cols="150px,*">
<frame src="menu.html" />
<frame src="Content.html" name="Content"/>
</frameset>
</frameset>
</html>
其中<frame></frame> 標籤內用 src 將各個對應文件顯示在對應區域。最後一個<frame></frame> 中的 name 可以起到關鍵字的作用（就像書籤一樣，便於定位）
框架頭部（top）代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 align="center" style="color: peachpuff;" >這是網頁頭部</h1>
</body>
</html>框架菜單（menu）代碼入下：
<!DOCTYPE html>
<html>
<head>
<link href="css/css1.css" rel="stylesheet" />
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<ol type="i">
<li><a href="Homework01.html" target="Content">個人信息</a></li>
<li>我的教評</li>
<li>我的成績</li>
</ol>
</div>
<div style="background-color: gold;">
<ul>
<li>課程查詢</li>
<li>自習室查詢</li>
<li>處分記錄</li>
</ul>
</div>
<div>
<a href="http://www.runoob.com" target="Content">菜鳥教程</a>
</div>
</body>
</html>
其中<link href="css/css1.css" rel="stylesheet" /> 代碼是引用css文件的意思，css我們明天學習哦~在這裏沒有也可以哦~但是每一個具體的<div></div> 的樣式就需要自己用style 屬性設置了哦~如果不知道具體意思呢，可以去菜鳥教程 查看哦~
另外，代碼中<li><a href="Homework01.html" target="Content">個人信息</a></li> <a></a> 是超鏈接標籤，href 是鏈接，target 表示目標，這句代碼也就是將鏈接爲Homework01.html 的文件內容顯示在Content 區域哦~
框架內容（content）代碼入下：由於內容的鏈接可以是自己編寫的html文件，也可以是網站的鏈接，其中homework01就是我上次編寫的表格html文件引用了。
執行結果如下：
點擊個人信息 如下： 當然我上次製作的表格是個人信息註冊表（爲省事就直接拿來用了），你也可以做成自己喜歡的樣式啦~
點擊菜鳥教程 如下：
那麼今天的博客就寫到這裏嘍，明天就開始寫css 的日誌博客嘍~如果有人發現博客中的錯誤，請留下您的評論，我會改正的，加油吧！少年！