<frameset>已废弃，禁用；现代框架用语义化标签+CSS Grid/Flex布局；<iframe>需设宽高、去边框（frameborder="0"+border:none）、隐藏滚动条（overflow:hidden），但受跨域限制。
frameset 已被现代浏览器弃用，别用它套 HTML 模板。你现在看到的所谓“框架模板”，实际是靠 header、nav、main、aside、footer 这类语义化标签搭结构，再用 CSS（通常是 Grid 或 Flex）控制区域尺寸和响应式行为。
iframe 嵌入内容时 src 路径总 404？
直接双击打开 index.html 会导致所有相对路径（如 src="js/main.js"、src="content.html"）失效——浏览器走的是 file:// 协议，跨域限制会拦掉 JS 动态加载，iframe 也一样。
- 必须启动本地服务器：VS Code 安装 Live Server 插件后点 “Go Live”，或终端运行
npx http-server（需 Node） - 检查
iframe的src是否真实存在：比如写的是src="pages/dashboard.html"，就得确认目录下真有pages/dashboard.html - 不要混用协议：如果主页面是
<a href="https://www.php.cn/link/d6686469a29701048799005b5ebb1529">https://www.php.cn/link/d6686469a29701048799005b5ebb1529</a>，但iframe的src写成file:///Users/xxx/dashboard.html，必然失败 - 跨域时无法读取
iframe.contentDocument，连document.title都拿不到，这不是 bug，是安全机制
为什么改了 index.html 里的文字，页面还是显示旧内容？
很多 HTML 模板不是纯静态页，而是靠 JS 渲染内容，比如：
-
文本从
data/content.json加载，HTML 里只留空容器：<h1 id="title"></h1>立即学习“前端免费学习笔记（深入）”；
使用
template标签 + JS 克隆填充，原始文本在<template id="card"><div>...</div></template>里，不运行 JS 就不出现某些模板用
fetch('./data.json')初始化，而你没配好路径或没启服务，请求直接 404，JS 报错后整段逻辑跳过打开浏览器开发者工具 → Network 标签页，刷新页面，看有没有
404的 JSON 或 JS 请求在 Console 里搜
Uncaught TypeError或Failed to fetch如果用了
template，检查 JS 是否在 DOM 加载完后才执行：document.addEventListener('DOMContentLoaded', ...)
grid-template-areas 怎么配才不翻车？
这是目前最稳妥的“框架式布局”写法，但容易因命名或顺序出错：
-
grid-template-areas的字符串中，每个单词必须对应一个子元素的grid-area值，且不能含空格、大写字母、特殊符号，例如"header header" "nav main" "footer footer"合法，但"top banner"不合法（空格分隔的是两个区域） - 所有区域名必须在子元素上显式声明：
<header style="grid-area: header;"></header>，漏写就塌陷 - 父容器必须设
display: grid，否则grid-template-areas完全无效 - 移动端适配时，别只改
grid-template-areas，还要同步调整grid-template-columns和grid-template-rows，否则区域会重叠或错位
真正卡住人的，从来不是“怎么写”，而是搞不清模板到底依赖哪一层：是纯 HTML 替换？是 JS 渲染？还是构建工具生成？动手前先看一眼 script 标签里有没有 src，Network 里有没有 JSON 请求，比对着教程改十遍 lorem ipsum 有用得多。
