必须是直接子元素且唯一，否则丧失语义效力；须含h2+标题才构成有效语义分块；dom深度须≤3层，超深嵌套将导致渲染异常与工具解析失败。
多端适配网页的弹性HTML文档结构，核心不在“怎么写得好看”，而在于“怎么让结构在不同设备、不同解析器、不同辅助技术下都保持语义完整、加载可控、导航可达”。硬套Flexbox或Grid样式解决不了结构失能问题。
main必须是body直接子元素且唯一
这是W3C规范强制要求，也是屏幕阅读器、搜索引擎、阅读器模式（如Safari Reader、Firefox Reader View）识别主内容区域的唯一可靠锚点。一旦嵌套进
或里，
main就失去语义效力。
- 错误写法：
<div class="wrapper"><main>...</main></div>—— 阅读器模式大概率跳过整个main - 正确写法：
<header>...</header><main>...</main><footer>...</footer> - 若需视觉居中或加容器边距，用CSS控制
main自身，而非外层包裹
section必须带h2+标题才构成有效语义分块
仅靠section标签本身无法被读屏器识别为独立内容单元；它必须包含一个层级明确的标题（h2起，且不能跳级），否则会被降级为普通div处理，导致分段加载失效、大纲导航断裂。
- 无效：
<section><p>这是某部分内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178938727468962.jpg" alt="Markdown to HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="overflowclass">Markdown to HTML</a> <p class="overflowclass">{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}</p> </div> <a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>—— 无标题，不构成语义区块 - 有效：
<section><h2>产品特性</h2> <p>支持多端同步...</p></section> - 注意：同一
main内多个section的h2应逻辑并列，避免嵌套式标题（如h2 → h3 → h2）破坏大纲扁平性
流式分段加载必须配合状态缓存防标签断裂
大段HTML按section切片异步加载时，若只拼接innerHTML，极易出现标签未闭合（如<ul><li>...</li></ul>被截断）、属性丢失、嵌套错乱等问题——这会让虚拟DOM解析失败，进而导致html-to-docx等工具生成损坏DOCX。
- 关键动作：每次加载前保存当前解析位置（如最后一个闭合标签名、深度计数）
- 推荐做法：用
DOMParser逐片解析字符串，再用document.importNode安全合并，而非直接innerHTML += - 验证点：加载后检查
document.querySelectorAll('section').length是否等于预期，且每个section内querySelector('h2')不为空
弹性结构≠任意嵌套，DOM树深度必须≤3层
超过三层嵌套（如body > div > section > article）会显著拖慢渲染，且在低端Android WebView或旧版Safari中触发样式继承异常、焦点顺序错乱，甚至导致html-to-docx映射失败（因vDOM树过深，XML生成层栈溢出）。
- 允许结构：
body > header、body > main > section、body > footer - 禁止结构：
body > div > div > main > section > div > p - 优化手段：用CSS Grid/Flex控制布局，把视觉分组逻辑从HTML移到CSS，保留HTML扁平语义
真正难的不是写出响应式样式，而是让每一段HTML在被机器读取时，仍能准确回答：“这是什么？属于哪一部分？能不能单独加载或跳转？”——结构弹性，本质是语义韧性的体现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
