必须先将HTML上传至CodePen生成pen ID，再复制官方embed代码；不可手动拼接URL，否则404；embed中data-slug-hash和data-user不可修改，src的default-tab、data-height、data-theme-id可调，本地file://协议不支持，需HTTP(S)环境。
HTML怎么转CodePen embed：直接拿embed代码，别自己拼URL
CodePen不提供“把一堆HTML一键转成embed”的功能，它只认自己平台上的pen。你手头有纯HTML文件或代码片段，想嵌到博客、文档或内部系统里？必须先上传到CodePen，再复制它的embed代码——没有捷径。
常见错误是手动拼https://codepen.io/embed/pen/xxx，结果404。CodePen的embed URL不是靠HTML内容生成的，而是由pen的唯一ID（比如qBZvzZz）决定的，这个ID只在pen创建后才存在。
- 打开CodePen官网，点
New Pen，粘贴你的HTML/CSS/JS - 填好
Title和Description（非必须，但缺了可能影响SEO或团队协作） - 点右上角
Save（或Ctrl+S），等左上角出现绿色提示“Saved!”，说明pen已生成并分配ID - 点
Export→Embed，复制弹出框里的<iframe>代码
embed代码里哪些参数能改、哪些不能动
CodePen给的<iframe>默认带一堆data-属性和src参数，不是所有都能乱调。改错一个，轻则样式错位，重则完全不加载。
-
src里的default-tab可以安全改成html、css、js或result，控制默认显示哪个面板 -
data-height和data-theme-id可改，前者影响高度（建议设为400起，不然result区常被截断），后者换主题（dark对应1，light对应2） -
data-slug-hash和data-user绝不能删或手改——它们是pen身份凭证，改了就404 - 删掉
data-preview="true"会让嵌入页失去实时预览按钮，但不影响运行；加上反而可能在某些CMS里触发沙箱拦截
为什么嵌入后页面空白或报CORS错误
不是你的HTML有问题，大概率是环境限制或embed配置冲突。CodePen的embed本质是跨域iframe，浏览器和宿主系统会严格校验来源。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 本地用
file://直接打开HTML？必然失败——CodePen embed要求页面必须走http://或https://协议，连localhost都得配web server（比如用python3 -m http.server） - 公司内网或某些CMS（如Confluence旧版）默认禁用第三方
iframe，需管理员开启X-Frame-Options或Content-Security-Policy白名单，放行https://codepen.io - 如果嵌入页本身开了
strict-dynamic脚本策略，CodePen的inline JS可能被拦，此时只能换方案（比如用<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>替代iframe）
不想传到CodePen？这些替代方案更可控
如果你的HTML含敏感逻辑、依赖私有API，或公司政策禁止外传代码，硬塞CodePen反而添麻烦。这时候embed不是唯一解。
- 用
iframe直接套自己服务器上的HTML文件（如src="/demos/chart-demo.html"），完全自主，无跨域风险（同源前提下） - 前端框架项目（React/Vue）里，把HTML片段转成组件，用
dangerouslySetInnerHTML或v-html渲染（注意XSS过滤） - 静态站生成器（Hugo/Jekyll）支持
{% raw %}{% include %}{% endraw %}语法，把HTML存成独立文件再引用，编译时直接内联
真正卡住人的从来不是怎么嵌，而是没想清楚：这段HTML要不要被所有人看到？需不需要动态数据？是否要和宿主页面交互？这些问题的答案，比选iframe还是script embed重要得多。
