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

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 доступен для большинства распостраненных редакторов кода.
ПОДПИСАТЬСЯ НА РАССЫЛКУ НОВОСТЕЙ
Последнее в нашем блоге
Интернет-маркетинг
04.11.2019
Интернет-маркетинг
03.10.2019