运行 HTML、CSS 和 JS 在线

使用 HTML、CSS 和 JavaScript 编写完整的网页 - 全部在一个编辑器中完成。

介绍

现代网页采用三项核心技术构建：用于结构的 HTML、用于样式的 CSS 和用于交互的 JavaScript。我们的在线代码运行器在一个编辑器中支持所有这三个功能 - 编写一个完整的网页并立即查看它的呈现。

如何一起编写 HTML、CSS 和 JS

在我们的 HTML Code Runner 中，您可以编写包含内联 CSS 和 JavaScript 的完整 HTML 文档。以下是他们如何协同工作：

  • HTML - 定义页面的结构和内容
  • CSS - 使用 中的
  • JavaScript — 使用

示例：组合 HTML、CSS 和 JavaScript

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

您可以构建什么

  • 具有验证功能的交互式表单
  • 动画着陆页
  • 数据可视化仪表板
  • 游戏原型
  • CSS 艺术和动画
  • API连接的应用程序（获取外部数据）

多语言代码的提示

  • 将 CSS 放入 以避免 FOUC（无样式内容的闪现）
  • 将 JavaScript 放在 末尾或使用 defer
  • 使用控制台输出面板调试 JavaScript 错误
  • 通过调整浏览器窗口大小来测试响应式设计

常见问题解答

是的。使用 CSS 的链接标签和带有 src 属性的脚本标签从 CDN 加载外部资源。

是的。在 HTML 头部分包含 Bootstrap CDN 链接，所有 Bootstrap 类都将在预览中工作。

是的。包含 jQuery CDN 脚本标记，您就可以在代码中使用 jQuery 语法。

相关资源