codepen中纯html测试需删去doctype/html/head/body等外层标签，仅留body内内容；外部资源须通过settings添加，避免file://协议限制和加载时机错误。
不需要装任何软件，打开浏览器就能跑 HTML、改结构、看效果、查错误——这事现在真能“零配置”做到，但关键得选对工具、避开几个默认陷阱。
CodePen 里写完 HTML 不渲染？检查这三处
常见现象是粘贴了完整 HTML 代码（含 和 <code> 标签），结果右侧面板空白或只显示文本。CodePen 默认把 HTML 面板内容当作 内容注入，不会解析顶层结构标签。
- 删掉
、<code>、、这些外层包裹，只留<h1>Hello</h1>这类内容 - 如果必须测试
<meta>或<title></title>，点 CodePen 右上角 Settings → HTML → 在 “Stuff for ” 输入框里填入 - 引入外部 CSS/JS 时，别用本地
./style.css路径，得填 CDN 地址或用 Settings → CSS/JS 选项卡添加
用浏览器开发者工具临时改 HTML，为什么改完就丢？
在 Chrome 的 Elements 面板里右键某个元素 → “Edit as HTML”，输入新结构后页面立刻更新，但刷新就还原——因为这只是内存里的 DOM 快照，没写回源文件。
- 这种改法适合快速验证布局、调试响应式断点或模拟数据加载效果
- 想保留修改，得复制编辑后的内容，粘贴回你的编辑器里保存为 .html 文件
- 注意：直接在 Elements 里双击改文本，只影响 innerText；用 “Edit as HTML” 才能增删标签、改属性
- 如果改完发现样式错乱，大概率是 class 名拼错，或 CSS 选择器优先级被覆盖，切到 Styles 面板看哪条样式被划掉了
本地写好 .html 文件，双击打开却加载不了 JS？
这是 file:// 协议的限制：现代浏览器禁止从本地文件直接发起 fetch、读取本地 JSON、使用 import() 动态导入模块，控制台会报 CORS error 或 Failed to load module script。
- 最轻量解法：VS Code 装
Live Server插件，右键文件 → “Open with Live Server”，自动起http://127.0.0.1:5500/xxx.html - 命令行党可用
npx http-server（需先npm install -g http-server），进目录执行即开服务 - Python 用户可运行
python3 -m http.server 8000，然后访问http://localhost:8000/xxx.html - 千万别用
file:///path/to/index.html测试带 API 或模块功能的页面，它天生不支持
在线工具里 Vue/React 不生效？CDN 加载顺序和挂载点最容易漏
粘了 Vue 官方 CDN，写了 const app = Vue.createApp(...)，但页面空着没反应——问题往往不在语法，而在加载时机或 DOM 就绪状态。
- CDN
<script></script>标签必须放在底部，或加defer属性，否则脚本执行时#app元素还没生成 - 确保 HTML 里真有
<div id="app"></div>，且 ID 拼写和 JS 里 mount 的字符串完全一致（区分大小写） - Vue 3 的 CDN 版本默认导出的是
Vue全局对象，不是 ES 模块，别写import { createApp } from 'vue' - React 同理：CDN 提供的是
React和ReactDOM全局变量，得用ReactDOM.createRoot(document.getElementById('root')).render(...)
真正卡住人的从来不是“怎么运行”，而是“为什么没反应”——多数时候是协议限制、加载顺序、ID 拼错或框架版本不匹配，而不是代码本身写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
