Hvad er HTML-visningen?
Vil du se, hvordan din HTML ser ud uden at starte en server? Det er præcis, hvad dette værktøj gør. HTML-visningen tager din HTML (HyperText Markup Language) og renderer den live i en forhåndsvisning ved siden af koden.
Uanset om du prototyper en landingsside, fejlsøger en e-mailskabelon eller blot kontrollerer, at din kode er korrekt, giver dette værktøj øjeblikkelig visuel feedback. Ingen grund til at gemme filer eller starte en lokal server.
Alt kører i din browser. Din HTML sendes aldrig til vores servere. Det er hurtigt, gratis og privat.
Sådan bruger du HTML-visningen
Følg disse trin for at vise og arbejde med HTML.
Indsæt HTML eller indlæs et eksempel
Indsæt HTML i venstre editor. Det kan være en komplet side med <html>-, <head>- og <body>-tags eller bare et fragment. Klik på Eksempel for at indlæse eksempel-HTML.
<div style="font-family: Arial, sans-serif; padding: 20px;">
<h1 style="color: #333;">Hej Verden</h1>
<p>Dette er en <strong>HTML-eksempelside</strong>.</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>Forhåndsvisningen opdateres automatisk, mens du skriver.
Se live-forhåndsvisning
Højre panel renderer din HTML direkte. Du ser præcis, hvordan browseren fortolker din kode — stilarter, layout, billeder og alt andet. Forhåndsvisningen er isoleret i en iframe.
Juster og iterer
Rediger HTML i venstre panel og se, hvordan forhåndsvisningen opdateres i realtid. Træk i skillelinjen for at justere panelstørrelser.
Del dit arbejde
Klik på Del for at generere et delbart link til din HTML.
Hvornår du bruger dette
Prototype UI-fragmenter
Vil du hurtigt teste en knapstil, kortlayout eller navigationslinje? Indsæt HTML her og se direkte, hvordan det renderes.
Fejlsøge e-mailskabeloner
E-mail-HTML er særligt problematisk — inline-stilarter, tabellayouts, mærkelig renderingsadfærd. Indsæt din skabelon her for at se, hvordan den ser ud, inden du sender.
Lære HTML
Hvis du lærer HTML, er dette værktøj perfekt til at eksperimentere. Skriv tags, se, hvad de gør. Test forskellige attributter og kontroller resultatet direkte.
Gennemse kodefragmenter
Fik du et HTML-fragment via Slack eller i en PR-kommentar? Indsæt det her for at se, hvordan det faktisk ser ud.
Ofte stillede spørgsmål
Gemmes min HTML nogen steder?
Nej. Alt kører helt i din browser med JavaScript. Din HTML forlader aldrig din computer, medmindre du eksplicit klikker på "Del".
Understøtter den CSS og JavaScript?
Ja. Inline-stilarter og <style>-tags renderes korrekt. JavaScript i <script>-tags kører i den isolerede iframe-forhåndsvisning.
Er forhåndsvisningen sikker?
Forhåndsvisningen renderes i en isoleret iframe, der adskiller den fra hovedsiden.
Kan jeg bruge komplette HTML-dokumenter?
Selvfølgelig. Du kan indsætte et komplet HTML-dokument med <!DOCTYPE html>, <html>, <head> og <body>, eller bare et fragment som en <div>.
Hvordan fungerer live-forhåndsvisningen?
Mens du skriver i editoren, opdaterer værktøjet forhåndsvisnings-iframen med HTML-indholdet efter en kort 300 ms-forsinkelse.
Kan jeg ændre størrelsen på editor- og forhåndsvisningspanelerne?
Ja. Træk separatorlinjen mellem de to paneler for at justere deres størrelser. På mobile enheder stakkes panelerne vertikalt.
Andre HTML- og opmærkningsværktøjer
Denne visning er fremragende til at forhåndsvise HTML, men nogle gange har du brug for andre ting: