7 -те най -добри безплатни онлайн HTML редактори за тестване на вашия код

7 -те най -добри безплатни онлайн HTML редактори за тестване на вашия код

Всеки уебсайт, който използвате, разчита на HTML. Докато уеб разработчиците се нуждаят от умения в JavaScript, Python, CSS и скриптове от страна на сървъра, HTML държи всичко заедно.





Без HTML няма мрежа, така че трябва да знаете как да я създавате и редактирате. Вместо да настроите система за тестване на HTML код на вашия компютър, по -лесно е да тествате кода в браузър.





Независимо дали се занимавате с малки HTML фрагменти или пълни проекти за уебсайтове, онлайн HTML редактор е идеален.





Защо трябва да използвате онлайн HTML редактор

Използването на базиран на браузър HTML редактор има смисъл за нещо като Notepad ++ поради следните причини:

  • Онлайн HTML редакторите се изпълняват директно във вашия уеб браузър
  • Тествайте вашия HTML код онлайн --- вижте дали кодът работи според очакванията
  • Вижте визуализации в реално време в мрежата --- актуализациите за визуализация, докато редактирате
  • Опростете работния си процес --- няма повече записване, зареждане в браузъра, превключване обратно към редактора и повторете
  • Платформа агностик --- те работят на всяко устройство с уеб връзка.

Тази последна точка е много важна. Това означава, че можете да разработите уеб страница толкова лесно на компютър, колкото Chromebook. Може дори да използвате таблет с Android или компютър за 50 долара като Raspberry Pi.



HTML кодирането е достъпен и ясен портал за разбиране на програмирането и разработването. Трябва постоянно да тествате своя HTML код-какво по-добро от резултатите на живо в прозореца на браузъра ви?

Нека разгледаме някои от най -добрите онлайн HTML редактори, които са налични в момента.





1. CodePen

CodePen е „среда за социално развитие“ за уеб разработчици, което основно означава, че е онлайн редактор с функции за сътрудничество. Той предлага просто оформление. Ще намерите панел за HTML, панел за CSS и панел за JavaScript, плюс един за визуализация в реално време. Всички размери на панелите могат да се регулират чрез плъзгане на ръбовете наоколо.

Можете да създадете „писалки“, които са като отделни детски площадки за промяна на уеб код. Няколко химикалки могат да бъдат групирани заедно в колекции.





Докато регистрацията за основна употреба е безплатна, частните химикалки и колекции изискват a Про акаунт . Това започва от $ 8/месец и включва хостинг на активи, вградени теми, сътрудничество в реално време и достъп до пълната IDE за уеб разработка на CodePen.

Много хора смятат CodePen за най -добрия онлайн HTML редактор. Изпробвайте го, за да видите дали отговаря на вашите нужди.

2. JSFiddle

JSFiddle е почти това, което звучи: пясъчник, където можете да се занимавате с JavaScript. Вероятно знаете, че JavaScript върви ръка за ръка с HTML и CSS. Това означава, че с JSFiddle можете да редактирате и трите наведнъж с интерфейса за редактиране на JSFiddle.

Ако искате, можете напълно да пропуснете JavaScript.

Хубавото на JSFiddle е, че можете да добавите външни заявки в страничната лента. Това ви позволява да включите JavaScript и CSS файлове извън сайта за подобряване на вашия HTML. Полезен е и бутонът Tidy, който автоматично изчиства вдлъбнатините на кода ви, докато щракването върху Collaborate позволява онлайн сътрудничество в реално време.

Единственият недостатък е, че трябва да щракнете върху бутона Изпълнение, за да актуализирате панела за визуализация.

3. JSBin

Помислете за JSBin като по -проста и по -чиста алтернатива на JSFiddle. Можете да редактирате всяка комбинация от HTML, CSS и JavaScript, само като превключите панелите с горната лента с инструменти. За максимална гъвкавост можете също да превключвате панела за визуализация и панела на конзолата според нуждите.

как да изтриете дублиращи се снимки на iphone

Но докато JSFiddle ви позволява да свързвате външни CSS и JavaScript ресурси, JSBin ви ограничава до предварително дефинирани JavaScript библиотеки. Изборът обаче е добър, вариращ от jQuery до React до Angular и др.

Докато JSBin е безплатен и не изисква акаунт, ще ви трябва Про акаунт за разширени функции. Те включват частни контейнери, персонализирани вграждания, хостинг на активи, синхронизация на Dropbox и суетни URL адреси за страници, публикувани чрез JSBin.

Четири. Liveweave

Liveweave е визуално подобен на предишните редактори, с приятен потребителски интерфейс. Подобно на JSFiddle, Liveweave позволява сътрудничество в реално време и като JSBin ви позволява да свързвате предварително зададени ресурси на трети страни като jQuery.

Но той също има няколко уникални функции. Генераторът Lorem Ipsum създава заместващ текст на текущата ви позиция на курсора. CSS Explorer предоставя WYSIWYG инструмент за създаване на CSS стилове, а Color Explorer ви помага да изберете перфектни цветове. Междувременно Vector Editor ви позволява да създавате векторни графики за вашия сайт.

скочете плашещи видеоклипове, за да изплашите приятели

5. HTMLhouse

HTMLhouse е добър вариант, ако ви е грижа само за HTML (т.е. без CSS или JavaScript). Чист и минимален, разделен е вертикално с редактиране отляво и визуализация в реално време отдясно.

Полезна е възможността да публикувате своя HTML и да го споделяте частно (чрез частен URL адрес) или публично (добавен към Страница за преглед на HTMLhouse ). Това е просто, но ефективно, което е мястото, където онлайн HTML редактор влиза в игра и се отличава.

Имайте предвид, че HTMLhouse е създаден и се поддържа от хората в Пиши.аз , онлайн инструмент за писане без разсейване. Имайте това предвид, ако планирате да напишете собствено съдържание на сайта.

6. HTMLG

Друга опция HTMLG следва същия модел на използване на кодовете и панелите за визуализация за HTML. Този инструмент обаче не включва CSS и JavaScript в един и същ обединен проект. По -скоро, ако искате да ги редактирате, ще трябва да отворите нов раздел и да ги редактирате като отделни проекти.

Това го прави идеален за чисти HTML корекции и тестване на код във вашия браузър; по -малко, ако искате да включите CSS редакции.

Имайте предвид, че има ограничение от 300 думи, ако тествате пълни уеб страници с HTMLG. За да увеличите това, можете да се регистрирате към премиум версията без реклами, като започнете от едва 5,80 долара на месец.

7. Dabblet

Предлагайки малко по -различен подход към онлайн HTML редакторите, Dabblet разделя екрана на две, а не на три/четири екрана. И така, имате изглед за HTML & Резултат и отделен (но свързан) изглед за CSS & Резултат.

Това предлага повече пространство, като дава по -ясен изглед на кода и визуализацията. Освен това, вграденият w3.org HTML и CSS валидатор подчертава всички проблеми.

Ако имате нужда от чисто пространство на работния плот, за да тествате кода на вашия сайт, това може да е най -добрият HTML редактор за вас.

Използвайте най -добрите онлайн HTML редактори, за да подобрите уменията си

Ако единственото ви излагане на HTML е това, което сте научили преди десетилетие, сега е моментът да наваксате. HTML5, издаден през 2014 г. и въведе няколко нови стандарти и функции. Не сте сигурни откъде да започнете? Вижте тези основни нови HTML5 елементи.

Искате ли да научите добри практики в HTML5 уеб дизайн и разработка? Проверете тези уебсайтове с качествени примери за кодиране с HTML . Трябва също да разгледате тези други инструменти за надграждане на вашите умения за уеб разработка.

Дял Дял Туит електронна поща 15 Команди на командния ред на Windows (CMD), които трябва да знаете

Командният ред все още е мощен инструмент на Windows. Ето най -полезните CMD команди, които всеки потребител на Windows трябва да знае.

Прочетете Напред
Свързани теми
  • Програмиране
  • Текстов редактор
  • Уеб разработка
  • Редактори на WYSIWYG
  • HTML5
  • Скриптове
За автора Кристиан Каули(1510 публикувани статии)

Заместник -редактор по сигурността, Linux, DIY, програмирането и технологиите, обяснени и наистина полезен производител на подкаст, с богат опит в поддръжката на настолни компютри и софтуер. Сътрудник на списание Linux Format, Кристиан е калайджия на Raspberry Pi, любител на Lego и фен на ретро игри.

Още от Кристиан Каули

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате