A 7 legjobb ingyenes online HTML -szerkesztő a kód teszteléséhez

A 7 legjobb ingyenes online HTML -szerkesztő a kód teszteléséhez

Minden webhely, amelyet használ, HTML -re támaszkodik. Míg a webfejlesztőknek JavaScript, Python, CSS és szerveroldali szkriptkészítésre van szükségük, a HTML mindent egyben tart.





HTML nélkül nincs web, ezért tudnia kell, hogyan kell létrehozni és szerkeszteni. Ahelyett, hogy beállítana egy HTML kód tesztelő rendszert a számítógépén, egyszerűbb a böngészőben tesztelni a kódot.





Akár apró HTML -töredékekkel babrál, akár teljes webhelyprojektekkel, az online HTML -szerkesztő ideális.





Miért érdemes online HTML -szerkesztőt használni?

A böngészőalapú HTML-szerkesztő használata ésszerű a Jegyzettömb ++, például a következő okok miatt:

  • Az online HTML -szerkesztők közvetlenül a böngészőben futnak
  • Tesztelje HTML kódját online-nézze meg, hogy a kód a várt módon fut-e
  • Tekintse meg a valós idejű internetes előnézeteket-az előnézeti frissítéseket szerkesztés közben
  • Egyszerűsítse a munkafolyamatot-nincs több mentés, betöltés a böngészőbe, visszakapcsolás a szerkesztőbe és ismétlés
  • A platform agnosztikus --- minden olyan eszközön fut, amelyik rendelkezik internetkapcsolattal.

Ez az utolsó pont nagyon fontos. Ez azt jelenti, hogy elképzelhető, hogy olyan könnyen fejleszthet weblapot PC -n, mint Chromebookon. Használhat akár Android táblagépet, vagy 50 dolláros számítógépet, mint a Raspberry Pi.



A HTML kódolás hozzáférhető, egyszerű átjáró a programozás és fejlesztés megértéséhez. Folyamatosan tesztelnie kell a HTML kódját --- mi lehet jobb, mint az élő eredmények a böngészőablakban?

Nézzük a jelenleg elérhető legjobb online HTML -szerkesztőket.





1. CodePen

A CodePen egy „szociális fejlesztési környezet” a webfejlesztők számára, ami alapvetően azt jelenti, hogy ez egy online szerkesztő együttműködési funkciókkal. Egyszerű elrendezést kínál. Talál egy panelt a HTML-hez, egy panelt a CSS-hez, és egy panelt a JavaScripthez, valamint egyet a valós idejű előnézethez. Minden panelméret beállítható az élek körbehúzásával.

Létrehozhat 'Tollakat', amelyek olyanok, mint az egyes játszóterek a webkód módosításához. Több toll gyűjteményekbe csoportosítható.





Míg az alapfelhasználásra történő regisztráció ingyenes, a privát toll és gyűjtemény a Pro fiók . Ez 8 dollár/hó áron kezdődik, és magában foglalja az eszközök tárolását, a beágyazható témákat, a valós idejű együttműködést és a CodePen teljes webfejlesztési IDE-jéhez való hozzáférést.

Sokan a CodePen -t tartják a legjobb online HTML -szerkesztőnek. Próbálja ki, hogy megfelel -e az Ön igényeinek.

2. JSFiddle

A JSFiddle nagyjából így hangzik: egy homokozó, ahol a JavaScript segítségével hegedülhet. Valószínűleg tudja, hogy a JavaScript együtt jár a HTML -szel és a CSS -sel. Ez azt jelenti, hogy a JSFiddle segítségével mind a hármat egyszerre szerkesztheti a JSFiddle szerkesztőfelületével.

Ha szeretné, teljesen kihagyhatja a JavaScriptet.

A JSFiddle szépsége az, hogy külső kéréseket adhat hozzá az oldalsávhoz. Ez lehetővé teszi webhelyén kívüli JavaScript és CSS fájlok beépítését a HTML fejlesztéséhez. Szintén hasznos a Tidy gomb, amely automatikusan megtisztítja a kód behúzását, míg az Együttműködés gombra kattintva valós idejű online együttműködést tesz lehetővé.

Az egyetlen hátránya, hogy az előnézeti panel frissítéséhez kattintson a Futtatás gombra.

3. JSBin

Tekintse a JSBin -t a JSFiddle egyszerűbb és tisztább alternatívájának. A HTML, CSS és JavaScript tetszőleges kombinációját szerkesztheti, ha a paneleket a felső eszköztárral váltja. A maximális rugalmasság érdekében szükség esetén átkapcsolhatja az előnézeti panelt és a konzolpanelt is.

a fájlnév túl hosszú a törléshez

Míg a JSFiddle lehetővé teszi külső CSS- és JavaScript -erőforrások összekapcsolását, addig a JSBin az előre meghatározott JavaScript -könyvtárakra korlátozza. A választék azonban jó, kezdve a jQuery -től a React -en át az Angular -ig és így tovább.

Bár a JSBin ingyenes, és nem igényel fiókot, szüksége lesz egy Pro fiók fejlett funkciókhoz. Ezek közé tartoznak a privát tárolók, az egyéni beágyazások, az eszközök tárolása, a Dropbox szinkronizálása és a hiú URL -ek a JSBin -en keresztül közzétett oldalakhoz.

Négy. Liveweave

A Liveweave vizuálisan hasonló a korábbi szerkesztőkhöz, kellemes felhasználói felülettel. A JSFiddle-hez hasonlóan a Liveweave valós idejű együttműködést tesz lehetővé, a JSBin-hez hasonlóan pedig lehetővé teszi az előre meghatározott harmadik féltől származó források, például a jQuery összekapcsolását.

De van néhány egyedi tulajdonsága is. A Lorem Ipsum Generator helyőrző szöveget hoz létre a kurzor aktuális pozíciójában. A CSS Explorer WYSIWYG eszközt biztosít a CSS stílusok létrehozásához, a Color Explorer pedig segít kiválasztani a tökéletes színeket. Eközben a Vektorszerkesztő lehetővé teszi vektorgrafika létrehozását webhelyéhez.

a csatlakoztatott töltő hosszabb ideig töltődik

5. HTMLhouse

A HTMLhouse jó választás, ha csak a HTML -rel törődik (azaz nincs CSS vagy JavaScript). Tiszta és minimális, függőlegesen felosztva, a bal oldali szerkesztéssel és a jobb oldali valós idejű előnézeti képekkel.

Hasznos az a képesség, hogy közzéteszi a HTML -t, és megoszthatja azt privátban (privát URL -en keresztül) vagy nyilvánosan (hozzáadva HTMLhouse Tallózás oldala ). Egyszerű, de hatékony, pontosan itt jön szóba és jeleskedik egy online HTML -szerkesztő.

Ne feledje, hogy a HTMLhouse -t a (z) címen lévő emberek hozták létre és karbantartják Írjon.mint , figyelemelterelés-mentes online íróeszköz. Ne feledje ezt, ha saját webhelyének tartalmát tervezi megírni.

6. HTMLG

Egy másik lehetőség a HTMLG ugyanazt a mintát követi a kód- és előnézeti panelek használatánál a HTML -hez. Ez az eszköz azonban nem tartalmazza a CSS -t és a JavaScriptet ugyanazon egységes projekten belül. Inkább, ha ezeket szeretné szerkeszteni, akkor új lapot kell megnyitnia, és különálló projektekként kell szerkesztenie.

Így ideális a tiszta HTML csípésekhez és a kód teszteléséhez a böngészőben; kevésbé, ha CSS szerkesztéseket szeretne beépíteni.

Ne feledje, hogy 300 szó korlátozása van, ha teljes weboldalakat tesztel HTMLG-vel. Ennek növelése érdekében regisztrálhat a hirdetésmentes prémium verzióra, havi 5,80 dollártól.

7. Dabblet

Az online HTML -szerkesztők némileg eltérő felfogását kínáló Dabblet a képernyőt ketté osztja, nem pedig három/négy ablakra. Tehát van nézete a HTML -re és az eredményre, és egy külön (de linkelt) nézet a CSS -re és az eredményre.

Ez több helyet kínál, és világosabb képet nyújt a kódról és az előnézetről. Továbbá, a beépített w3.org HTML és CSS validátor kiemeli az esetleges problémákat.

Ha tiszta asztali területre van szüksége a webhelykód teszteléséhez, akkor ez lehet a legjobb HTML -szerkesztő az Ön számára.

Használja a legjobb online HTML -szerkesztőket, hogy javítsa készségeit

Ha az egyetlen kitettsége a HTML számára az, amit egy évtizeddel ezelőtt megtanult, akkor itt az ideje, hogy utolérje. A HTML5 2014 -ben jelent meg, és néhány új szabványt és funkciót vezetett be. Nem tudja, hol kezdje? Nézze meg ezeket az alapvető új HTML5 elemeket.

Szeretne megtanulni a HTML5 webtervezéssel és fejlesztéssel kapcsolatos jó gyakorlatokat? Ellenőrizze ezeket webhelyek minőségi HTML kódolási példákkal . Ezeket az egyéb eszközöket is meg kell vizsgálnia a webfejlesztési készségek fejlesztéséhez.

Részvény Részvény Csipog Email 15 Windows parancssori (CMD) parancs, amit tudnia kell

A parancssor továbbra is hatékony Windows eszköz. Itt vannak a leghasznosabb CMD -parancsok, amelyeket minden Windows -felhasználónak tudnia kell.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • Szöveg szerkesztő
  • Webfejlesztés
  • WYSIWYG szerkesztők
  • HTML5
  • Forgatókönyvírás
A szerzőről Christian Cawley(1510 megjelent cikk)

Szerkesztőhelyettes a biztonságért, Linuxért, barkácsolásért, programozásért és technikai magyarázatért, és valóban hasznos podcast -gyártó, nagy tapasztalattal rendelkezik asztali és szoftveres támogatásban. A Linux Format magazin munkatársa, Christian a Raspberry Pi barkácsolója, a Lego szerelmese és a retro játék rajongója.

További részletek Christian Cawley -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide