lang 属性与屏幕阅读器
声明页面和元素语言，以确保正确发音
lang 属性与屏幕阅读器 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
lang 属性的作用
lang 属性使用 BCP-47 语言标签声明元素内容所使用的语言。屏幕阅读器利用它选择正确的发音引擎和语音，搜索引擎则利用它按语言建立索引。
在 html 元素上设置
每个页面都必须在根元素上声明主要语言：英语使用 <html lang="en">，土耳其语使用 <html lang="tr">，日语使用 <html lang="ja">。没有该声明时，屏幕阅读器会回退到用户的系统默认语言，常常导致每个词都发音错误。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>BCP-47 标签
标签遵循 BCP-47：语言代码（en、tr、ja），可选区域代码（en-US、en-GB、zh-Hant、zh-Hans），极少数情况下还会包含文字系统。请使用准确且具体的标签；当区域拼写并不重要时，仅使用“en”也可以。
页面中途的语言变化
对于使用其他语言的段落，请使用其自己的 lang 属性标记：<blockquote lang="fr">Bonjour</blockquote>。屏幕阅读器会为该段落切换语音，即使页面包含多种语言，也能准确发音。
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>CSS 语言选择器
CSS 可以通过 :lang(en) 针对语言进行匹配：blockquote:lang(fr)::before { content: "« "; }。该选择器会匹配最近的祖先元素上的 lang 属性。可使用它处理因语言而异的排版约定，例如引号和间距。
发音为何重要
英语和法语中的“Live”发音不同。德语中的“Wir”发音是“veer”，而不是“wear”。除非明确告知屏幕阅读器所在段落使用德语或法语，否则配置为英语的屏幕阅读器会将这两个词读错。
使用 hreflang 标记链接语言
链接上的 hreflang 属性（<a href="/fr/" hreflang="fr">Français</a>）会告知搜索引擎和辅助技术链接页面所使用的语言。结合整个网站的 hreflang 链接标签，可以实现完整的国际搜索引擎优化覆盖范围。
检测用户语言
JavaScript 可以从 navigator.languages 读取用户的首选语言（这是一个按优先级排列的 BCP-47 标签数组）。可以使用它选择默认区域设置或建议用户切换语言，但始终应优先尊重用户的明确选择，而不是浏览器默认设置。
服务器端检测
HTTP Accept-Language 请求标头会列出浏览器配置中的用户语言偏好。可以在服务器端使用它，在首次请求时发送正确的本地化 HTML，让用户在任何 JavaScript 执行之前就看到自己的语言。
同一页面中的多种语言
Wikipedia 文章、语言学习应用和词典经常混合使用多种语言。请为每段内容设置自己的 lang 属性，即使段落很短也不例外。如果不为每个段落设置 lang，屏幕阅读器语音和 CSS 引号就会回退到页面默认设置。
常见错误
在 <html> 上缺少 lang（非常常见）、语言代码错误（使用 lang="english" 而不是 lang="en"），或者语言本身足够明确时仍使用区域代码。请使用 W3C 验证器和 Lighthouse 可访问性审计，在 CI 中捕获这些问题。
知识检查
为什么在 上设置 lang 对屏幕阅读器用户尤其重要？
总结
在 <html> 上使用 BCP-47 标签（en、tr、ja、zh-Hant）声明页面语言。通过为页面中途的语言变化设置 span/section 的 lang 属性，让屏幕阅读器切换语音。CSS 的 :lang() 可以应用特定语言的排版样式。始终设置 lang——它不增加任何成本，却能大幅改善屏幕阅读器发音、搜索引擎优化和 CSS 匹配效果。
常见问题解答
「lang 属性与屏幕阅读器」课时是免费的吗？
是的 — 「lang 属性与屏幕阅读器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「lang 属性与屏幕阅读器」这节课中我会学到什么？
声明页面和元素语言，以确保正确发音 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「lang 属性与屏幕阅读器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。