nu html checker 仅校验源码中显式声明的 lang/dir 属性，要求所有含自然语言文本的语义标签（如 h1、p、label、blockquote 等）均需合规 bcp 47 值且不可依赖继承；技术标签（如 pre、code）应保留原 lang；data-i18n 需加后缀（如 -placeholder）并严格匹配 key；动态插入 dom 后须手动调用翻译函数。
用 Nu Html Checker 检查 lang 和 dir 属性是否合法
只改 document.documentElement.lang 但没同步所有子元素的 lang，Nu Html Checker 会直接报错：「lang attribute value is not a valid BCP 47 language tag」或「lang missing on element p」。它不看 JS 运行时行为，只验源码中每个含文本的语义标签是否显式声明了合规值。
关键点：
- 必须检查
<h1></h1>、<p></p>、<label></label>、<footer></footer>等所有含自然语言文本的标签，不能漏掉<blockquote></blockquote>或<figcaption></figcaption> -
<pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">这类技术语言标签要保留原lang值，Nu Html Checker 允许混排，但会警告你如果误把zh-Hans写成zh-CN（后者虽常见但非标准 BCP 47） - 方向属性
dir错位也会被标出，比如阿拉伯语段落没设dir="rtl"，或中文里嵌了英文却没用dir="ltr"包裹
data-i18n 属性漏写后缀导致 placeholder/alt 不更新
现象是切换语言后按钮文字变了，但 <input placeholder="Search"> 还是英文——这不是翻译没跑，而是 data-i18n 默认只处理 textContent，对 placeholder、alt、title、aria-label 完全无效。
必须显式加后缀：
data-i18n-placeholder="search_hint"data-i18n-alt="avatar_desc"data-i18n-title="tooltip_info"data-i18n-aria-label="close_button"
漏一个后缀，对应属性就永远卡在初始语言；且这些后缀名必须和语言包 key 完全一致，大小写、下划线都不能错。
动态插入 DOM 后没触发翻译，data-i18n 只是字符串
AJAX 加载弹窗、分页表格新行、懒加载模块插入后，里面的 data-i18n 标记不会自动生效。浏览器不会监听 DOM 变化去调翻译函数，这是最常被忽略的断点位置。
实操要点：
- 每次
element.innerHTML = ajaxResponse或container.append(newRow)后，立刻调用你的翻译函数，例如translateElement(newRow) - 不要依赖全局事件代理——
data-i18n是一次性标记，不是响应式绑定 - 对
<template></template>或innerHTML插入含 HTML 结构的文案（如带<a></a>的句子），必须用innerHTML替换，且语言包里的值要是已转义、无用户输入的纯 HTML 片段，否则有 XSS 风险
lang 属性继承陷阱：父级设了 ≠ 子级生效
很多人在 里设了语言，就以为所有 <p></p> 都按中文渲染。但浏览器和屏幕阅读器只看**每个元素自身的 lang 属性**，不继承。结果：<p></p> 里的顿号按英文间距排，<pre class="brush:php;toolbar:false;" lang="bash"></pre> 的字体被中文字体覆盖，<img alt="logo"> 的 alt 还是英文朗读。
所以：
- 所有含自然语言文本的语义标签都得手动写
lang，哪怕只是重复根节点值 -
<script></script>和<style></style>里不用加lang，它们不参与文本渲染 - 已有
lang的技术性标签（如<pre class="brush:php;toolbar:false;" lang="bash"></pre>）切换语言时保留原值，这是多语言混排的合法场景，别强行覆盖
真正难的不是写代码，是记住哪些地方必须显式声明、哪些可以不管——错一处，标点、字体、语音就读错，而且很难在视觉上察觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
