HTML网页单页应用骨架屏基础代码-html教程-PHP中文网

骨架屏不能用纯css实现是因为其核心是结构模拟，必须用html元素占位以复现真实dom的尺寸、布局和层级，否则会导致页面跳动；纯css动画无法提供准确的结构占位。

html网页单页应用骨架屏基础代码

骨架屏为什么不能用纯 CSS 实现加载状态

纯 CSS 的 loading 动画（比如旋转、闪烁）无法反映真实 DOM 结构的占位，用户感知不到“哪块内容还没出来”，容易误点或困惑。骨架屏的核心是结构模拟——它得和最终渲染的容器尺寸、布局、层级一致，否则一上屏就跳动、错位。

所以必须用 HTML 元素占位，配合 CSS 控制视觉效果。常见错误是直接在 div 上加 background: linear-gradient(...) 就完事，结果文字区域没留高、图片宽高没设、flex 布局没复现，加载后整个区块“弹跳”。

必须复现目标区域的盒模型：width/height、padding、margin、display（尤其是 flex 或 grid）
图片占位需固定宽高比，推荐用 aspect-ratio 或伪元素 + padding-top 技巧
文字行高、行数要匹配，用多个 span 模拟段落，每个加 display: block 和 height

如何用最简 HTML + CSS 写出可复用的骨架组件

不要写一堆独立 class，把骨架逻辑封装成语义化结构。例如一个文章卡片骨架，用 <article class="skeleton-card"></article> 包裹，内部结构固定：

<article class="skeleton-card"><div class="skeleton-img"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-paragraph"></div>
  <div class="skeleton-paragraph short"></div>
</article>

对应 CSS 只需控制三类样式：容器、媒体占位、文字占位。关键点：

.skeleton-img 必须设 aspect-ratio: 16/9 或 padding-top: 56.25% 防止重排
.skeleton-title 用 height: 1.5em + line-height: 1.5 模拟单行标题
.skeleton-paragraph 用 height: 1em * 行数，margin-bottom 对齐真实段落间距
所有占位元素统一加 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) 和 background-size: 200% 200% 实现流动效果

Vue/React 中怎么切换骨架屏和真实内容

核心原则：骨架屏和真实内容必须共用同一容器，且不触发 layout shift。常见错误是用 v-if 或 {loading ? <skeleton> : <content>}</content></skeleton> 导致 DOM 替换，骨架消失瞬间页面塌陷。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确做法是用条件渲染但保持容器稳定：

Vue：用 v-show 控制 <skeleton></skeleton> 显隐，真实内容始终在 DOM 中（哪怕空），靠 v-if 控制其数据绑定
React：用 opacity + pointer-events: none 过渡，避免 display: none；或者用 aria-hidden 配合 visibility: hidden 保留占位
务必给容器设 min-height 或 height，防止骨架未加载时高度为 0

示例 React 片段：

<div classname="card-container" style="{{" minheight:>
  <skeletoncard visible="{loading}"></skeletoncard><contentcard data="{data}" aria-hidden="{loading}"></contentcard>
</div>

移动端适配骨架屏容易被忽略的细节

PC 端写的骨架屏，到手机上常出现文字过小、图片变形、行间距错乱。根本原因不是响应式没写，而是骨架元素没继承父级字体缩放或视口单位行为。

避免用 px 固定文字高度，改用 em 或 rem，让 .skeleton-paragraph 的 height 跟随根字号变化
图片占位的 aspect-ratio 在 iOS Safari 15.4+ 才支持，旧版本必须回退到 padding-top 百分比方案
禁用骨架屏上的 user-select: none，否则 iOS 双击放大失效；改用 pointer-events: none 控制交互
加载完成时，移除骨架前确保真实内容已 layout 完成，否则可能闪白——可在 useEffect 或 mounted 里加 requestAnimationFrame 延迟隐藏