多语言网站骨架需从根节点起支持动态语言切换：html根元素必须可动态更新lang属性，所有文本容器显式标记data-i18n及对应属性后缀，语义化标签统一设lang避免混排失效，动态内容插入后须显式调用翻译函数。
规划多语言国际化网站的页面骨架，核心是让结构天然支持语言切换，而不是后期硬塞翻译逻辑。关键不在“怎么写得多”，而在“怎么写得对”——从根节点开始就为多语言留出语义和数据通道。
根元素必须带lang属性并可动态更新
HTML标签要声明初始语言，比如，但更重要的是它必须能被JS安全修改。每次切换语言时，不仅要加载新语言包，还要执行document.documentElement.lang = 'en-US'。这一步不是装饰，它直接影响屏幕阅读器朗读、标点渲染、字体回退和拼写检查。如果只改文本不改lang，等于给浏览器发了错误指令。
所有文本容器显式标记data-i18n，不依赖继承
每个需要翻译的元素都要主动标注，不能指望父级lang自动生效。例如：
<h1 data-i18n="page.title">首页</h1><input placeholder="搜索" data-i18n-placeholder="search.hint"><img alt="用户头像" data-i18n-alt="user.avatar"><label data-i18n="form.email">Email</label>
注意：data-i18n只处理文本内容（textContent），placeholder、alt、title等属性必须用对应后缀单独声明，否则切换后这些地方仍显示旧语言。
语义化标签统一设lang，避免混排失效
除了根元素，<h1></h1>、<p></p>、<section></section>、<footer></footer>等含文本的块级元素也建议显式加lang属性，值与当前语言包一致（如lang="zh-Hans"）。这不是冗余——浏览器和辅助技术按每个元素自身的lang决定标点宽度、连字规则和语音语调。已有特殊lang的元素（如<pre class="brush:php;toolbar:false;" lang="bash"></pre>）则保留原值，这是合法的多语言混排场景。
预留动态内容插入点并绑定翻译时机
AJAX弹窗、分页表格、懒加载模块等动态插入的内容，不会自动响应语言切换。骨架设计时就要考虑：在插入新DOM后，立即调用翻译函数遍历其内部所有data-i18n节点。不要依赖MutationObserver自动监听，它无法保证执行顺序和上下文完整性。推荐做法是在插入操作完成后，显式触发一次translateNode(newElement)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
