
設為首頁	加入收藏

首頁
編程語言: C語言|JAVA編程
 Python編程
網頁編程: ASP編程|PHP編程
 JSP編程
數據庫: MYSQL數據庫|SqlServer數據庫
 Oracle數據庫|DB2數據庫

您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

Frameset 框架佈局完整指南：屬性、嵌套與實戰技巧

編輯：PHP 相關知識

Frameset 框架佈局完整指南：屬性、嵌套與實戰技巧

雖然 HTML5 已棄用 ``、`` 標籤，推薦使用 `` 或 CSS Flex/Grid 佈局，但在維護老專案或特定後台場景時，理解框架機制仍有價值。本文系統梳理屬性語法、嵌套規則、常見坑點與驗證配置。</p> <h3>一、<frameset> 核心屬性</h3> <table border="1" cellpadding="5" cellspacing="0"> <tr><th>屬性</th><th>說明</th><th>取值範例</th></tr> <tr><td>cols</td><td>縱向分割 (垂直欄)</td><td>"25%, 200, *"</td></tr> <tr><td>rows</td><td>橫向分割 (水平列)</td><td>"60, *, 100"</td></tr> <tr><td>border</td><td>邊框粗細 (像素)</td><td>0, 1, 5</td></tr> <tr><td>bordercolor</td><td>邊框顏色</td><td>"#ccc", "red"</td></tr> <tr><td>frameborder</td><td>是否顯示邊框</td><td>0 (隱藏), 1 (顯示)</td></tr> <tr><td>framespacing</td><td>框架間距</td><td>0, 10</td></tr> </table> <h4>尺寸單位三種寫法</h4> <ul> <li><strong>百分比</strong>：`"30%"` 佔視窗 30%</li> <li><strong>像素</strong>：`"200"` 或 `"200px"` 固定寬度</li> <li><strong>自動分配</strong>：`"*"` 佔用剩餘空間，多個 `*` 平均分配</li> </ul> <pre><code> <frameset cols="25%, 200, *"></code></pre> <h3>二、嵌套規則：cols 與 rows 不能同層</h3> <p><strong>錯誤寫法</strong>：</p> <pre><code><frameset rows="59,*" cols="213,*"> </code></pre> <p><strong>正確寫法</strong>：外層 `rows`，內層 `cols` 交替嵌套</p> <pre><code><frameset rows="59, *" frameborder="0" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="no" noresize /> <frameset cols="213, *" frameborder="0" border="0" framespacing="0"> <frame src="left.html" name="leftFrame" scrolling="no" noresize /> <frame src="main.html" name="mainFrame" /> </frameset> </frameset></code></pre> <h3>三、<frame> 必備屬性</h3> <table border="1" cellpadding="5" cellspacing="0"> <tr><th>屬性</th><th>必要性</th><th>說明</th></tr> <tr><td>name</td><td>必填</td><td>框架名稱，供 target 導向</td></tr> <tr><td>src</td><td>必填</td><td>載入頁面路徑</td></tr> <tr><td>scrolling</td><td>選填</td><td>auto/yes/no 控制滾動條</td></tr> <tr><td>noresize</td><td>選填</td><td>禁止使用者拖曳調整大小</td></tr> <tr><td>marginwidth/height</td><td>選填</td><td>內容與邊框間距</td></tr> </table> <h3>四、<iframe> 浮動框架差異</h3> <ul> <li>屬性與 `<frame>` 類似，新增 `align` (對齊)、`allowTransparency` (透明背景)</li> <li><strong>文檔結構不同</strong>：`<iframe>` 放在 `<body>` 內；`<frameset>`/`<frame>` 取代 `<body>` 置於 `<html>` 直屬</li> <li>驗證標準：`<iframe>` 符合 XHTML 1.0 Transitional</li> </ul> <pre><code><iframe name="content" src="page.html" width="776" height="2500" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true"></iframe></code></pre> <h3>五、完整範本與 <noframes> 降級</h3> <pre><code><html> <head><title>框架頁面</title></head> <frameset cols="25%, *"> <frame src="menu.htm" name="left" scrolling="no" /> <frame src="page1.htm" name="main" scrolling="auto" /> <noframes> <body> <p>您的瀏覽器不支援框架，請<a href="noframes.html">點此查看</a></p> </body> </noframes> </frameset> </html></code></pre> <h3>六、Visual Studio 驗證錯誤解決</h3> <p>VS 預設驗證 HTML5，會報 `<frameset>` 錯誤。解決：</p> <ol> <li>工具 → 選項 → 文字編輯器 → HTML → 驗證</li> <li>目標瀏覽器選 **Internet Explorer 6.0**</li> </ol> <p>或在專案 `.html` 檔案頂部加入：`` 強制 IE 相容模式。</p> <h3>七、現代替代方案建議</h3> <table border="1" cellpadding="5" cellspacing="0"> <tr><th>場景</th><th>推薦技術</th><th>優勢</th></tr> <tr><td>後台側邊欄佈局</td><td>CSS Grid / Flexbox</td><td>語義化、響應式、無滾動條問題</td></tr> <tr><td>跨域嵌入第三方頁面</td><td><iframe> + sandbox</td><td>安全隔離、權限控制</td></tr> <tr><td>局部刷新</td><td>AJAX / Fetch + DOM 更新</td><td>體驗流暢、SEO 友善</td></tr> <tr><td>微前端</td><td>Web Components / single-spa</td><td>獨立部署、技術棧無關</td></tr> </table> <blockquote> <p><strong>提醒</strong>：新專案請避免使用 Frameset。它導致 URL 不變、書籤失效、SEO 困難、列印/滾動體驗差、無法響應式。僅在不得不維護舊系統時參考本文。</p> </blockquote> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyphp/140760.html' >PHP 面試題精選：核心知識點深度解析</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyphp/140762.html' >PHP setcookie() 完整用法指南：參數詳解、常見坑與最佳實踐</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/' target="_blank">PHP 相關知識</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/137669.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011615583612.png' width='100' height='70' alt='CentOS 使用 Crontab 實現 PHP 腳本定時任務完整教程' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/137669.html' target="_blank"><strong>CentOS 使用 Crontab 實現 PHP 腳本定時任務完整教程</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/137669.html' target="_blank"><p>CentOS 使用 Crontab 實現 PHP 腳本定時任</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/158654.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011718323212_S.jpg' width='100' height='70' alt='PHP PDO 解決中文亂碼的四種實測方法' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/158654.html' target="_blank"><strong>PHP PDO 解決中文亂碼的四種實測方法</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/158654.html' target="_blank"><p>在使用 PHP PDO 連接 MySQL 時，中文亂碼是常見</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138310.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011616215414.png' width='100' height='70' alt='第二屆 PHP 全球開發者大會回顧：亮點、PPT 下載與現場花絮' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138310.html' target="_blank"><strong>第二屆 PHP 全球開發者大會回顧：亮點、PPT 下載與現場花絮</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138310.html' target="_blank"><p>2016 第二屆 PHP 全球開發者大會精華回顧大會於 2</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138707.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011616330412.png' width='100' height='70' alt='PHP ssh2 擴展實作 SVN 自動部署至測試機完整指南' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138707.html' target="_blank"><strong>PHP ssh2 擴展實作 SVN 自動部署至測試機完整指南</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138707.html' target="_blank"><p>一、環境準備：安裝 ssh2 擴展 Windows 下載</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/145239.html' target="_blank">Destoon 商鋪管理主頁新增自訂選單完整操作步驟</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/153856.html' target="_blank">PHP count() 函數完全指南：陣列長度計算、陷阱與現代替代方案</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/41321.html' target="_blank">PHP 實用函數：精準去除數字尾部多餘零</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/150876.html' target="_blank">Apache 核心配置指令詳細解析：啟動、虛擬主機、目錄控制與錯誤處理</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/157637.html' target="_blank">PHP + jQuery 實現 JSONP 跨域 AJAX 呼叫完整範例</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/154256.html' target="_blank">PHP 檔案操作函數速查手冊：fopen 模式、讀寫函數、目錄操作、串流過濾器與最佳實踐</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/146226.html' target="_blank">2024 年必知的 10 大 PHP MVC 框架：特點、優勢與選型指南</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phpjc/' target="_self">PHP 基礎</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phpzh/' target="_self">PHP 綜合知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phprm/' target="_self">PHP 入門</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyphp/' target="_self">PHP 相關知識</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>