Deschide fișier HTML online - Viewer HTML, editor și previzualizare live

Deschide și previzualizează fișiere HTML online gratuit. Editează HTML cu previzualizare live în timp real, formatează codul și testează pagini web în siguranță în browser.

Vizualizator HTML

1502

Editor

Cod

<!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>Salut Lume!</h1>
        <p>Aceasta este o previzualizare live a codului tău HTML.</p>
        <button onclick="alert('Funcționează!')">Click aici</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>Salut Lume!</h1>
        <p>Aceasta este o previzualizare live a codului tău HTML.</p>
        <button onclick="alert('Funcționează!')">Click aici</button>
    </div>
</body>
</html>

Previzualizare

Previzualizare live

S-ar putea să ai nevoie și de asta

HTML în JSON

Convertiți structura HTML în arbore JSON.

Deschide instrumentul

Minificator/Formator HTML

Minifică sau formatează text HTML cu indentare de 2/4 spații.

Deschide instrumentul

Vizualizator Markdown

Previzualizați și editați Markdown cu vizualizare live.

Deschide instrumentul

Vizualizator XML online

Deschide, vizualizeaza si formateaza fisiere XML online cu vizualizare tip arbore si validare.

Deschide instrumentul

Cum să utilizați Vizualizatorul HTML?

Tastați sau lipiți codul HTML în panoul editorului.

Panoul de previzualizare se va actualiza automat pentru a afișa rezultatul randat.

Utilizați butoanele din bara de instrumente pentru a Copia, Șterge sau Comuta pe Ecran Complet.

Caracteristici Cheie

Previzualizare în Timp Real

Vedeți instantaneu cum se randează codul HTML în timp ce tastați.

Confidențialitate Garantată

Codul dvs. nu părăsește niciodată browserul. Toată procesarea se face local.

Design Responsiv

Utilizați vizualizarea divizată sau treceți pe ecran complet pentru o experiență de editare mai bună.

Întrebări Frecvente

Cum deschid un fișier HTML online și îi văd previzualizarea?

Lipește cod HTML sau încarcă un fișier, iar previzualizarea randată se actualizează instant. Asta face verificările rapide HTML și depanarea mai ușoare.

Pot testa CSS și JavaScript externe în acest viewer HTML?

Da. Resursele externe standard se pot încărca în previzualizare dacă politicile de securitate ale browserului permit acest lucru.