lang属性必须写在具体元素上，不能只靠；嵌入英文、阿拉伯文、日文等内容须显式声明lang="en"、lang="ar"、lang="ja"，否则语音合成、断字、rtl布局均会出错。
多语言 HTML 文档里，lang 属性不显式声明、字体没配 font-display 或 preload 缺 crossorigin，就别指望首屏文字不闪、不白、不读错。
lang 属性必须写在具体元素上，不能只靠
浏览器和屏幕阅读器靠每个元素的 lang 值决定语音合成、断字、排版方向；根节点的 lang 只是默认值，嵌入英文段落、阿拉伯用户名、日文引用时，若没加 lang="en"、lang="ar" 或 lang="ja"，语音会用中文音调读英文单词，RTL 布局也会失效。
常见错误现象：<p>用户提交了 report-2024.pdf</p> 在 dir="rtl" 容器中显示为 pdf.2024-troper（连字符和点号被 RTL 算法拉偏）；加 <bdi>report-2024.pdf</bdi> 才能隔离双向算法影响。
- 子语言切换必须用
lang属性，不是 CSSdirection或 JS 动态改 class -
<nav></nav>根节点别设lang，除非整块导航全是非主语言（极少见） - 语义标签嵌套超过三层（如
<section><article><p><span>...</span></p></article></section>），不同语言语法结构差异会导致翻译后语义漂移——这时得回退到内容建模阶段，按语言特性拆分语义单元
字体加载必须配 font-display: swap，且 <link rel="preload"> 要带 crossorigin
没设 font-display 的图标字体或品牌字体，默认走 block 行为：文字/图标先空白 100ms，再等最多 3 秒加载，失败才 fallback——这就是 FOIT（无样式文本闪白）。尤其在弱网下，用户看到的是“空白→突然跳变”，体验比用系统字体占位还差。
正确写法示例：
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.woff2") format("woff2");
font-display: swap;
}
<link rel="preload"> 若漏掉 crossorigin，哪怕字体同源，Chrome 也会直接忽略该请求——Network 面板里看不到 high Priority 请求，就是这个原因。
- 只预加载「当前导航中确定马上要用」的字体，比如首屏标题用的
Inter-Bold，别把整套字重都preload -
preload和@font-face必须共存：前者提前取资源，后者声明并应用 -
font-display: optional和preload不能混用——后者让浏览器跳过加载，preload就白写了
多语言文本分段加载需满足结构可读、内容可加载、语义对齐三要素
大段 HTML 文本不能靠 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 硬切，也不能用多个 <div> 堆砌。这样既破坏屏幕阅读器导航逻辑（读屏器靠 <code><h2></h2> 到 <h6></h6> 构建大纲），又让分块加载失去语义锚点——JS 拿到的只是 DOM 片段，但辅助技术无法识别它是一节“引言”还是一段“案例”。
真正有效的分段，必须：
-
<main></main>是的直接子元素且唯一 - 每个
<section></section>必须带<h2></h2>或更高级别标题（不能只有<p></p>） - 流式解析时要缓存状态，防止异步插入 HTML 片段导致标签断裂（比如
<section><p>...</p></section>只插入一半，DOM 就残缺）
否则分块加载仅视觉有效，而丧失辅助技术支持——视障用户无法用快捷键跳转到某节，SEO 也无法提取结构化摘要。
服务端与前端语言检测逻辑必须一致，且切换时不丢状态
纯前端靠 navigator.language 检测不可靠：用户可能改过设置，或使用隐私模式；而只依赖服务端 Accept-Language 头又无法支持 CSR 场景。最稳做法是服务端解析请求头，注入全局变量或直接设 ，前端初始化时优先读取它。
语言切换不是重载页面：window.location.reload() 会让表单清空、滚动位置丢失、第三方组件（如日期选择器）语言不同步。
- 切换前用
getComputedStyle记录当前滚动位置，更新完 DOM 后用window.scrollTo()恢复 - 遍历所有
data-i18n元素查表更新，优先用textContent；若需保留内嵌标签，用innerHTML但必须做 HTML 转义或白名单过滤 - 时间/数字字段需重建
Intl.DateTimeFormat实例，旧对象不会自动响应语言变更
最容易被忽略的是：服务端返回的 Content-Language 响应头、、hreflang 属性三者必须严格一致，错位会导致搜索引擎降权或辅助技术拒绝加载对应资源。
