原生 HTML 元素展示 · Classless CSS Demo
本页展示了常见 HTML 语义标签在不同无类（Classless）CSS 框架下的渲染效果。无需任何 CSS 类名，纯语义 HTML 即可获得美观样式。
📝 文字排版
这是一段正文段落。好的排版框架会为 粗体、斜体、下划线、删除线、高亮文本 以及 行内代码 提供美观的默认样式。
「优秀的 CSS 框架就像好的排版设计——当你注意不到它时，它做得最好。」
🔢 标题层级
一级标题 H1
二级标题 H2
三级标题 H3
四级标题 H4
五级标题 H5
六级标题 H6
📋 列表
无序列表
- Classless CSS 框架
- 无需添加任何 class 名称
- 纯语义 HTML
- 快速原型开发
- 适合文档、博客、MVP
有序列表
- 引入一行 CSS CDN 链接
- 编写语义化 HTML
- 获得美观默认样式
- 按需覆盖 CSS 变量
定义列表
- Classless CSS
- 不需要在 HTML 中添加 class 属性即可美化页面的 CSS 框架。
- 语义化 HTML
- 使用具有明确含义的 HTML 标签（如 article、section、nav）来组织内容。
📊 表格
| 框架名称 | 大小 | Stars | 特色 |
|---|---|---|---|
| Pico CSS | ~10KB | ⭐ 13.5k | 暗色模式、CSS 变量、完整组件 |
| Milligram | ~2KB | ⭐ 13.1k | 极简栅格、轻量、快速 |
| Water.css | ~2KB | ⭐ 8.2k | 浅/深色主题、无障碍友好 |
| MVP.css | ~3.5KB | ⭐ 5.0k | MVP 快速落地、博客风格 |
| Simple.css | ~4KB | ⭐ 4.2k | 干净、自动暗色、响应式 |
| Sakura | ~3KB | ⭐ 3.7k | 柔和粉色风格、阅读体验 |
| new.css | ~4.8KB | ⭐ 2.4k | 现代、系统字体、极简 |
| matcha.css | ~8KB | ⭐ 2.3k | Drop-in、高度可定制、变量驱动 |
| concrete.css | ~1KB | ⭐ 1.1k | 超轻量、工业风格 |
| magick.css | ~4KB | ⭐ 900+ | LaTeX 风格、学术排版 |
| 赫蹏 Heti | ~8KB | ⭐ 800+ | 中文排版专用、汉字间距优化 |
📝 表单元素
💻 代码块
<!-- 一行引入，立即美化 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
/* 用 CSS 变量轻松定制 */
:root {
--pico-primary: #4CAF50;
--pico-font-size: 18px;
}🖼️ 媒体与其他元素
展开查看更多信息
这是折叠内容区域。<details> 和 <summary> 是原生 HTML 折叠组件，无需 JavaScript。
CSS · Ctrl + C · 上标 · 下标 ·
⚠️ 提示 / 引用
注意：不同框架对<blockquote>、<details>等元素的样式支持程度不同。切换框架时部分元素可能无明显变化，这是正常现象。
本演示页仅通过 CDN 加载各框架，加载速度受网络环境影响。所有 Star 数据为 2025 年初统计，实际数量请以 GitHub 为准。