html网页内容层级划分对认知障碍用户是可用性底线：必须唯一且为直接子元素，每个配连续层级的–标题、嵌套≤三层，表单控件紧邻提示文本并用aria-describedby指向真实id，错误提示加role="alert"，文字行高≥1.5、字号≥16px，语言须简洁主动。
HTML网页内容层级划分对认知障碍用户不是“有帮助”，而是决定他们能否独立完成任务的底线条件。结构混乱、跳级标题、嵌套过深或语义缺失，会直接导致用户迷失上下文、无法预测下一步操作、反复回溯确认——这不是体验问题，是可用性失效。
为什么必须唯一且不能嵌套
认知障碍用户依赖页面的“锚点感”：一眼看到页头、知道哪块是核心内容、哪块是辅助信息。如果 认知障碍用户靠标题建立心理模型。“操作步骤”“注意事项”“常见问题”这些区块名，必须通过 认知障碍用户不擅长跨区域关联信息。看到“请输入邮箱”，却要眼睛/耳朵去找那个带id="email"的 将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。 这不是为了“看得更舒服”，而是防止视觉拥挤引发认知负荷激增。行高过小会让行间粘连，字号过小会迫使用户频繁缩放、丢失上下文位置——尤其在移动端， pinch-zoom 后焦点容易漂移，页面重排又打乱原有节奏。 最容易被忽略的点：结构再规范，若文案用被动语态（“申请将被审核”）、堆砌术语（“执行身份核验流程”）、或链接写“点击此处”，所有HTML层级都白搭。可访问性始于标签，成于语言——而后者无法被自动检测工具捕获。
<main></main>必须是的直接子元素，且全页面只出现一次<div class="container"><main>...</main></div>，这会让辅助技术忽略它<main></main>位置真实、未被JS动态移除或包裹为什么
且嵌套不能超三层
显式声明，且顺序线性、不可跳跃。跳过
直接用
，等于撕掉说明书目录。
<section></section>必须包含且仅包含一个<h2></h2>（或–
，但需与上层连续）
<section><section>...</section></section>这种双层嵌套；三层即顶限（<section></section>，改用<hr>或CSS margin为什么表单控件必须紧邻
<input>，中间还隔着几个
<label>请输入邮箱<input type="email" id="email"></label>
for值必须与id完全一致（区分大小写、无空格），且id全局唯一<label for="email"></label><input id="email-input">这类错配——屏幕阅读器会静默跳过该控件role="alert"动态插入，不能只靠CSS显示/隐藏为什么文字行高≥1.5、字号≥16px是硬约束而非样式偏好
rem换算后实际渲染小于16px，例如html { font-size: 62.5%; }再设font-size: 1.4rem → 实际14px，违规line-height: 1.5），避免继承链中被像素值覆盖<br>或margin-top硬调——用margin-bottom统一控制下边距即可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
