骨架屏html必须语义化、结构一致、lang/charset完备、可访问性属性显式声明、class命名隔离。否则会导致布局错位、hydration失败、屏幕阅读器无法识别、ssr渲染异常及政府验收不通过。
骨架屏不是“加个 loading 动画就完事”，它一旦嵌入后台管理系统，HTML 结构质量会直接影响布局稳定性、 hydration 一致性、屏幕阅读器识别和 SSR 渲染结果。写错一个标签或漏一个属性，轻则骨架错位、内容区滚动失效，重则在 Safari 或旧版 Electron 中整个侧边栏消失。
骨架屏 HTML 必须用语义化结构包裹
很多人直接用一堆 <div class="skeleton"> 堆出骨架，但后台系统里 header/nav/main 都是 fixed 或 flex 布局，<code><div> 没有语义边界，会导致：<ul>
<li>浏览器无法推断骨架区域与真实 <code><main></main> 的逻辑关系，document.querySelector('main') 可能返回 null
正确做法：骨架结构必须与真实 DOM 结构一一对应，且使用相同语义标签：
<main class="content-area"><!-- 骨架屏 --><section class="skeleton-list"><header class="skeleton-header"></header><article class="skeleton-item"></article></section><p><!-- 真实内容（初始 hidden）--> <section class="actual-list"><header><h2>用户列表</h2></header><article><h3>张三</h3></article></section></p></main>
lang 和 charset 缺一不可，否则骨架文字渲染异常
后台系统常含中英文混合界面，骨架屏里的占位文本（如 <span class="skeleton-text">加载中...</span>）若未声明语言和编码，会出现：
- 某些 Android WebView 下中文显示为方块（
charset不在第一行） - 语音朗读把“用户管理”读成拼音“yong hu guan li”，而非语义分词（
lang缺失或写成lang="zh"而非lang="zh-CN"） - 部分构建工具（如 html-webpack-plugin）注入骨架模板时，因原始 HTML 无
lang，导致生成的骨架节点被赋予错误默认语言
确保主 HTML 文档已严格满足：
为首行，无空格/注释-
显式声明，不省略地区码 -
<meta charset="UTF-8">是内第一个子元素
骨架元素的 alt、role 和空状态必须显式处理
后台系统常见头像、图标、状态徽标等占位元素，若忽略可访问性属性，会导致：
-
<img class="skeleton-avatar">没有alt，屏幕阅读器报“图片”，用户不知这是头像占位 - 用
<div role="button" class="skeleton-action"> 模拟操作按钮，但没加 <code>aria-label="刷新数据"，键盘用户无法理解功能 - 表格骨架中
<td> 直接留空，NVDA 会读“空白”，而真实表格此处是“待审核”，语义断裂<p>建议统一规范：</p> <ul> <li>所有骨架 <code><img>必须带alt=""（装饰性）或alt="头像占位"（功能性） - 模拟交互元素，优先用
<button disabled aria-label="加载中"></button>而非<div role="button"><li>表格骨架中，每列 <code><td> 应保留对应真实列的 <code>scope或aria-label，哪怕只写aria-label="状态列占位"class 命名必须隔离骨架上下文，避免样式污染
后台系统通常用 BEM 或 CSS-in-JS，骨架屏若直接复用
.user-card类，极易引发问题：- 真实组件样式含
transition: opacity .3s，骨架屏一上来就闪动，破坏“静态占位”本意 - 某些主题色变量（如
--primary-color）在骨架阶段未注入，导致灰色块变成亮蓝色 - 构建时 CSS 提取插件把骨架类误判为未使用，删掉后页面白屏
强制约定：
- 所有骨架专属 class 必须带
skeleton-前缀，例如skeleton-user-card、skeleton-table-row - 禁止在骨架 HTML 中引用业务 class（如
.btn-primary），可用skeleton-button+ 局部样式覆盖 - 若用 CSS Modules 或 scoped style，骨架组件必须独立文件，不与真实组件共用样式作用域
最易被忽略的一点：骨架屏的 HTML 不是“临时占位”，它是生产环境真实 DOM 的一部分——它要经受住 Lighthouse 的可访问性审计、axe 的语义检查、以及 Safari 15.6 下 fixed 布局的像素级对齐考验。写错一个
lang，就可能让整套后台在政府客户验收时被退回重做。 - 真实组件样式含
