语义化标签能大幅降低i18n维护难度，因其天然划分内容作用域，使翻译函数可精准锚定如<main lang="en">下的data-i18n节点，避免全页扫描；支持多语言混排（如<aside lang="zh-Hant">）、保障屏幕阅读器焦点稳定，并确保lang属性逐层同步、动态DOM及时翻译，杜绝因结构混乱导致的漏译或错译。
HTML结构设计直接决定国际化维护成本的高低——结构混乱时，加一个新语言要改几十个地方；结构清晰时，换语言只需改两处：JSON文件 + document.documentElement.lang。
为什么语义化标签能大幅降低i18n维护难度
语义化标签（如<main>、<nav>、<section>）天然划分内容作用域，让翻译函数能精准锚定目标区域，避免“全页扫描+正则匹配”的低效方式。
- 用
<main lang="en">包裹主体内容，切换语言时可只遍历该节点下的data-i18n元素，不用查遍document.body -
<aside lang="zh-Hant">这类局部声明，允许繁体中文侧边栏与简体主内容共存，无需拆成两个页面 - 屏幕阅读器会跳过
<aside>直达<main>，多语言切换后语音焦点逻辑依然稳定，不会因class名变更而错乱
data-i18n标记必须配合结构层级才可靠
标记失效最常见的原因是结构嵌套过深或语义缺失，导致翻译函数找不到目标节点，或误替换非文本内容。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 嵌套超过6层（如
<div><div><div><div><div><div><p data-i18n="btn_submit">）时，Chrome Elements面板右键“Reveal in Elements panel”后手动数路径容易出错，建议用<section>替代中间冗余<div> -
<button>内含<span>图标时，不能只给<button>加data-i18n——textContent会清空子节点，应改用innerHTML并确保语言包值为可信HTML片段 -
<input placeholder="Search...">必须额外加data-i18n-placeholder="search_hint"，仅设data-i18n对placeholder无效
lang属性同步必须逐层执行，不能只改根节点
只执行document.documentElement.lang = 'en'会导致屏幕阅读器仍按旧语言朗读、字体回退异常、标点间距错乱——因为浏览器和辅助技术依赖每个元素自身的lang属性，而非继承值。
立即学习“前端免费学习笔记（深入）”；
- 动态插入的弹窗、表格行等DOM，必须在
appendChild()后立即调用翻译函数，并同步设置其lang属性，不能等全局扫描 - 已有
<pre lang="bash">或<blockquote lang="fr">等显式声明的节点，切换语言时需保留其原始lang值，不能一并覆盖 - CSS中若用
:lang(ja)控制日文标点，必须确保对应文本节点自身带lang="ja"，[lang="ja"]选择器无法匹配继承场景
最易被忽略的是：结构越深，lang属性越容易漏同步；语义越模糊，data-i18n标记越容易打偏位置。维护成本不是由语言数量决定的，而是由HTML是否能让机器和人都一眼看懂“这段文字属于谁、该用什么语言读、该在哪里更新”决定的。
