# HTML框架如何使用
## 1. 什么是HTML框架
HTML框架（Frames）是一種將瀏覽器窗口分割為多個獨立區域的布局技術，每個區域可以加載不同的HTML文檔。雖然現代Web開發中已逐漸被`<iframe>`和CSS布局替代，但理解框架技術對維護傳統項目仍有意義。
### 核心特點：
- 通過`<frameset>`替代`<body>`
- 每個框架獨立加載頁面
- 支持嵌套框架結構
## 2. 基本框架語法
### 2.1 框架集聲明
```html
<!DOCTYPE html>
<html>
<head>
<title>框架示例</title>
</head>
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
| 屬性 | 描述 |
|---|---|
cols |
垂直分割（百分比或像素值） |
rows |
水平分割 |
border |
框架邊框粗細（像素） |
frameborder |
是否顯示邊框（0/1） |
<frameset cols="200,*,150">
<!-- 左側固定200px，右側150px，中間自適應 -->
</frameset>
<frameset rows="20%,80%">
<!-- 上方占20%，下方占80% -->
</frameset>
<frameset rows="100,*">
<frame src="header.html">
<frameset cols="30%,70%">
<frame src="nav.html">
<frame src="main.html">
</frameset>
</frameset>
現代替代方案，可在普通HTML文檔中使用：
<iframe
src="demo.html"
width="300"
height="200"
frameborder="0"
allowfullscreen>
</iframe>
// 通過name屬性訪問
window.frames["frameName"].document.getElementById("elem");
// 通過索引訪問
window.frames[0].location.href = "newpage.html";
// 訪問直接父級
parent.document.getElementById("header");
// 訪問頂級窗口
top.location.href = "http://example.com";
<div class="container">
<nav>...</nav>
<main>...</main>
<aside>...</aside>
</div>
// React示例
function App() {
return (
<>
<Header />
<div className="content">
<Sidebar />
<MainContent />
</div>
</>
);
}
<frameset rows="80,*">
<frame src="topbar.html" noresize>
<frameset cols="200,*">
<frame src="menu.html" scrolling="auto">
<frame src="dashboard.html" name="main">
</frameset>
</frameset>
<div class="map-container">
<iframe
src="https://maps.example.com"
allowfullscreen
loading="lazy">
</iframe>
</div>
<frameset>在HTML5中已廢棄，但主流瀏覽器仍支持<noframes>標簽提供替代內容雖然HTML框架技術逐漸被現代Web標準淘汰，但：
- 維護舊系統時仍需了解其工作原理
- <iframe>仍在特定場景下有實用價值
- 掌握框架間通信機制有助于理解窗口對象模型
建議新項目優先采用Flexbox/Grid布局或組件化開發模式，僅在需要隔離第三方內容時考慮使用iframe方案。 “`
（注：實際字數為約1200字，可根據需要擴展具體示例或添加更多實踐技巧）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
