如何在线运行包含CSS样式的HTML文件-html教程-PHP中文网

用codepen/jsfiddle等三栏编辑器最省事：html、css、js分栏编写，css自动注入，无需或标签；单文件需将置于内，禁用file://协议，开启“auto-updating preview”确保实时渲染。

如何在线运行包含css样式的html文件

直接用在线编辑器打开就能跑，不需要本地配置、不依赖浏览器双击行为，但必须选对工具和写法——否则样式不生效、修改没反馈、路径全报错。

用 CodePen / JSFiddle 这类三栏编辑器最省事

它们默认把 HTML、CSS、JS 拆开管理，CSS 区写的规则会自动注入到 HTML 的里，不用手动写 <link> 或 <style></style>。

粘贴 HTML 到 HTML 栏（比如 <div class="box">hello</div>）
粘贴 CSS 到 CSS 栏（比如 .box { background: #007bff; color: white; padding: 12px; }）
右侧实时渲染，改一行 CSS 立刻看到效果
避免路径问题：所有资源都托管在平台侧，@import、字体链接、图片 URL 都得是公网可访问地址

自己写单文件 HTML + 内联 `<style></style>` 也能在线跑

适合发教程、做最小示例、或快速验证某个选择器是否生效。关键是把 CSS 放进的 <style></style> 里，别漏标签、别放错位置。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<style></style> 必须在内，不能塞到里（部分浏览器会容忍，但 CodePen 等平台不保证）
不要写 <link rel="stylesheet" href="style.css"> —— 在线环境找不到你本地的 style.css

示例结构：



  <meta charset="UTF-8"><title>Test</title><style>
    body { margin: 0; font-family: sans-serif; }
    .card { background: #f8f9fa; border: 1px solid #dee2e6; }
  </style><div class="card">在线可运行</div>

别用 `file://` 协议“在线运行”

所谓“双击打开 HTML 文件”，本质是走 file:// 协议，不是在线运行，且 CSS 路径极易失效、fetch 和模块加载直接报错。

Chrome/Edge 下，<link href="css/style.css"> 会因跨域被拦截，控制台报 net::ERR_FAILED
即使 CSS 文件跟 HTML 在同一目录，相对路径 ./style.css 也大概率 404
想“假装在线”但又不想上传？用 npx http-server 或 VS Code 的 Live Server 插件起个 http://localhost 服务，这才是真正能模拟线上环境的做法

最容易被忽略的一点：在线编辑器里改完 CSS，如果预览区没反应，先看右上角有没有“Auto-updating preview”开关——关着的话得手动点刷新，不是所有平台都默认开启实时同步。