HTML Effectiveness 是一套展示 HTML 作为灵活输出格式的独立示例合集，采用 Apache 2.0 许可，当前版本 1.0.0。它收集了从代码评审、设计系统到幻灯片、状态报告等多个场景的自包含 HTML 页面。
一、项目简介
该项目由作者 ThariqS 维护，作为博客文章的配套示例，每个文件是零依赖、无需构建的单个 HTML 页面。仓库地址 https://github.com/ThariqS/html-effectiveness 。
二、项目功能
1. 分类示例
按探索、代码、原型、沟通、图表研究、自定义编辑等类别整理。
2. 自包含页面
每个页面无需安装构建，直接浏览器打开即可，示例数据均为虚构。
3. 用途覆盖
覆盖代码评审、设计系统、幻灯片、状态报告、流程图与交互编辑器等场景。
三、项目亮点
HTML Effectiveness 展示了 HTML 作为通用输出格式的灵活用法。对做文档与界面设计的开发者较有参考价值。
对比 Markdown
对比 HTML 示例和 Markdown 文档，差异在表达力。HTML 页面可内嵌交互与样式，Markdown 受渲染器限制。
| 对比项 | HTML 示例 | Markdown |
|---|---|---|
| 表达 | 样式交互丰富 | 受限制 |
| 运行 | 浏览器直开 | 需渲染 |
| 用途 | 展示与原型 | 文档编写 |
四、项目结构
项目以目录文件组织，index.html 为分类总入口，编号文件对应不同用例，结构简洁便于浏览。
五、技术栈
- 纯 HTML 单文件
- 无构建依赖
- 样例数据虚构
- 许可 Apache 2.0
项目由作者 ThariqS 维护，最后更新 2026 年，作为示例不持续维护。仓库地址 https://github.com/ThariqS/html-effectiveness 。
六、本地快速部署启动
方式一 直接浏览
git clone 后用浏览器打开 index.html 或任意编号文件。
方式二 参考复用
把合适页面复制改造为项目原型，或作为设计参考。
方式三 对比学习
对比各分类示例，理解 HTML 在不同场景的布局与交互实现。
适用场景与建议
适用场景方面，它适合前端与产品开发者在原型设计时参考，也适合学习如何用纯 HTML 快速表达想法。示例为样例数据，可放心借鉴结构与写法。需要时可自行扩展新类别。
国内加速与备份
国内访问较慢时可用 ghfast.top 等镜像加速前缀，更详细的部署说明可扫码获取本站备份。备份包版本 v1.0.0，文件校验 sha256 fdae231fcbb00d89566796acf0431e6b5dad3b7636a0ff42e409747c07846e60 。
七、项目代码地址
项目代码地址 https://github.com/ThariqS/html-effectiveness 。
常见问题
问. HTML Effectiveness 是什么
它是展示 HTML 作为独立输出格式的示例合集，覆盖多种使用场景。
问. 怎么使用
克隆后用浏览器打开 index.html 或任一示例文件即可。
问. 和 Markdown 有什么区别
对比 Markdown，HTML 表达更丰富，可直接在浏览器呈现交互与布局。
问. 是否开源
项目以 Apache 2.0 协议开源，可自由使用。
