<tt>标签在HTML5中已废弃，存在可访问性、兼容性和语义化问题；应改用<code>、<kbd>等语义化等宽标签，并通过CSS统一字体及实现精准打字机效果。
<tt> 标签不能用，也不该用——它在 HTML5 中已被明确标记为 obsolete，浏览器渲染它只是兼容性容忍，不是标准支持。
为什么<tt>会失效或出问题
你写 <tt>hello</tt> 看似能显示等宽，但实际埋了几个隐性雷：
- 屏幕阅读器完全忽略它，对残障用户不可见
- Lighthouse、axe 等审计工具直接报 warning 或 error
- 某些新版本浏览器（如 Chromium 128+ 内部实验分支）已开始跳过该标签解析，文本退化为默认字体
- 它和
<b>、<i>一样，是纯样式标签，违背语义优先原则
用<code>或<kbd>代替更稳妥
等宽 ≠ 一种用途。不同场景该用不同语义化标签，既保可访问性，又方便统一控制样式：
-
<code>console.log()</code>：表示代码片段，SEO 友好，屏幕阅读器读作 “code” -
<kbd>Ctrl+C</kbd>：表示键盘输入，读作 “keyboard” -
<samp>File not found</samp>：表示程序输出 -
<var>username</var>：表示变量名
加一句全局 CSS 就能统一字体表现：
code, kbd, samp, var {
font-family: 'Fira Code', 'Source Code Pro', monospace;
}
CSS 实现打字机效果必须配等宽字体
纯 CSS 打字机动画（width + steps()）依赖字符视觉宽度一致，否则光标漂移、节奏错乱：
- 必须设
font-family: monospace，且推荐具体字体栈：'Consolas', 'Courier New', monospace - 必须加
white-space: nowrap防止换行打断动画 - 必须设
overflow: hidden隐藏未“打出”的部分 -
steps(12, end)中的12必须等于字符串总字符数（含空格），否则最后一字可能卡住
常见错误：只写 font-family: monospace，结果 Windows 下字体太粗、Mac 下太细，导致 1ch 宽度不准，动画步长失真。
打字机效果里最容易被忽略的细节
很多人调通了动画，却在真实项目中翻车，关键在三点：
- DOM 渲染完成前就启动动画 → 动画时长按
textContent.length计算，但得等元素挂载后取值 - 响应式场景下容器宽度变化 → 不要用固定
width: 10em，改用width: max-content+min-width: 0配合ch单位 - 光标闪烁和打字动画不同步 →
border-right光标必须和typing动画共用同一个animation-delay偏移，否则闪太快或太慢
