Trình xem HTML

Viết hoặc dán HTML và xem kết quả hiển thị ngay lập tức trong trình duyệt.

Bố cục:Script được sandbox và không thể chạy.

Mã HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Xem trước

Giới thiệu công cụ

Trình xem HTML cho phép bạn viết hoặc dán mã HTML và xem ngay cách nó hiển thị trong trình duyệt. Bản xem trước được hiển thị trong iframe sandbox với script bị tắt, để bạn có thể xem trước HTML từ nguồn không đáng tin cậy một cách an toàn.

Công cụ hỗ trợ tài liệu HTML đầy đủ (với head, CSS nội tuyến và khối style) cũng như các đoạn HTML. Tất cả xử lý diễn ra cục bộ trong trình duyệt của bạn.

Cách sử dụng

Nhập hoặc dán HTML vào trình soạn thảo mã ở bên trái.
Nhấp Hiển thị để cập nhật bản xem trước.
Chuyển sang bố cục Xếp chồng để có vùng xem trước cao hơn.
Sử dụng Tab để thụt lề dòng trong trình soạn thảo.

Trường hợp sử dụng

Lập trình viên frontend kiểm tra nhanh các đoạn HTML. Lập trình viên email xem trước mẫu HTML. Học sinh học HTML thử nghiệm với các thẻ và xem kết quả ngay lập tức. Người kiểm duyệt mã xác minh đầu ra hiển thị trực quan.

Câu hỏi thường gặp

Tại sao script bị tắt? — iframe xem trước sử dụng sandbox="allow-same-origin" để chặn thực thi JavaScript, cho phép xem trước HTML từ nguồn không xác định một cách an toàn.
Tôi có thể xem trước CSS không? — Có. Thêm thẻ style vào HTML hoặc dùng inline styles. Stylesheet ngoài từ domain khác có thể bị chặn bởi CSP.
Có hỗ trợ tài liệu HTML đầy đủ không? — Có. Bạn có thể dán tài liệu HTML đầy đủ bao gồm DOCTYPE, head và body.