lang属性必须与请求路径严格匹配，如访问/zh/about.html时，须服务端实时注入，不可js延迟设置；否则::lang(zh)失效、拼写检查错乱、safari光标异常，且rtl布局需用margin-inline-start等逻辑属性替代物理方向属性。
lang属性必须与路径严格匹配，否则语义失效
访问/zh/about.html时，必须真实存在，不能靠JS注入或模板变量延迟渲染。漏掉这步，::lang(zh)伪类不生效、拼写检查错乱、Safari里<input>光标移动异常——这些都不是CSS问题，而是浏览器排版上下文没建立。
- 服务端解析请求路径提取语言码，映射为BCP 47标准：/zh/ →
zh-CN，/en/ →en-US - 静态托管（Vercel/Netlify）需用middleware或
_redirects注入，不能只靠构建时硬编码 -
lang="zh"或lang="cn"是无效值，必须写zh-CN、zh-TW等IANA注册格式
RTL布局别碰margin-left和left: 0
阿拉伯语或希伯来语页面里，margin-left: 16px永远往屏幕左边推，跟文本流方向无关；而margin-inline-start: 16px会根据dir="rtl"自动映射为margin-right，这才是真正响应式。
- 绝对定位必须用
inset-inline-start: 8px替代left: 8px，否则下拉菜单箭头会钉在物理右侧，脱离内容起始侧 -
::before/::after的定位属性不写逻辑版，会导致“文字右对齐了，但图标还在左边” -
text-align: start必须和dir配合才有意义；单独写text-align: left在RTL下仍左对齐，违背用户预期
语义标签不是装饰，<main></main>和<nav></nav>有强制约束
<main></main>全页只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>内部；<nav></nav>只包裹有导航意图的链接集合，产品推荐、社交图标不属于它。
-
<header></header>可多次出现，但每个<section></section>或<article></article>的顶部都该有自己的<header></header>，而非全站共用一个 -
<img>的alt不能为空字符串以外的缺失——alt=""合法，alt属性完全不写则SEO权重归零 -
<time datetime="2026-06-12"></time>比单纯写“6月12日”更可靠，机器可解析时间语义
子目录结构比data-i18n更稳，别混用
静态多语言站点最稳路径是顶层语言子目录：/（默认英文）、/zh/、/ja/，每个目录下放完整翻译的HTML文件。把所有语言塞进一个HTML里，或只靠data-i18n+JSON切换，等于放弃首屏SEO、无障碍支持和状态保持。
-
/zh/contact.html里的所有链接必须以/zh/开头，不能写contact.html或../contact.html -
data-i18n只适合动态内容：AJAX加载的评论、登录后的欢迎语、实时版权年份 - 新增语言只需新建目录、复制结构、填入译文，无需改任何逻辑或构建配置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
