实现HTML页面多语言适配有五种方案：一、data属性+JS动态替换；二、CSS类控制双语DOM显隐；三、引入i18next等轻量库；四、服务端渲染协同客户端识别；五、hreflang标签+独立语言子页面。
如果您希望同一个HTML页面根据用户偏好或手动选择显示中文或英文内容，则需要实现多语言适配逻辑。以下是几种可独立实施的多语言切换方案：
一、基于data属性与JavaScript动态替换文本
该方法通过为每个可翻译的HTML元素添加统一的data-key属性，配合预定义的中英文映射对象，在切换语言时批量更新textContent或innerHTML。
1、在HTML中为需翻译的元素添加data-i18n属性，例如：<p data-i18n="welcome">欢迎访问</p>。
2、在JavaScript中定义双语映射对象：const i18n = { zh: { welcome: "欢迎访问" }, en: { welcome: "Welcome to our site" } };。
立即学习“前端免费学习笔记（深入）”；
3、编写切换函数，遍历所有[data-i18n]元素，根据当前语言获取对应值并赋给element.textContent。
4、为语言切换按钮绑定事件，调用该函数并持久化用户选择至localStorage。
二、使用CSS类控制显隐+预置双语DOM节点
该方法预先在HTML中同时写入中英文两套内容节点，通过切换容器的lang类或data-lang属性，配合CSS规则控制仅显示对应语言的内容。
1、为每个文本区域包裹一个容器，内部放置两个子元素，分别添加class="zh"和class="en"。
2、在CSS中定义：[data-lang="zh"] .zh { display: block; } [data-lang="zh"] .en { display: none; } [data-lang="en"] .zh { display: none; } [data-lang="en"] .en { display: block; }。
3、通过JavaScript修改
或根容器的data-lang属性值为"zh"或"en"。4、将用户选择的语言存入localStorage，并在页面加载时读取该值并应用初始data-lang属性。
三、引入轻量级i18n库（如i18next）并配置JSON资源文件
该方法借助成熟库管理语言包加载、插值、复数等能力，支持异步加载语言资源，适合中大型项目维护。
1、通过script标签引入i18next.min.js，或使用ES模块方式导入。
2、初始化i18next，指定fallbackLng为"zh"，resources包含zh和en两个键，每个键下含translation对象。
3、在HTML中使用data-i18n属性标记文本节点，例如：<h2 data-i18n="title"></h2>。
4、调用i18next.init()后，执行i18next.translate(document.body)完成全页翻译；语言切换时调用i18next.changeLanguage("en")。
四、服务端渲染语言版本+客户端Cookie/URL参数协同识别
该方法由服务器根据Accept-Language请求头或URL路径（如/example/en.html）返回对应语言的HTML，客户端仅做轻量同步与缓存。
1、配置Web服务器（如Nginx或Express）按请求路径前缀或Cookie中的lang字段匹配静态HTML文件或模板渲染逻辑。
2、在HTML中嵌入初始语言标识，例如：。
3、前端JavaScript读取document.documentElement.lang，并据此初始化语言切换控件的默认状态。
4、当用户点击切换按钮时，向服务端发送带lang参数的重定向请求，或设置Cookie后触发页面刷新。
五、使用HTML的hreflang link标签+独立语言子页面
该方法不依赖JavaScript，完全通过多个物理HTML文件与标准link标签声明语言关系，由浏览器或搜索引擎识别首选语言。
1、创建index-zh.html和index-en.html两个独立页面，各自包含完整结构与对应语言内容。
2、在每个页面的
中添加互指link标签：<link rel="alternate" hreflang="zh" href="index-zh.html">与<link rel="alternate" hreflang="en" href="index-en.html">。
3、在页面顶部提供显式语言切换链接：<a href="index-zh.html">中文</a> | <a href="index-en.html">English</a>。
4、注意：此方案无法实现单页无刷新切换，但兼容性最高，对SEO最友好。
