HTML5结构布局教程详解

从现在开始，努力学习吧！本文《HTML5框架结构布局教程》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

HTML5已废弃frameset/frame框架机制，现代“框架布局”实为语义化标签（header/nav/main/aside/footer）结合CSS Grid/Flexbox实现；Grid通过grid-template-areas等属性直观划分区域，iframe仅适用于嵌入第三方独立文档且需注意安全与性能问题。

HTML5 没有内置“框架布局”概念

HTML5 本身不提供类似旧版 或 的框架机制，这些标签在 HTML5 中已被**完全废弃**，浏览器不再支持，强行使用会导致渲染失败或被忽略。所谓“HTML5 框架结构”，实际是指用语义化标签 + CSS（尤其是 Flexbox/Grid）构建的现代页面分区结构。

用

、

这些标签不自带样式，但定义了内容角色，对可访问性、SEO 和维护性至关重要。它们只是容器，布局仍需 CSS 控制。

• 适合放网站标题、Logo、主导航（但不是必须嵌套
• 页面唯一，且不能嵌套在

  、

用 display: grid 快速实现经典三栏+页眉页脚结构

Grid 是目前最直观、可控性最强的布局方式，尤其适合固定区域划分。避免用浮动或绝对定位模拟“框架”。

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr 250px;
  min-height: 100vh;
  margin: 0;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

注意：grid-template-areas 中重复的字符串名（如 "header header header"）对应列数，必须严格对齐；若某区域不需要（如移动端隐藏侧边栏），可改用 grid-template-areas: "header header" "nav main" "footer footer" 并配合媒体查询。

不要用