页面能显示不等于结构清楚。标题层级、导航和表单语义会影响阅读、可访问性与后续维护。
本文使用HTML5、CSS 与当时浏览器可支持的布局能力，示例为局部页面。页面表现由文档结构、布局规则和浏览器环境共同决定。本文以可核对的 DOM（文档对象模型）和样式计算为起点，不使用后续才普及的布局属性。
1. 从现象推到机制
HTML 描述内容关系，CSS 决定视觉呈现。使用正确标题与 label，让浏览器和辅助工具理解页面。把所有内容都写成可点击 div，会丢失键盘行为与原生语义，后续还要手工补齐。
图中的四个节点分别表示内容关系、语义元素、交互行为、样式呈现。顺着实线检查输入如何变成输出，再沿虚线核对反馈条件。图示表达的是本文讨论的关系，不是实测曲线或现场截图。
2. 最小实现与输入条件
用一个文章页练习，先不写样式，检查文档是否仍按自然顺序可读。按钮负责动作，链接负责导航，表格用于真正的行列数据。
1
2
3
4
5
<article>
<h1>订单使用说明</h1>
<section><h2>预约步骤</h2><p>先选择日期。</p></section>
<button type="button">检查预约</button>
</article>
将片段放进带 UTF-8 声明和 viewport 设置的演示页。使用开发者工具检查实际盒尺寸、计算样式与请求；多浏览器或移动端结论需要在相应环境重新验证。
3. 用对照区分原因
下表列出需要主动改变的条件。预期行为来自机制分析，复现时还需记录运行环境和原始输出，不能将预期当作已经测得的结果。
| 改变的条件 | 需要验证的行为 |
|---|---|
| 关闭样式表 | 内容仍应有合理阅读顺序 |
| 只用键盘导航 | 原生交互元素应可操作 |
| 视觉大字却不用标题 | 外观相似但语义不同 |
对照 1：关闭样式表
内容仍应有合理阅读顺序。观察时记录文档结构与标题关系。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 2：只用键盘导航
原生交互元素应可操作。观察时记录焦点位置与激活动作。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 3：视觉大字却不用标题
外观相似但语义不同。观察时记录DOM 元素与辅助阅读结构。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
4. 适用条件与取舍
语义标签不是 SEO 效果承诺。先满足内容结构与交互含义，再用样式实现设计，不为追求标签种类而滥用 section。
一次正常运行只覆盖了这组输入。继续扩展前，应把上面的异常对照保留下来，尤其关注“视觉大字却不用标题”这一分支。后续方案若改变了图中任意一处依赖，原来的判断就要重新验证，不能仅凭界面相似或返回值相同沿用结论。
