CodePen中纯HTML测试只需在HTML栏编写内容并保持CSS/JS栏为空，预处理器选“No”，外部资源通过Settings添加，script标签可直接写但需注意执行时机和沙盒限制。
CodePen 里怎么直接写 HTML 不用配 JS/CSS？
CodePen 默认三栏（HTML/CSS/JS），但纯 HTML 测试完全不需要碰另外两栏。关键不是“怎么隐藏”，而是“别往其他栏里填东西”——空着就行，HTML 栏里写的标签会自动被渲染成页面。
常见错误是习惯性在 CSS 栏里粘贴样式、或在 JS 栏里加 document.write，结果干扰了原始 HTML 结构，导致显示异常或控制台报错 ReferenceError: document is not defined（尤其用了某些预处理器时）。
- 只在
HTML栏写内容，比如<h1>Hello</h1> <p>Test</p> - 确保左上角的 “CSS Preprocessor” 和 “JavaScript Preprocessor” 都选
No CSS Preprocessor和No JavaScript Preprocessor - 如果用了内联
style或onclick，没问题；但外部资源（如<link rel="stylesheet">）要走Settings > CSS添加，不能硬塞进 HTML 栏
怎么让 CodePen 正确解析带 script 标签的 HTML 片段？
直接在 HTML 栏写 <script>alert(1)</script> 是能运行的，但要注意执行时机和沙盒限制：CodePen 的 HTML 栏内容本质是插入到一个 iframe 的 body 中，script 默认是同步阻塞、且无法访问父页面全局变量。
立即学习“前端免费学习笔记（深入）”；
-
<script></script>写在HTML栏末尾，比写在开头更稳妥（避免操作尚未加载的 DOM） - 不要依赖
window.onload或DOMContentLoaded——CodePen 自身加载机制会让这些事件触发时机不可控；改用setTimeout延迟执行或直接内联操作 - 如果脚本里用了
fetch或localStorage，注意浏览器同源策略：CodePen 的预览 iframe 是https://cdpn.io域名，本地文件协议（file://）下打不开
为什么复制粘贴的 HTML 在 CodePen 里样式错乱？
不是 CodePen 有问题，而是你粘进去的 HTML 可能自带外部依赖：比如引用了本地路径的 CSS 文件、CDN 链接没加 https:、或者用了未声明的 Web 字体。
- 检查是否有
<link href="css/style.css">这类相对路径——CodePen 没有文件系统，必须换成绝对 URL，比如<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> - 所有外部资源（字体、图标、JS 库）统一走
Settings > CSS/JS添加，别混在HTML栏里，否则可能被解析顺序打乱 - 如果用了 CSS 自定义属性（
var(--color)）但没定义，或者用了grid布局但父容器没设display: grid，CodePen 不会报错，只会静默失效
如何快速复现别人给的 HTML 错误片段？
最省事的方式是把对方发来的完整 HTML 字符串（包括 和 <code> 标签）直接粘进 HTML 栏，然后点 Change View > Full Page 查看真实渲染效果。
- 如果对方给的是片段（比如只有
<div class="card">...</div>），别自己补头——CodePen 会自动包裹，补了反而嵌套出两个 - 遇到“空白页”，先打开浏览器开发者工具，看 Console 有没有
Uncaught SyntaxError或 Network 里 404 的资源请求 - 想对比不同版本，用 CodePen 的
Fork功能，别手动复制——Fork 后保留原始设置（预处理器、外部依赖等），避免漏掉隐藏配置
CodePen 的“简单”是有前提的：它默认帮你兜底 HTML 结构和基础环境，但一旦引入外部资源、异步脚本或 CSS 作用域规则，那些隐式行为就容易变成黑盒。最常被忽略的其实是预处理器设置和资源加载顺序——这两项不动，光调 HTML 内容，很多问题根本找不到根因。
