子模板需通过语义化HTML结构与CSS响应式控制实现，关键在于用明确类名的语义容器（如）组织内容，并按实际内容临界点设置断点、避免深层嵌套、优先使用BEM命名与现代CSS单位。
子模板不是 HTML 原生概念，得靠结构+CSS 实现
HTML 本身没有“子模板”这个语法或标签。所谓“嵌套响应式子模板”，实际是把一块语义清晰、可复用的 HTML 片段（比如 <section class="card"></section> 或 <article class="feature"></article>）写进主结构里，并通过 CSS 控制它在不同断点下的表现。关键不在“怎么引入”，而在“怎么组织结构 + 怎么写样式”。
必须用语义化容器包裹，别裸写 div
直接往 <main></main> 里塞一堆无 class 的 <div>，后续根本没法响应式控制——你连目标都选不到。正确做法是给每个逻辑区块明确身份：
<ul>
<li>
<code><section class="hero"></section> 用于首屏大图区，配 @media (max-width: 768px) 改变 padding 和 font-size
<article class="post-summary"></article> 包裹每条内容摘要，用 display: grid + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现自动列数调整<aside class="sidebar"></aside> 在桌面端右置，在移动端折叠进汉堡菜单，靠 position: sticky 或 display: none 切换响应式断点要和容器语义对齐，别硬套 768/1024
Bootstrap 那套 sm/md/lg 断点容易让人误以为“所有项目都该在这几个宽度切”。但真实场景中：
- 一个卡片宽度撑到 320px 就换行？那
@media (max-width: 320px)才是它的临界点，不是等 768px - 导航栏文字在 414px 宽的 iPhone 上开始重叠？那就加
@media (max-width: 414px)缩 font-size 或改 flex-wrap - 用
min-width而非max-width写“桌面增强”样式更安全，避免移动端样式被意外覆盖
嵌套层级别超三层，否则媒体查询会失控
常见翻车现场：<div class="wrapper"><div class="container"><div class="inner"><div class="item">……这种结构下，想单独调某个 <code>.item 在小屏的 margin，得写 .wrapper .container .inner .item，再叠上 @media，维护成本爆炸。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真正可维护的做法是：
- 每个子区块自身带完整语义类名，如
<section class="pricing-card"></section>，不依赖父级 class - 用
display: contents或isolation: isolate隔离样式作用域（注意兼容性） - CSS 中避免深度嵌套选择器，优先用 BEM 风格：
.feature-list__item而非.feature-list li
最易被忽略的一点：响应式不是“写完再适配”，而是从第一行 HTML 就决定好哪些元素需要随屏幕缩放——比如 <img alt="HTML怎么嵌套响应式子模板" > 必须带 srcset 和 sizes，<h1></h1> 的字体单位得用 clamp() 或 rem，否则后面补再多 media query 都是徒劳。
