必须在<html>标签上用BCP 47规范写lang属性，如lang="zh-CN"，这是屏幕阅读器初始化语音引擎的唯一有效位置；其他位置或格式均无效。
必须在 <html> 标签上写 lang，而且值要规范——这是让屏幕阅读器“听懂”页面的起点，不是可选项。
根标签 lang 是唯一有效的语言声明位置
NVDA、VoiceOver、JAWS 这些主流屏幕阅读器，只在解析 HTML 初始结构时读取 <html lang="..."> 的值，用它初始化整页语音引擎。其他地方全无效：
-
<body lang="zh-CN">—— 不触发语音切换，仅极少数断词逻辑可能受影响 -
<div lang="en">—— 语义缺失，读屏不识别为语言单元，硬读风险高 -
<meta http-equiv="Content-Language">—— HTML5 已弃用，所有现代浏览器静默忽略 - JS 动态改
document.documentElement.lang—— 对已加载内容无重载效果，语音引擎不会切换
中文推荐用 zh-CN，别用模糊或非法值
值必须符合 BCP 47 标准（小写语言码 + 连字符 + 大写地区码），否则会被浏览器和读屏直接忽略：
- ✅ 推荐：
<html lang="zh-CN">—— 兼容性最稳，Windows Narrator、iOS VoiceOver、NVDA 2022+ 全部可靠加载普通话语音库 - ⚠️ 慎用：
<html lang="zh-Hans">—— 只强调简体字形，旧版 Safari 或 JAWS 可能匹配失败 - ❌ 错误：
<html lang="zh">（太宽泛，iOS 可能跳过中文 TTS）、<html lang="zh_CN">（下划线非法）、<html lang="Chinese">（非标准标签）
混排外文内容必须显式标注子元素 lang
只设根 lang="zh-CN"，不代表屏幕阅读器会自动识别里面的英文术语或代码——它仍按中文规则硬读，比如把 “React” 读成 “瑞克特”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 单个术语：
<code lang="en">useState</code>—— 触发英文音素切分，比<span>更语义准确 - 整段英文说明：
<p lang="en">This is a JSON response.</p> - 引文类内容优先用语义化标签：
<blockquote lang="fr">Merci beaucoup.</blockquote> - 避免
<div lang="en">包裹多段落——破坏语义层级，干扰 CSS 的:lang(zh)匹配
配合 :lang() 伪类让样式也响应语言
光有 lang 属性还不够，得让视觉表现也跟上语言特性：
:lang(zh) { line-height: 1.8; font-family: "PingFang SC", sans-serif; }:lang(en) { font-family: "SF Pro Text", sans-serif; }:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", sans-serif; }
注意：::lang() 匹配的是元素自身 lang 属性，不是继承来的；它比 class 更稳定，无需 JS 干预就能生效。
