PE 理念：从 HTML 开始
了解以 HTML 为先为何能确保普遍可访问性
PE 理念：从 HTML 开始 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
定义渐进增强
渐进增强（PE）是一种先仅使用 HTML 构建可用体验，再逐层添加 CSS 负责呈现、JavaScript 负责交互的实践。每一层都会增强上一层；页面正常工作不依赖任何一层。
为什么从 HTML 开始
HTML 是最具韧性的层。即使格式不完整，它也能进行部分解析；遇到不理解的标签时会忽略它们，并且无需脚本或样式表即可工作。相比之下，缺少 CSS 文件会降低页面的视觉效果，而损坏的 JS 包可能使页面无法使用。
三层结构
内容（HTML）、呈现（CSS）、行为（JS）。提交按钮应是真正的 <button type="submit"> ——即使 JS 失败，表单也会提交。CSS 负责美化；JS 可以拦截提交以执行 AJAX，但底层 HTML 保证了这一操作。
<form action="/checkout" method="post">
<input name="email" type="email" required>
<button type="submit">Continue</button>
</form>故障韧性
网络会中断。脚本会加载失败。用户会禁用 JS。连接速度较慢时，脚本包到达前就可能超时。PE 页面能够优雅地应对这些情况：用户仅使用 HTML 仍然可以阅读、导航和提交。
性能收益
在脚本加载前就渲染出可用 HTML 的页面，首次内容绘制更快，可交互时间更短，核心网页指标得分也更高。浏览器无需等待 JS 启动即可显示有意义的内容。
无障碍收益
真正的 HTML 元素内置了无障碍支持。<button> 可以通过键盘激活；<input type="email"> 会使用合适的虚拟键盘；屏幕阅读器会将 <a> 宣布为链接。PE 可以免费提供无障碍的默认体验。
搜索引擎优化收益
搜索引擎爬虫更偏好无需执行 JavaScript 就能解析的 HTML。采用 PE 构建的页面无需执行 JS 就能被完整收录；纯 SPA 页面依赖爬虫对脚本的支持，而且经常会遗漏内容。
PE 与 SPA
单页应用完全在客户端呈现，当 JS 失败时会彻底无法工作。PE 则相反：服务器输出完整的 HTML，JS 再添加预取、乐观更新或就地编辑等增强功能，但始终不会接管基本功能。
鼓励采用 PE 的框架
Remix、Next.js Server Components、SvelteKit 和 Astro 都倾向于使用服务器呈现的 HTML，并通过渐进式 JS 进行增强。选择这类框架会让 PE 成为阻力最小的路径。
PE 难以应用的场景
高度交互的界面（协作编辑器、绘图应用、实时游戏）没有 JS 就无法真正存在。对于这类应用，PE 的“无 JS 回退方案”可能只是静态只读模式——虽然聊胜于无，但功能必然有所减少。请如实看待这种取舍。
核心原则
“先让它工作，再让它美观，最后让它变快。”请先构建 HTML 表单，并用 curl 验证它能够工作。再添加 CSS 负责布局。最后添加 JS，用于就地验证、乐观更新或 AJAX 提交。每一层都是可选的；组合起来，就能为所有人带来出色的体验。
知识检查
渐进增强的核心承诺是什么？
总结
渐进增强从无需 CSS 或 JS 即可工作的语义化 HTML 开始，然后逐层添加 CSS 负责呈现、JS 负责交互。每一层都是可选的；即使发生故障，页面也能优雅降级。PE 在性能、无障碍、搜索引擎优化和韧性方面都有优势，但对于高度交互的应用，需要在前期投入更多设计工作。
常见问题解答
「PE 理念：从 HTML 开始」课时是免费的吗？
是的 — 「PE 理念：从 HTML 开始」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「PE 理念：从 HTML 开始」这节课中我会学到什么？
了解以 HTML 为先为何能确保普遍可访问性 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「PE 理念：从 HTML 开始」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- PE 理念：从 HTML 开始
- 功能检测与浏览器嗅探
- 优雅降级与渐进增强
- 构建 PE 手风琴组件