HTML在CodeSandbox怎么运行｜新手启动指南

CodeSandbox 让纯 HTML 项目开箱即用——只需新建“Static HTML”沙盒，确保根目录存在且仅有一个严格命名的 `index.html` 入口文件，无需任何配置、脚本或构建流程，代码即写即预览；但务必注意 HTTPS 外部资源引用、禁用 `document.write`、使用正确大小写敏感的相对路径（避免跨出项目根目录），并善用 `/public` 目录管理静态资源，避开这些高频坑，你就能丝滑享受零配置的前端实验体验。

直接打开 CodeSandbox 就能跑 HTML，不用配置

CodeSandbox 默认支持纯 HTML 项目，只要新建一个 HTML 沙盒，它就自动用 index.html 作为入口，不需要写 package.json 或启动命令。你贴进去的 HTML、CSS、JS 会立刻在预览窗里执行。

常见错误现象：Cannot find entry point 或预览空白——大概率是删了默认生成的 index.html，或改名成了 page.html 等其他文件名；CodeSandbox 只认 index.html 为入口。

• 新建沙盒时选 “Static HTML” 模板（不是 “Vanilla” 或 “React”）
• 确保根目录下有且仅有一个 index.html，内容至少包含
• 不要手动加 npm start 脚本，静态 HTML 不走 Node 启动流程

引入外部 CSS/JS 要用 HTTPS 协议

CodeSandbox 的预览页运行在 https:// 下，浏览器会阻止混合内容（HTTP 资源）。如果在 index.html 里写了 ，控制台会报 Mixed Content: The page was loaded over HTTPS，脚本直接被屏蔽。

• 所有 和 ，结果预览区只剩 “hello”，原来的内容全没了。CodeSandbox 的预览容器本身是 iframe，document.write 在页面加载完成后调用，会触发文档重写。
  • 避免在 DOM 加载完后使用 document.write
  • 改用 document.body.innerHTML += "xxx" 或 element.textContent = "xxx"
  • 如果只是调试，优先用 console.log()，它不会干扰渲染

  本地文件引用不能跨目录回退到 /sandbox

  CodeSandbox 的文件系统是沙盒化的，根目录叫 /sandbox，但你在代码里不能写 ../assets/logo.png 这种路径——因为没有上层目录。所有相对路径都从当前文件所在位置算起，且不能跳出项目根目录。

  • 图片、字体等资源建议放在 /public 目录下（新建文件夹），然后用 /public/logo.png 引用
  • 如果没建 /public，就放和 index.html 同级，用 logo.png 直接引用
  • file:// 协议完全不可用，浏览器会拒绝加载

  最常被忽略的是路径大小写和扩展名：CodeSandbox 文件系统区分大小写，IMG.PNG 和 img.png 是两个文件，404 错误不会高亮提示，只在 Network 面板里显示失败。

  今天关于《HTML在CodeSandbox怎么运行｜新手启动指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！