De 7 bästa gratis HTML -redaktörerna online för att testa din kod

De 7 bästa gratis HTML -redaktörerna online för att testa din kod

Varje webbplats du använder är beroende av HTML. Medan webbutvecklare behöver färdigheter i JavaScript, Python, CSS och scripting på serversidan, håller HTML allt ihop.





Utan HTML finns det ingen webb, så du måste veta hur du skapar och redigerar den. I stället för att installera ett HTML -kodtestsystem på din dator är det enklare att testa kod i en webbläsare.



Oavsett om det rör sig om små HTML -snuttar eller fullständiga webbplatsprojekt, är en online HTML -editor idealisk.





Varför du bör använda en online HTML -editor

Att använda en webbläsarbaserad HTML-editor är vettigt över något som Anteckningar ++ av följande skäl:

  • Online HTML -redaktörer körs direkt i din webbläsare
  • Testa din HTML-kod online --- se om koden körs som förväntat
  • Se förhandsgranskningar i realtid --- uppdateringarna av förhandsgranskningen när du redigerar
  • Effektivisera ditt arbetsflöde --- inte mer spara, ladda i webbläsaren, byta tillbaka till redigeraren och upprepa
  • Plattformsagnostiker --- de körs på alla enheter med en webbanslutning.

Denna sista punkt är mycket viktig. Det betyder att du kan tänkas utveckla en webbsida lika enkelt på en dator som en Chromebook. Du kan till och med använda en Android -surfplatta eller en $ 50 -dator som Raspberry Pi.



HTML -kodning är en lättillgänglig och enkel ingång till förståelse av programmering och utveckling. Du behöver hela tiden testa din HTML-kod --- vad passar bättre än live-resultat i ditt webbläsarfönster?

Låt oss titta på några av de bästa online -HTML -redaktörerna som för närvarande finns.



1. CodePen

CodePen är en 'social utvecklingsmiljö' för webbutvecklare, vilket i princip betyder att det är en online -redaktör med samarbetsfunktioner. Den erbjuder en enkel layout. Du hittar en panel för HTML, en panel för CSS och en panel för JavaScript, plus en för förhandsgranskning i realtid. Alla panelstorlekar kan justeras genom att dra kanterna runt.

Du kan skapa 'pennor', som är som enskilda lekplatser för att justera webbkod. Flera pennor kan grupperas i samlingar.



Även om registrering för grundläggande användning är gratis, kräver privata pennor och samlingar en Pro -konto . Detta börjar på $ 8/mån och inkluderar tillgångshost, inbyggbara teman, samarbete i realtid och tillgång till CodePens fullständiga webbutvecklings-IDE.

Många anser att CodePen är den bästa online -HTML -redigeraren. Prova det för att se om det passar dina behov.

2. JSFiddle

JSFiddle är i stort sett vad det låter som: en sandlåda där du kan leka med JavaScript. Du vet säkert att JavaScript går hand i hand med HTML och CSS. Det betyder att med JSFiddle kan du redigera alla tre samtidigt med JSFiddles redigeringsgränssnitt.

Om du vill kan du hoppa över JavaScript helt och hållet.

Det som är trevligt med JSFiddle är att du kan lägga till externa förfrågningar i sidofältet. Detta låter dig inkludera off-site JavaScript- och CSS-filer för att förbättra din HTML. Också användbar är knappen Städ, som automatiskt rensar upp din kods inryckning, medan du klickar på Samarbeta tillåter samarbete i realtid online.

Den enda nackdelen är att du måste klicka på Kör -knappen för att uppdatera förhandsgranskningspanelen.

3. JSBin

Betrakta JSBin som ett enklare och renare alternativ till JSFiddle. Du kan redigera valfri kombination av HTML, CSS och JavaScript bara genom att växla mellan panelerna med det övre verktygsfältet. För maximal flexibilitet kan du också växla förhandsgranskningspanelen och en konsolpanel efter behov.

hur man tjänar pengar med kodning

Men medan JSFiddle låter dig länka externa CSS- och JavaScript -resurser, begränsar JSBin dig till fördefinierade JavaScript -bibliotek. Valet är dock bra, allt från jQuery till React till Angular och mer.

Medan JSBin är gratis och inte kräver ett konto, behöver du en Pro -konto för avancerade funktioner. Dessa inkluderar privata fack, anpassade inbäddningar, värd för tillgångar, Dropbox -synkronisering och fåfänga -URL: er för sidor som publiceras via JSBin.

Fyra. Liveweave

Liveweave liknar visuellt de tidigare redaktörerna, med ett trevligt användargränssnitt. Precis som JSFiddle tillåter Liveweave samarbete i realtid, och precis som JSBin kan du länka in fördefinierade tredjepartsresurser som jQuery.

Men det har också några unika funktioner. Lorem Ipsum Generator skapar platshållartext vid din nuvarande markörposition. CSS Explorer har ett WYSIWYG -verktyg för att skapa CSS -stilar och Color Explorer hjälper dig att välja perfekta färger. Med Vector Editor kan du skapa vektorgrafik för din webbplats.

varför fungerar inte mitt tangentbord på min bärbara dator?

5. HTMLhouse

HTMLhouse är ett bra alternativ om du bara bryr dig om HTML (dvs. ingen CSS eller JavaScript). Ren och minimal, den delas vertikalt med redigering till vänster och förhandsgranskning i realtid till höger.

Användbart är möjligheten att publicera din HTML och dela den privat (via privat URL) eller offentligt (läggs till HTMLhouse's Bläddra sida ). Det är enkelt men effektivt, det är precis där en online HTML -redaktör spelar in och utmärker sig.

Observera att HTMLhouse skapades och underhålls av folket på Skriv. Som , ett distraktionsfritt skrivverktyg online. Tänk på detta om du planerar att skriva ditt eget webbplatsinnehåll.

6. HTMLG

Ett annat alternativ HTMLG följer samma mönster för att använda kod och förhandsgranskningsrutor för HTML. Detta verktyg innehåller dock inte CSS och JavaScript inom samma enhetliga projekt. Snarare, om du vill redigera dem måste du öppna en ny flik och redigera dem som separata projekt.

Detta gör den idealisk för rena HTML -tweaks och testkod i din webbläsare; mindre om du vill införliva CSS -redigeringar.

Observera att det finns en gräns på 300 ord om du testar hela webbsidor med HTMLG. För att öka detta kan du registrera dig för den annonsfria premiumversionen, från så lite som $ 5,80 i månaden.

7. Dabblet

Med en något annorlunda uppfattning om online -HTML -redaktörer delar Dabblet skärmen i två, snarare än tre/fyra rutor. Så du har en vy för HTML och resultat och en separat (men länkad) vy för CSS och resultat.

Detta ger mer utrymme, vilket ger en tydligare bild av koden och förhandsgranskningen. Vidare belyser den inbyggda w3.org HTML- och CSS-validatorn eventuella problem.

Om du behöver ett fritt utrymme på skrivbordet för att testa din webbplatskod kan detta vara den bästa HTML -redigeraren för dig.

Använd de bästa HTML -redigerarna online för att förbättra dina färdigheter

Om din enda exponering för HTML är vad du lärde dig för ett decennium sedan, är det dags att komma ikapp. HTML5 släpptes 2014 och introducerade en handfull nya standarder och funktioner. Osäker på var du ska börja? Kolla in dessa viktiga nya HTML5 -element.

Vill du lära dig god praxis inom HTML5 webbdesign och utveckling? Kontrollera dessa webbplatser med högkvalitativa HTML -kodningsexempel . Du bör också ta en titt på dessa andra verktyg för att uppgradera dina webbutvecklingskunskaper.

Dela med sig Dela med sig Tweet E-post 15 Windows -kommandotolks (CMD) kommandon du måste veta

Kommandotolken är fortfarande ett kraftfullt Windows -verktyg. Här är de mest användbara CMD -kommandon som alla Windows -användare behöver veta.

Läs Nästa Relaterade ämnen
  • Programmering
  • Textredigerare
  • Webbutveckling
  • WYSIWYG -redaktörer
  • HTML5
  • Scripting
Om författaren Christian Cawley(1510 artiklar publicerade)

Biträdande redaktör för säkerhet, Linux, DIY, programmering och teknik förklaras, och verkligen användbar podcastproducent, med stor erfarenhet av skrivbords- och programvarusupport. Christian är en bidragsgivare till tidningen Linux Format och är en Raspberry Pi -tinkerer, Lego -älskare och retrospelfläkt.

Mer från Christian Cawley

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera