Mở tệp HTML online - HTML viewer, trình chỉnh sửa & live preview

Mở và xem trước tệp HTML online miễn phí. Chỉnh sửa HTML với live preview thời gian thực, định dạng mã và kiểm thử trang web an toàn trong trình duyệt.

Trình xem HTML

1503

Trình biên tập

Mã

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Xin chào thế giới!</h1>
        <p>Đây là bản xem trước trực tiếp mã HTML của bạn.</p>
        <button onclick="alert('Nó hoạt động!')">Bấm vào đây</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Xin chào thế giới!</h1>
        <p>Đây là bản xem trước trực tiếp mã HTML của bạn.</p>
        <button onclick="alert('Nó hoạt động!')">Bấm vào đây</button>
    </div>
</body>
</html>

Xem trước

Xem trước trực tiếp

Bạn có thể cũng cần

HTML sang JSON

Chuyển đổi cấu trúc HTML sang cây JSON.

Mở công cụ

Trình thu nhỏ/định dạng HTML

Thu nhỏ hoặc định dạng văn bản HTML với thụt lề 2/4 khoảng trắng.

Mở công cụ

Trình xem Markdown

Xem trước và chỉnh sửa Markdown với trực quan hóa trực tiếp.

Mở công cụ

Trinh xem XML truc tuyen

Mo, xem va dinh dang tep XML truc tuyen voi che do cay va xac thuc.

Mở công cụ

Cách sử dụng Trình xem HTML?

Nhập hoặc dán mã HTML của bạn vào khung biên tập.

Khung xem trước sẽ tự động cập nhật để hiển thị kết quả được hiển thị.

Sử dụng các nút trên thanh công cụ để Sao chép, Xóa hoặc Chuyển đổi Toàn màn hình.

Các Tính năng Chính

Xem trước Thời gian thực

Xem ngay lập tức cách mã HTML của bạn được hiển thị khi bạn nhập.

Quyền riêng tư là trên hết

Mã của bạn không bao giờ rời khỏi trình duyệt. Tất cả quá trình xử lý được thực hiện cục bộ.

Thiết kế Đáp ứng

Sử dụng chế độ xem chia đôi hoặc chuyển sang toàn màn hình để có trải nghiệm chỉnh sửa tốt hơn.

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

Làm thế nào để mở tệp HTML online và xem trước?

Dán mã HTML hoặc tải tệp lên, bản xem trước render sẽ cập nhật ngay. Điều này giúp kiểm tra HTML nhanh và debug dễ hơn.

Tôi có thể kiểm thử CSS và JavaScript bên ngoài trong HTML viewer này không?

Có. Các tài nguyên ngoài tiêu chuẩn có thể tải trong bản xem trước nếu chính sách bảo mật trình duyệt cho phép.