HTML框架結構標籤（frameset）
阿新 • • 發佈：2018-12-23
第一次瞭解到竟然還有HTML框架結構標籤（）。為此小編在例項中應用了一下，但是在搭建框架之初就遇到 了問題。為此總結本部落格，以便大家能及時解決問題。
| 什麼是HTML框架結構標籤（<frameset>） |
| 需要實現的效果 |
如下圖，我的也沒中有三個html頁的框架，TOP頁是一個題目，LEFT是目錄，RIGHT頁是詳情，當點選LEFT頁中的不同按鈕的時候，會將不同的內容也顯示在RIGHT頁中。
| 程式碼實現整體框架 |
<!DOCTYPE html>
<html>
<head>
<meta | 程式碼實現——top.html |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head | 程式碼實現——left.html |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#">會員管理</a>
<a href="#">產品管理</a>
<a href="#">員工管理</a>
<a href="#">系統管理</a>
</body>
</html>| 程式碼實現——right.html |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
會員使用者資訊
</body>
</html>完成上面程式碼後，我們先看一下效果圖
有圖可以看出，我們這裡是有問題的：
1、在剛剛開啟網頁後，在未點選左側的目錄按鈕的時候，左側是不應該有內容的。只有在點選“會員管理”按鈕的時候才有內容。
2、需要在點選“會員管理”按鈕的時候才能出現會員資訊頁。
<!--為此我先對left.html中的目錄程式碼稍作修改，讓其每個目錄按鈕都對應著一個資訊頁面。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html">會員管理</a><br/></br><!--修改的地方-->
<a href="#">產品管理</a><br/></br>
<a href="#">員工管理</a><br/></br>
<a href="#">系統管理</a><br/></br>
</body>
</html>此時，我們重新整理頁面，得出的依舊如剛才的效果如下：
此時我們再次點選“會員管理”按鈕出現如下情況。目錄頁消失 了，變成了資訊頁。
經過查詢才知道，這個框架需要和超連結中的target屬性一起使用。target屬性既可以使用預設的屬性值，也可以自定義屬性值。為此，我們對（框架頁面）和left.html頁面都做一下修改。
| 程式碼實現——left.html |
<!--left.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right_demo">會員管理</a><br/></br>
<!--修改的地方：我們自定義超連結的target屬性為“right_demo”位置,right_demo僅僅是為了讓大家好辨識，以免混淆，名字可以自定義-->
<a href="#">產品管理</a><br/></br>
<a href="#">員工管理</a><br/></br>
<a href="#">系統管理</a><br/></br>
</body>
</html>| 程式碼修改——整體框架頁面 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網站後臺框架頁面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame name="right_demo"/><!--修改位置：將src屬性換成了name屬性-->
</frameset>
</frameset>
</html>這樣我們的功能就實現了，在剛剛開啟頁面的時候，右側的頁面中沒有任何內容，僅僅在點選“會員管理”按鈕後顯示相關內容。