可扩展性依赖结构语义清晰、层级扁平、样式解耦；应使用HTML5语义标签（如）明确内容角色，配合flex或grid按需布局，避免为样式妥协HTML顺序。
可扩展性不是靠加更多 div 堆出来的，而是靠结构语义清晰、层级扁平、样式解耦这三点撑住的。硬套浮动或绝对定位，后期加一栏就全得重写；用 flex 或 grid 但结构还是 <div class="wrap"><div class="inner"><div class="content"> 套三层，照样难维护。
<h3>用 HTML5 语义标签代替无意义的 <code>div 嵌套
浏览器不强制你用 <header></header>，但用了它，你就天然隔离了页头逻辑——改导航样式不会误动页脚，JS 选中 document.querySelector('main') 就只拿到主体，不用靠 class 名猜位置。
-
<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>这些标签本身就有隐含的显示规则和可访问性语义 - 避免
<div id="wrapper"><div class="container"><div class="row"> 这类纯样式驱动的嵌套，它们让结构失去表达力 <li>一个页面里 <code><main></main>应该唯一，<aside></aside>可多个，但每个都应有明确上下文（比如<aside aria-label="related articles"></aside>） -
flex适合一维流式扩展（如导航菜单项动态增减） -
grid适合二维区域划分（如仪表盘左栏菜单、中栏主视图、右栏侧边工具） - 仍需兼容 IE9？那就用
float+overflow: hidden清浮动，但必须保证 HTML 中<aside></aside>在<main></main>之后——否则margin-left算不准 - 正确做法：保持语义顺序（
<main></main>在前），用grid-column: 3或flex-direction: row-reverse控制视觉顺序 - 若用
float，必须配合负 margin（如#main { margin-right: 300px; }+#sidebar { float: right; width: 300px; }），且父容器加overflow: hidden防塌陷 - 绝对定位虽能绕过顺序问题，但会让元素脱离文档流，后续内容无法感知其存在，不适合需要随内容高度自适应的场景
让 CSS 布局能力匹配结构意图，而不是迁就结构缺陷
结构定了，布局方式就得选对。比如三栏布局，如果结构是 <header><main><aside><footer></footer></aside></main></header>，那 grid 就比 float 更自然：父容器设 display: grid，用 grid-template-areas 直接映射语义区域，加新栏只需改一行 CSS，不用动 HTML。
避免结构层承担样式责任，比如“为了 float 而调整 DOM 顺序”
常见错误是把 <aside></aside> 写在 <main></main> 前面，只因为要让它右浮动。这破坏了内容优先原则：屏幕阅读器先读侧边栏，再读正文；SEO 也更难识别主内容权重。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
真正卡住可扩展性的，往往不是技术选型，而是结构和样式的职责错位——HTML 写成样式草稿本，CSS 写成结构修补胶带。一旦某天要加个响应式断点或换种布局方向，就会发现改一处，三处崩。
