HTML5多语言网站手动切换语言有五种方式：一、用data属性+JS动态替换文本；二、动态加载JSON语言文件；三、利用lang属性配合CSS伪类；四、基于URL参数自动识别语言；五、用Intl.Locale结合data-locale语义化标记。
如果您正在构建一个HTML5多语言网站，并希望用户能手动切换界面语言，则需要通过动态加载对应语言资源或修改DOM文本内容来实现语言变更。以下是几种可行的实现方式：
一、使用data属性与JavaScript动态替换文本
该方法通过为页面元素添加带语言标识的data属性，预先存储各语言的文本内容，切换时读取对应语言键值并更新innerHTML。
1、在HTML元素中添加多语言数据属性，例如：<p data-i18n="welcome">Hello</p>，同时在script中定义语言包对象，如{en: {welcome: "Hello"}, zh: {welcome: "你好"}}。
2、编写切换函数，接收目标语言代码（如"zh"），遍历所有含data-i18n属性的元素。
立即学习“前端免费学习笔记（深入）”；
3、对每个元素，读取其data-i18n值作为键，在当前语言包中查找对应文本。
4、将查得的文本赋值给元素的textContent或innerHTML属性。
5、将语言代码保存至localStorage，确保刷新后仍保持上次选择的语言。
二、通过动态加载外部JSON语言文件
该方法将各语言文本独立存放为JSON文件（如lang/en.json、lang/zh.json），按需异步加载，避免初始页面体积过大。
1、创建结构一致的JSON文件，例如zh.json内容为{"header": "欢迎", "submit": "提交"}。
2、使用fetch()请求对应语言的JSON文件，设置响应类型为json。
3、成功获取后，遍历DOM中所有具有data-i18n-key属性的节点。
4、根据节点的data-i18n-key值，在加载的语言对象中查找对应文本。
5、调用element.textContent = translatedText完成替换，并更新html元素的lang属性为当前语言代码，例如。
三、利用HTML5 lang 属性配合CSS伪类与content切换
该方法适用于静态文本较少、且仅需切换少量提示性文字的场景，通过CSS的:lang()伪类与attr()函数控制显示内容，无需JavaScript干预。
1、在标签上设置初始lang属性，如。
2、为需多语言支持的元素添加唯一id和data-i18n属性，例如<span id="btn-submit" data-i18n></span>。
3、在CSS中为不同语言定义规则，如html:lang(en) #btn-submit::before { content: "Submit"; }与html:lang(zh) #btn-submit::before { content: "提交"; }。
4、切换语言时仅修改document.documentElement.lang值，例如document.documentElement.lang = "zh"。
5、确保所有目标元素的content均由CSS控制，且不依赖内联文本。
四、基于URL参数自动识别并应用语言
该方法通过解析当前URL中的语言参数（如?lang=ja）决定初始语言，并同步更新页面文本及lang属性，提升SEO与分享一致性。
1、在页面加载时读取window.location.search，使用URLSearchParams提取lang参数值。
2、校验该值是否属于预设支持的语言列表（如["en", "zh", "ja", "ko"]），否则回退至浏览器navigator.language前两位。
3、将校验后的语言代码写入document.documentElement.lang。
4、触发一次语言包加载或映射替换流程，确保DOM中文本与URL参数一致。
5、为所有语言切换按钮绑定点击事件，点击后构造新URL（保留原有参数，仅更新lang），调用window.history.replaceState()更新地址栏而不刷新页面。
五、使用Intl.Locale与document.querySelector结合语义化标记
该方法利用HTML5原生国际化API识别用户区域偏好，并结合语义化data-locale标记精准匹配多语言节点，增强可访问性与维护性。
1、为每段多语言内容包裹在<span data-locale="en">Sign in</span><span data-locale="zh">登录</span>结构中。
2、初始化时调用new Intl.Locale(navigator.language || "en")获取标准化语言标识。
3、执行document.querySelectorAll('[data-locale]')获取全部语言标记节点。
4、遍历结果，隐藏所有data-locale值不等于当前语言代码的节点，仅显示匹配项。
5、将当前语言代码写入localStorage，并在后续页面加载时优先读取该值而非navigator.language。
