HTML静态页面国际化与多语言适配指南-html教程-PHP中文网

lang属性必须写在标签上才起作用，浏览器、屏幕阅读器等仅依据根元素lang值识别整页主语言；局部多语言内容（如英文术语、日文引文、代码块）须显式为对应元素单独设置lang属性，不能依赖继承。

html静态页面国际化与多语言适配指南

只给加lang，对页面里夹杂的英文术语、日文引文、代码块里的curl -X POST完全无效。浏览器、屏幕阅读器、字体引擎、拼写检查器，全按**每个元素自身的lang值**工作，不是看父级继承来的。

常见错误现象：SPA切换语言后语音朗读仍是中文，标点间距不对，日文假名显示成中文字体——问题就出在没同步更新子节点的lang。

<p lang="ja">こんにちは</p>必须显式声明，不能指望根节点覆盖
<pre class="brush:php;toolbar:false;" lang="bash">npm run dev</pre>这类代码块要单独标lang，否则语法高亮工具不识别
<blockquote lang="fr">C’est la vie.</blockquote>引文不加lang，VoiceOver会用中文音读法语词
误写lang="zh_CN"或lang="chinese"会被浏览器忽略，必须用BCP 47标准格式：zh-Hans、zh-Hant、en-US

只遍历[data-i18n]并改textContent，会漏掉表单控件、提示文字、替代文本等关键内容。这些属性不归textContent管，得单独处理。

使用场景：用户切换语言后，搜索框的placeholder还是中文，图片alt没变，按钮title仍显示“Click to login”——都是因为没覆盖这些属性。

input和textarea的placeholder需用setAttribute('placeholder', value)
img的alt、area的alt、th的title都得单独查、单独设
select里的option文本不能靠父级data-i18n推断，得遍历select[data-i18n] option，查语言包中"xxx.options"数组
动态插入的DOM（如JS弹出的alert或Toast）不会自动触发翻译，必须封装t('common_error')函数手动调用

没写降级逻辑，fetch('./i18n/en-US.json')一报错，整个页面文案就留空——用户看到的是一堆data-i18n="header_title"键名，而不是“Welcome”。这不是小概率事件，网络抖动、路径写错、CORS、甚至CDN缓存失效都会触发。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

参数差异：response.ok判断HTTP状态码是否为2xx，try/catch捕获网络层异常（如TypeError: Failed to fetch），二者缺一不可。

先try fetch，再if (!response.ok)判断状态码，最后await response.json()
fallback顺序必须明确：优先用navigator.language（注意截断处理，如zh-CN→zh），其次查localStorage.lang，最后硬编码默认对象：{ header_title: "Welcome", login_btn: "Login" }
别依赖localStorage决定首次加载——用户可能清过缓存，或在新设备打开，此时navigator.language更可靠
JSON文件键名必须严格一致，哪怕某语言暂时没翻译，也要留"key": ""，否则JS查不到就留白