Xem trước HTML trực tiếp

Trình soạn thảo HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 预览</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
      border-bottom: 2px solid #007bff;
      padding-bottom: 10px;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>欢迎使用 HTML 实时预览</h1>
    <p>在左侧编辑 HTML 代码，右侧会实时显示效果。</p>
    <button onclick="alert('按钮被点击了！')">点击我</button>
  </div>
</body>
</html>

Xem trước trực tiếp

Xem trước HTML trực tiếp

Dành cho gỡ lỗi nhanh

Quy trình nhanh

Mẹo sử dụng

Có thể bạn cũng thích

Nén HTML

Tùy chỉnh QR Code

Tạo mã QR

Tạo CSS Gradient

Tạo văn bản mẫu

Chuyển đổi đơn vị

Cắt MP3 / âm thanh

Orphan Page CSV Detector