已被HTML5完全废弃，现代网页框架仅可用、CSS Grid或SPA；轻量但受限于跨域和高度塌陷，CSS Grid语义清晰且响应式友好，SPA则需在JS层管控生命周期与路由逻辑。
<frameset></frameset> 已被所有现代浏览器弃用，不能用。现在做网页框架，只有三条可行路径：<iframe></iframe>、CSS Grid、单页应用（SPA）的布局组件。选哪个，取决于你是否需要跨页面复用、是否要 JS 控制内容、以及是否接受现代浏览器最低支持要求。
为什么<iframe></iframe>还能用但必须小心？
它是最轻量的“套娃”方案，适合后台管理页、嵌入第三方仪表盘、或临时集成遗留系统。但它不是真正的页面框架——只是把另一个 HTML 文档“塞”进一个盒子里。
- 必须显式设置
width和height，否则高度塌陷为 0；height: 100vh在父容器没高时也无效 -
frameborder="0"是 HTML5 废弃属性，但还得写，否则 Chrome/Firefox 仍可能显示边框；同时必须加 CSSborder: none - 隐藏滚动条不能只靠
scrolling="no"（已废弃），得在外层容器设overflow: hidden - 跨域时，父页 JS 无法读取
iframe内的document.title、location.href或任何 DOM 节点 - 示例写法：
<iframe src="sidebar.html" width="240" height="calc(100vh - 60px)" frameborder="0" style="border: none; display: block;"></iframe>
CSS Grid 布局怎么定义 header / sidebar / main / footer？
这是目前最推荐的纯 HTML+CSS 框架方案，语义清晰、响应式友好、无 JS 依赖。核心是用 grid-template-areas 或 grid-template-columns 显式划分区域。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
grid-template-areas的值里，每个单词代表一个子元素的grid-area名，不能含空格或特殊字符，比如"header header" "nav main" "footer footer" - 侧边栏固定宽 + 主内容自适应，写
grid-template-columns: 240px 1fr，别用auto—— 容易被长文本或图片撑开变形 -
min-height: 100vh必须加在 Grid 容器上，否则100%高度不生效 - Grid 子项默认不继承宽度，
main区域若内容溢出，需额外加width: 100%或overflow-wrap: break-word - IE11 支持 Grid，但只认
-ms-grid旧语法；如真需兼容，得手写两套，多数新项目已放弃
Vue/React 中用 <router-view></router-view> 或 <outlet></outlet> 当框架出口要注意什么？
这不是 HTML 嵌套，而是运行时由路由决定渲染哪个组件。框架逻辑在 JS 层，HTML 只剩一个挂载点。这意味着权限、加载状态、SEO 处理都得提前介入。
立即学习“前端免费学习笔记（深入）”；
-
<router-view></router-view>（Vue Router）必须放在有name的组件内，才能支持命名视图；否则所有路由都挤进同一个出口 -
<outlet></outlet>（React Router v6）不接受children，父组件里写死的内容会被完全替换，想保留 Header 就得把它写在布局组件内部，而非<outlet></outlet>外面 - 权限判断不能等
<outlet></outlet>渲染完再检查——那样页面会先闪一下未授权内容；守卫逻辑必须写在布局组件的useEffect或beforeEach里 - 如果某些路由（如登录页）不需要全局 Header，得用
useLocation()判断当前 path，再条件渲染
真正容易被忽略的点是：框架不是“怎么摆位置”，而是“谁控制生命周期”。<iframe></iframe> 里页面完全独立；Grid 是静态结构，内容靠 DOM 注入；而 SPA 框架的每个区域都可能有自己的数据流、加载状态和销毁逻辑。选错方案，后期改起来不是调样式，而是重写数据链路。
