h1标签在页面中必须且仅出现一次，代表主标题；用其包裹logo文字（如“京东”）可兼顾语义、seo与可访问性，纯img或隐藏文字会破坏结构逻辑。
h1 标签在页面中应且仅应出现一次，代表整个页面的主标题；用它包裹 logo 文字，是兼顾语义、SEO 和可访问性的最简方案。强行删掉文字、用 img 替代、或把 h1 套在导航外层，都会破坏结构逻辑。
为什么必须用 h1 包 logo 文字，而不是只放图片？
搜索引擎和屏幕阅读器依赖 h1 判断页面主题。纯 img 标签即使有 alt，也缺乏 HTML 语义层级；而空 h1 或 display: none 会直接被忽略。正确做法是让文字“存在但不可见”——既满足爬虫抓取，又不干扰视觉呈现。
-
h1内必须包含可读文本（如“京东”“小米官网”），不能为空或仅含空格 - 不要用
aria-hidden="true"或visibility: hidden隐藏文字，它们可能被读屏器跳过 - 若首页已有
h1logo，内页需改用h2起始，避免多h1结构混乱
text-indent: -9999px 还安全吗？现代替代方案有哪些？
该写法仍可用，但有兼容性隐患：在 flex 或 grid 容器中，text-indent 可能失效；某些高缩放比下文字仍微露；Safari 对负值处理偶有偏差。更稳妥的组合是：
-
font-size: 0—— 简单直接，适用于块级a或span，但需确保父元素未设置line-height导致高度异常 -
position: relative; top: -9999px+overflow: hidden—— 更可靠，尤其配合固定宽高的容器 - 伪元素覆盖法：
h1::before { content: ""; display: block; width: 100%; height: 100%; background: url(logo.png); }，再对原文字设font-size: 0，兼容性好且不依赖缩进
HTML 结构怎么套才不出错？
常见错误是嵌套过深或标签错位，比如把 a 放在 h1 外、或用 div 替代 h1。标准结构应为：
<header><h1 class="logo">
<a href="/">小米官网</a>
</h1>
</header>
关键点：
-
h1是容器，a是其唯一子元素（不是反过来） -
a必须带href，否则失去链接语义，也影响 SEO 权重传递 - CSS 中给
a设宽高、display: block、背景图，而非给h1直接设背景 - 若用
background-image，记得加background-size: contain或cover，避免拉伸失真
容易被忽略的细节：响应式与可访问性补漏
很多人调完 PC 端就收工，但以下三点上线前必查：
- 在移动端 viewport 缩小后，
text-indent负值可能不够大，导致文字半露——建议用em单位（如-999em）而非px - 暗色模式下，若 logo 图是 PNG 透明底，背景色变更可能导致图标不可见——检查
background-color是否需适配 - 键盘 Tab 焦点进入 logo 链接时，应有清晰 outline 或 focus 样式，否则残障用户无法感知当前焦点位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
