基于HTML标签语义化的国际化扩展方案-html教程-PHP中文网

必须显式为每个语义标签设置lang属性并绑定data-i18n，否则屏幕阅读器读错、标点间距乱、字体回退失效；data-i18n需扩展至placeholder/alt等属性，动态插入dom须手动触发翻译，css中应优先用:lang()而非[lang]选择器。

基于html标签语义化的国际化扩展方案

只靠 lang 属性或只用 data-i18n 标记，做不好国际化——语义化标签不是装饰，而是多语言渲染的底层坐标系。必须把语义结构、语言标记、文本更新三者绑死，否则屏幕阅读器读错、标点间距乱、字体回退失效，都是必然结果。

为什么 `<article></article>` 和 `<section></section>` 必须带 `lang`

浏览器和屏幕阅读器不看父级就自动推断子内容语言。它们按每个元素自身的 lang 决定：日文顿号怎么占位、阿拉伯数字是否连字、中文字体是否 fallback 到 Noto Sans CJK。如果 <article></article> 里混了一段英文引用，又没显式写 lang="en"，这段英文就会被当成简体中文渲染——标点挤压、语音引擎切错、拼写检查关闭。

<article lang="zh-Hans"><p>本文介绍…</p> <blockquote lang="en"><p>“The web is for everyone.”</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></blockquote></article>
不要省略 lang，哪怕它和根节点一致；<section></section>、<aside></aside>、<footer></footer> 同理
已有语义标签（如 <pre class="brush:php;toolbar:false;" lang="bash"></pre>）保留原 lang，这是合法混排，不是错误

`data-i18n` 只改 `textContent`？那 `placeholder` 和 `alt` 就漏翻了

data-i18n 是个常见陷阱：它默认只更新元素文本内容，对 placeholder、title、alt、aria-label 这类属性完全无效。用户切换语言后看到 <input placeholder="Search"> 还是英文，不是翻译没生效，是根本没配对。

必须显式加后缀：data-i18n-placeholder="search_hint"、data-i18n-alt="avatar_desc"
value 属性一般不翻译（属于用户输入），但 <button></button> 和 <input type="submit"> 的显示文案建议统一走 textContent 更新
含 HTML 结构的文案（如 "请阅读<strong>服务条款</strong>"）要用 innerHTML 替换，且语言包里对应值必须是可信纯 HTML 片段，不能含用户输入

动态插入的 DOM 不触发翻译？因为 `data-i18n` 不是 reactive

AJAX 加载的弹窗、分页表格新行、懒加载模块，插入 DOM 后不会自动扫描 data-i18n。这不是框架 bug，是设计使然：DOM 插入和翻译是两个独立动作，必须手动衔接。

弹窗打开后，需立即调用翻译函数遍历其内部所有 [data-i18n] 元素
表格每页加载新 <tr>，插入后要主动执行 <code>translateElement(row)，不能等 MutationObserver
第三方组件（如日期选择器）若自带文案，需在其初始化后调用其内置语言切换方法，或重写其模板中的 data-i18n

`:lang()` 和 `[lang]` 在 CSS 中根本不是一回事

想用 CSS 控制不同语言的排版？选错选择器就白写了。[lang="ja"] 只匹配显式写了 lang="ja" 的元素，不继承；而 :lang(ja) 能匹配该元素或其任意祖先有 lang="ja"，适合处理嵌套文本。

用 :lang(zh-Hans) { font-family: "PingFang SC", sans-serif; } 统一中文字体链
用 [lang="ar"] { direction: rtl; text-align: right; } 精准控制阿拉伯语区块
别用 [lang] 做全局样式，它会匹配所有带 lang 属性的元素，包括 <pre class="brush:php;toolbar:false;" lang="bash"></pre>，导致代码块字体错乱

最易被忽略的点：语义标签本身不携带语言信息，lang 必须显式声明；而一旦声明，它就参与字体回退、标点渲染、语音朗读全流程——不是“可有可无”，是“写错比不写更糟”。