HTML學習筆記-HTML框架 AND 2018-11-20（23:33）
阿新 • • 發佈：2018-11-23
一、Frameset標籤
Frameset標籤：框架標籤，可以把一個網頁分為好幾個網頁。不能和body一同使用。
常用屬性：rows：把框架分為上下的區間。第一塊佔60的長度，其餘的第二塊佔。
例如：
<frameset rows="60,*"></frameset>
二、frame標籤
frame標籤：用來在同一頁面顯示多個HTML的。
例如：
<frameset rows="60,*"> <frameset> <frame src="top.html"> </frameset> <frameset cols="150,*"> <frame src="left.html"> <!-- 預設顯示會員管理的內容 --> <frame src="vip.html" name="contenFrm" > </frameset> </frameset>
三、以一個架子為例
1.首先利用rows屬性把它分為上下兩部分（index.html）。
程式碼如下：
<frameset rows="60,*">
<frameset>
1
</frameset>
<frameset >
2
</frameset>
</frameset>
2.然後把頂部的區間建立一個HTML.
(top.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁擡頭</title> </head> <body> <div> 管理系統 </div> </body> </html>
3.然後利用frameset的cols屬性，把左側選單欄的區間和右側主現框建立分隔開。
<frameset rows="60,*">
<frameset>
<frame src="top.html">
</frameset>
<frameset cols="150,*">
<frame>
<frame>
</frameset>
</frameset>
4.把左側選單欄的HTML寫出來（left.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左側選單欄</title> </head> <body> <a >會員管理</a><br/> <a >訂單管理</a><br/> <a>財務管理</a><br/> </body> </html>
5.把選單欄中的每個功能各寫一個HTML頁面（vip.htlm 、other.html、finance.html）。
Vip頁面：（會員）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>會員</title>
</head>
<body>
會員資訊<br/>
<ul>
<li>劉備</li>
<li>關羽</li>
<li>張飛</li>
</ul>
</body>
</html>
---------------
other頁面：（訂單）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訂單資訊</title>
</head>
<body>
訂單資訊：<br/>
<ul>
<li>手機一部</li>
<li>電腦一臺</li>
<li>房子一套</li>
</ul>
</body>
</html>
----------------
finance頁面(財務）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>財務</title>
</head>
<body>
財務結算：<br/>
<ul>
<li>劉備：50000</li>
<li>張飛：30000</li>
<li>關羽：40000</li>
</ul>
</body>
</html>
6.把所有這選單頁面配置到Index.html中並讓主現框預設顯示vip.html（會員資訊）。
<frameset rows="60,*">
<frameset>
<frame src="top.html">
</frameset>
<frameset cols="150,*">
<frame src="left.html">
<!-- 預設顯示會員管理的內容 -->
<frame src="vip.html" >
</frameset>
</frameset>
</html>
7.在選單欄頁面中的a標籤中全部新增統一的name屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側選單欄</title>
</head>
<body>
<a href="vip.html" target="contenFrm">會員管理</a><br/>
<a href="other.html" target="contenFrm">訂 單管理</a><br/>
<a href="finance.html" target="contenFrm">財務管理</a><br/>
</body>
</html>
8.在index頁面的主現框區域 新增name屬性，與選單HTML的各個功能的name連線。實現HTML框架功能。
<frameset rows="60,*">
<frameset>
<frame src="top.html">
</frameset>
<frameset cols="150,*">
<frame src="left.html">
<!-- 預設顯示會員管理的內容 -->
<frame src="vip.html" name="contenFrm" >
</frameset>
</frameset>
</html>
0:08了小夥伴們，打卡第六天！HTML完結！下此更新CSS的知識了！