導讀：在做項目的過程中，發現網頁的一些地方是不變的，比如說頂部、底部。而變幻的內容就只是一部分。這個時候在想，這是每次都刷新一個界面呢，還是有別的快捷方法呢。然后就找到了frameset 這個東西。本篇博客是結合一個小實例對frameset的簡單介紹。
一、是什么
frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。
優點：
1，在frameset里使用iframe來實現常規的一些分欄布局，可以借助一個頁面承載多個頁面的方式來重用頁面代碼。
2，一個頁面中的iframe之間可以互相實現關聯，而且不需要依靠過多的js就可以實現類似“局部”刷新的機制。
缺點：
1，如果要實現不同iframe之間的dom元素產生互動和關聯，需要的js復雜程度較高，而且有些根本實現不了（比如拖拽，比如用戶自定制頁面布局）。
2，一個頁面承載多個頁面的http請求，而且實現那種類似局部刷新的效果，不是后台運行請求的機制，而也是使用了前台的瀏覽器刷新機制，會有延遲的響應而且無法對響應進行控制（比如loading或者一些響應狀態的監聽）。
使用場景：
適用於有固定布局的系統
二、實例簡介
2.1，上、下、左的布局
top：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——top</title>
</head>
<body>
<div style="text-align:center;color:blue;font-size:50px">（這里是頭部）牡丹亭</div>
</body>
</html> </span>
bottom：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——bottom</title>
</head>
<body>
<div style="text-align:center;color:blue;font-size:30px">（底部）
《皂羅袍》
</div>
</body>
</html> </span>
left：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——left</title>
</head>
<body>
<div style="color:blue;font-size:30px">（左邊）
</br>
《牡丹亭》
</br>
作者：湯顯祖
</br>
<a target="right" href="right.html">前兩句</a> </br>
<a target="right" href="myright.html">后兩句</a>
</div>
</body>
</html> </span>
2.2，center中的右面布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——right</title>
</head>
<body>
<div style="color:blue;font-size:30px">（右邊前兩句）
</br>
原來奼紫嫣紅開遍
</br>
似這般都付與斷井頹垣
</div>
</body>
</html> </span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——myright</title>
</head>
<body>
<div style="color:blue;font-size:30px">（右邊后兩句）
</br>
良辰美景奈何天
</br>
賞心樂事誰家院
</div>
</body>
</html> </span>
2.3，混合的frameset布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——index</title>
<frameset rows="15%,80%,5%">
<frame name="top" src="top.html" /><--擁有15%的高度-->
<frameset cols="25%,75%"><--擁有80%的高度-->
<frame name="left" src="left.html"><--擁有25%的寬度-->
<frame name="right" src=""><--擁有75%的寬度-->
</frameset>
<frame name="bottom" src="bottom.html" /><--擁有5%的高度-->
</frameset>
</html> </span>
2.4，效果
三、總結
利用frameset標簽可以設置一個固定的網站布局，但是在HTML5中，已經不支持這個屬性了。那么我想肯定有一種可以替代的東西。接下來，還需要了解一些別的相關的東西，比如IFrame等。