网页中 h1 元素嵌套 img 时如何影响文档大纲
在 h1 元素内添加图片不会改变文档大纲结构，图片被视为标题文本的一部分，不影响文档层级。
HTML 结构对文档大纲的判定规则
根据 HTML 规范，文档大纲由标题元素决定。h1 元素代表最高层级标题，其内容被视为标题文本。当 h1 内部包含 img 元素时，图片被视为标题文本的一部分，而非独立的文档结构单元。因此，这种嵌套结构不会在文档大纲中创建新的层级或改变现有层级，文档结构保持不变。
MDN 的挑战示例展示了这种用法。在提供的代码中，h1 元素包含了文本“Birdwatching”和一张图片。这种结构符合规范，浏览器和辅助技术会将整个 h1 视为一个标题块，图片作为视觉元素融入标题。文档大纲仅显示一个 h1 元素，不会因为图片的存在而产生额外的标题层级。
检查文档大纲结构的复现步骤
要验证这一规则，可以使用浏览器的开发者工具检查文档大纲。首先，打开包含 h1 嵌套 img 的网页。在开发者工具中，找到“文档大纲”或“Outline”选项卡。观察大纲列表，应该只显示一个 h1 元素，且其文本内容包含“Birdwatching”。如果大纲显示多个 h1 或层级发生变化，则说明结构不符合规范。
另一种验证方法是查看 HTML 源代码。在源代码中定位 h1 标签，确认 img 元素位于 h1 的开始和结束标签之间。如果 img 位于 h1 外部，它将作为独立的标题元素出现，从而改变文档大纲。确保 img 标签正确闭合，且位于 h1 的内容区域内，是保持文档结构正确的关键。
辅助技术对嵌套图片的处理方式
屏幕阅读器在处理嵌套图片时，会将其视为标题文本的一部分进行朗读。这意味着用户听到的标题将是“Birdwatching”加上图片的描述（如果设置了 alt 属性）。如果 alt 属性为空，屏幕阅读器可能会跳过图片或仅朗读其位置，但不会将其识别为独立的标题。
辅助技术遵循文档大纲的规则。由于文档大纲中只有一个 h1，屏幕阅读器只会朗读一次标题。如果图片被错误地放置在 h1 外部，它可能会被识别为另一个标题，导致用户听到两次标题，破坏了文档的连贯性。因此，保持 img 在 h1 内部有助于辅助技术的正确解析和用户体验。
CSS 样式对文档大纲的潜在干扰
CSS 样式主要用于视觉呈现，不会影响文档大纲的生成。即使对 h1 元素应用了复杂的布局样式，如 Flexbox 或 Grid，只要 HTML 结构保持不变，文档大纲就不会改变。MDN 示例中的 CSS 将 h1 设置为居中并添加了阴影，但这仅影响显示效果，不改变其语义结构。
需要注意的是，如果 CSS 导致 h1 元素在视觉上不可见或被隐藏，这可能会影响用户体验，但不会改变文档大纲。文档大纲是基于 HTML 语义的，而非视觉表现。因此，开发者应专注于 HTML 结构的正确性，而不是依赖 CSS 来隐藏或显示标题元素。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。