Пишем HTML-код быстрее

Пишем HTML-код быстрее

zen-coding

Zen Coding — плагин для редакторов кода, который позволяет быстро создавать HTML, XML, XSL разметку. Принцип работы основан на использовании аббревиатур для обозначения HTML-тегов, их аттрибутов, а также их вложенности.




Начнем с простого. Пишем в редакторе:

span#date

нажимаем Ctrl-E (комбинация клавиш зависит от редактора) и получаем:

<span id="date"></span>

Вложенность символизирует символ ">". Также есть возможность указать число элементов:

ol>li*5

=

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

Пример посложнее. Типичный код HTML-документа:

<div id="header">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

С Zen Coding это делается так:

div#header>div.logo+ul#navigation>li*5>a

Также плагин поддерживает группировку элементов с помощью круглых скобок:

div#wrap>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

=

<div id="wrap">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="page">
<h1><span></span></h1>
<p></p>
<p></p>
</div>
<div id="footer"></div>
</div>

В общем, вся разметка HTML-страницы может быть написана одной строкой.

На данный момент плагин Zen Coding доступен для большинства распостраненных редакторов кода.

Сайт проекта

Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Звоните нам
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!