静态资源路径必须用相对路径，否则子路径部署必404；第三方资源须硬编码于index.html；语言包路径以HTML位置为基准，不可用import引入；lang属性影响文字渲染但不控制资源加载。
静态资源路径必须用相对路径，否则子路径部署必 404
HTML 中引用的 logo.png、style.css、main.js 等静态资源，路径解析完全依赖当前 HTML 文件所在位置。一旦项目部署到子目录（如 /app/），所有以 / 开头的绝对路径（如 /assets/logo.png）会强制指向域名根，导致 404。
常见错误现象：Failed to load resource: the server responded with a status of 404 ()，但控制台里显示请求的是 https://example.com/assets/logo.png，而实际文件在 https://example.com/app/assets/logo.png。
- 正确写法：同级就写
logo.png，上一级目录用../assets/logo.png，不加/前缀 -
./logo.png和logo.png效果一致，但前者多打字符且易误写为./ ./logo.png - 路径中禁止空格或中文——URL 编码后难调试，也容易被构建工具截断
第三方 CSS/JS 必须塞进 index.html，别放组件模板里
像 bootstrap.css、fontawesome.min.js 这类全局依赖，不能写在 React 组件的 .jsx 或 Angular 的 component.html 里。构建工具（如 Vite、Webpack CLI）在编译阶段会静态分析 HTML 入口，但无法解析 JS 变量拼接的路径。
典型报错：NG2008: Could not find stylesheet file 或 Error: Cannot resolve 'xxx.css'，因为 <link href="{{cdnUrl}}/bootstrap.css"> 在构建时根本没值。
立即学习“前端免费学习笔记（深入）”；
- 全部第三方资源统一放进
index.html的<head>或<body>底部 - CN 地址直接硬编码，如
https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css，不要动态拼接 - 如果用了多语言 HTML 模板（如
index.en.html），每个模板都得单独维护这些链接，别指望共用
语言包 JSON 文件的加载路径要和 HTML 入口对齐
语言包（如 zh.json、en.json）是运行时 fetch 的资源，它的路径解析基准不是 JS 文件位置，而是当前 HTML 页面 URL。如果 index.html 在根目录，fetch('lang/zh.json') 就去 /lang/zh.json；如果页面是 /admin/index.html，那 same-origin 请求默认发向 /admin/lang/zh.json。
容易踩的坑：本地开发用 file:// 协议时，fetch 会因跨域失败；上线后路径错位，返回 404 或空 JSON。
- 推荐把语言包放在与
index.html同级的lang/目录下，保持路径稳定 - 避免用
import方式引入 JSON（如import zh from './lang/zh.json'），这会让语言包被打包进主 JS，无法按需加载或热更新 - 若用
html-webpack-plugin多语言输出，每个 HTML 模板对应的语言包路径需显式配置，不能靠相对路径自动推导
HTML 的 lang 属性和静态资源无关，但影响字体回退与可访问性
<html lang="zh-CN"> 不控制图片或 CSS 加载，但它决定浏览器如何渲染文字——字体 fallback 顺序、标点间距、拼写检查默认词典、屏幕阅读器发音规则。混排英文术语或代码块时，必须给局部元素显式加 lang，比如 <pre lang="bash">curl -X POST</pre>。
常见误区：以为改了 document.documentElement.lang 就能“批量切换所有文字语言”，其实这只是改了根节点，已渲染的子元素不会继承变更，屏幕阅读器仍按旧上下文朗读。
- 切换语言时，除了更新文本内容，必须同步重设
document.documentElement.lang - 动态插入的 DOM（如弹窗、表单提示）也要手动设置
lang属性，否则辅助技术识别错乱 - 不要用
lang控制 CSS 显示隐藏（如[lang="en"] .cn-only { display: none }），SEO 不收录、可访问性差，且无法支持插值等动态文案
