HTML-синтаксис плагина Emmet

Основной синтаксис Emmet при работе с HTML-элементами веб-страницы на примере редактора Brackets.

Для удобства работы frontend-разработчиков был разработан плагин Emmet. Он прекрасно встраивается во множество инструментов для разработки и синтаксически не отличается нигде.

Хочу сразу обратить внимание тех, кто только знакомиться с Emmet.

Каждая сокращённая форма записи заканчивается нажатием клавиши "табуляции" (Tab).

И ещё одно предостережение! Следите за положением каретки курсора. Она всегда должна стоять в конце сокращённой формы записи. Только в этом случае Emmet сгенерирует разметку корректно.

Тема получается довольно обширная, поэтому его часть, посвящённую css, для удобства вынесена в сокращённый CSS-синтаксис плагина Emmet

Ну всё, поехали!

Emmet основной синтаксис

Объявление дочернего элемента после родительского через знак ">"

nav>ul>li

				
    
					
  1. <nav>
    2. 
					
  2.     <ul>
    3. 
					
  3.     <li></li>
    4. 
					
  4.     </ul>
    5. 
					
  5. </nav>
    6.

Соединение с использованием знака "+"

div+p+bq

				
    
					
  1. <div></div>
    2. 
					
  2. <p></p>
    3. 
					
  3. <blockquote></blockquote>
    4.

Поместить выше (в дереве HTML) - ^

div+div>p>span+em^bq

В примере ниже мы поднимаем цитату из p и div, в коотором он (p) лежит, на два уровня. Таким образом blockquote разместится каскадно вслед за div, содержащий p.

				
    
					
  1. <div></div>
    2. 
					
  2. <div>
    3. 
					
  3.     <p><span></span><em></em></p>
    4. 
					
  4.     <blockquote></blockquote>
    5. 
					
  5. </div>
    6. 
					
  6. <!-- div+div>p>span+em^^bq -->
    7. 
					
  7. <div></div>
  8. <div>
    9. 
					
  9.     <p><span></span><em></em></p>
    10. 
					
  10. </div>
    11. 
					
  11. <blockquote></blockquote>
    12.

Группировка с помощью круглых скобок ()

div>(header>ul>li*2>a)+footer>p

				
    
					
  1. <div>
    2. 
					
  2.     <header>
    3. 
					
  3.     <ul>
    4. 
					
  4.     <li><a href=""></a></li>
    5. 
					
  5.     <li><a href=""></a></li>
    6. 
					
  6.     </ul>
    7. 
					
  7.     </header>
    8. 
					
  8.     <footer>
    9. 
					
  9.     <p></p>
    10. 
					
  10.     </footer>
    11. 
					
  11. </div>
    12.

Определение количества элементов, используя знак *

ul>li*3

				
    
					
  1. <ul>
    2. 
					
  2.     <li></li>
    3. 
					
  3.     <li></li>
    4. 
					
  4.     <li></li>
    5. 
					
  5. </ul>
    6.

Работаем с нумерацией, используя $

ul>li.item$*3

				
    
					
  1. <ul>
    2. 
					
  2.     <li class="item1"></li>
    3. 
					
  3.     <li class="item2"></li>
    4. 
					
  4.     <li class="item3"></li>
    5. 
					
  5. </ul>
    6. 
					
  6. <!-- h$[title=item$]{Header $}*3 -->
    7. 
					
  7. <h1 title="item1">Header 1</h1>
    8. 
					
  8. <h2 title="item2">Header 2</h2>
    9. 
					
  9. <h3 title="item3">Header 3</h3>
    10. 
					
  10. <!-- ul>li.item$$$*3 -->
    11. 
					
  11. <ul>
    12. 
					
  12.     <li class="item001"></li>
    13. 
					
  13.     <li class="item002"></li>
    14. 
					
  14.     <li class="item003"></li>
    15. 
					
  15. </ul>
    16. 
					
  16. <!-- ul>li.item$@-*3 -->
    17. 
					
  17. <ul>
    18. 
					
  18.     <li class="item3"></li>
    19. 
					
  19.     <li class="item2"></li>
    20. 
					
  20.     <li class="item1"></li>
    21. 
					
  21. </ul>
    22. 
					
  22. <!-- ul>li.item$@3*5 -->
    23. 
					
  23. <ul>
    24. 
					
  24.     <li class="item3"></li>
    25. 
					
  25.     <li class="item4"></li>
    26. 
					
  26.     <li class="item5"></li>
    27. 
					
  27.     <li class="item6"></li>
    28. 
					
  28.     <li class="item7"></li>
    29. 
					
  29. </ul>
    30.

Классы и идентификаторы: id и class

#idNmae для определения идентификатора и .className для определения класса. Допускается использование вида #idNmae.className, чтобы определить элементу оба атрибута

Аналогичная ситуация и с присвоением одному элементу сразу нескольких классов .className1.className2

				
    
					
  1. <div id="header"></div>
    2. 
					
  2. <!-- .title -->
    3. 
					
  3. <div class="title"></div>
    4. 
					
  4. <!-- form#search.wide -->
    5. 
					
  5. <form id="search" class="wide"></form>
    6. 
					
  6. <!-- p.class1.class2.class3 -->
    7. 
					
  7. <p class="class1 class2 class3"></p>
    8.

Добавляем HTML-элементу вложенный атрибут, используя квадратные скобки []

p[title="Hello world"]

				 
    
					 
  1. <p title="Hello world"></p>
    2. 
					 
  2. <!-- td[rowspan=2 colspan=3 title] -->
    3. 
					 
  3. <td rowspan="2" colspan="3" title=""></td>
    4. 
					 
  4. <!-- [a='value1' b="value2"] -->
    5. 
					 
  5. <div a="value1" b="value2"></div>
    6.

Добавляем HTML-элементу вложенный текст, используя фигурные скобки {}

a{Click me}

				
    
					
  1. <a href="">Click me</a>
    2. 
					
  2. <!-- p>{Click }+a{here}+{ to continue} -->
    3. 
					
  3. <p>Click <a href="">here</a> to continue</p>
    4.

Сокращаем вызов div с классом "class"

.class без явного указания тега вернёт div с указанным классом.

				
    
					
  1. <div class="class"></div>
    2. 
					
  2. <!-- em>.class -->
    3. 
					
  3. <em><span class="class"></span></em>
    4. 
					
  4. <!-- ul>.class -->
    5. 
					
  5. <ul>
    6. 
					
  6.     <li class="class"></li>
    7. 
					
  7. </ul>
    8. 
					
  8. <!-- table>.row>.col -->
    9. 
					
  9. <table>
    10. 
					
  10.     <tr class="row">
    11. 
					
  11.     <td class="col"></td>
    12. 
					
  12.     </tr>
    13. 
					
  13. </table> 
    14.

Генерируем текст-рыбу lorem ipsum ...

.wrapper>h1{My Text}+p*3>lorem5

				
    
					
  1. <div class="wrapper">
    2. 
					
  2.    <h1>My Text</h1>
    3. 
					
  3.    <p>Lorem ipsum dolor sit amet.</p>
    4. 
					
  4.    <p>Debitis dolorum illo nisi suscipit!</p>
    5. 
					
  5.    <p>Animi explicabo libero quis voluptates?</p>
    6. 
					
  6. </div>
    7.

Теперь пробежимся по стандартным сокращениям для работы с HTML-тегами

!, html:5

                
    
                    
  1. <!DOCTYPE html>
    2. 
                    
  2. <html lang="en">
    3. 
                    
  3. <head>
    4. 
                    
  4.     <meta charset="UTF-8" />
    5. 
                    
  5.     <title>Document</title>
    6. 
                    
  6. </head>
    7. 
                    
  7. <body>
    8. 
                    
  8. </body>
  9. </html>
    10.

!!!

 <!DOCTYPE html>

a

 <a href=""></a>

a:link

 <a href="http://"></a>

a:mail

 <a href="mailto:"></a>

br

 <br />

frame

 <frame />

link

 <link rel="stylesheet" href="" />

link:css

 <link rel="stylesheet" href="style.css" />

link:favicon

 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:rss

 <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

meta

 <meta />

meta:utf

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

 <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

 <meta http-equiv="X-UA-Compatible" content="IE=7" />

style

 <style></style>

script

 <script></script>

script:src

 <script src=""></script>

img

 <img src="" alt="" />

img:srcset, img:s 

 <img srcset="" src="" alt="" />

img:sizes, img:z 

 <img sizes="" srcset="" src="" alt="" />

map

 <map name=""></map>

form

 <form action=""></form>

label

 <label for=""></label>

input

 <input type="text" />

inp

 <input type="text" name="" id="" />

input:text, input:t

 <input type="text" name="" id="" />

input:search

 <input type="search" name="" id="" />

input:email

 <input type="email" name="" id="" />

input:url

 <input type="url" name="" id="" />

input:password, input:p

 <input type="password" name="" id="" /> 

input:datetime

 <input type="datetime" name="" id="" />

input:date

 <input type="date" name="" id="" />

input:time

 <input type="time" name="" id="" />

input:tel

 <input type="tel" name="" id="" />

input:number

 <input type="number" name="" id="" />

input:color

 <input type="color" name="" id="" />

input:checkbox, input:c

 <input type="checkbox" name="" id="" />

input:radio, input:r

 <input type="radio" name="" id="" />

input:range

 <input type="range" name="" id="" />

input:file, input:f

 <input type="file" name="" id="" /> 

input:submit, input:s

 <input type="submit" value="" />

input:image, input:i

 <input type="image" src="" alt="" />

input:button, input:b

 <input type="button" value="" />

input:reset

 <input type="reset" value="" />

select

 <select name="" id=""></select>

select:disabled

,

select:d

 <select name="" id="" disabled="disabled"></select>

option

,

opt

 <option value=""></option>

textarea

 <textarea name="" id="" cols="30" rows="10"></textarea>

marquee

 <marquee behavior="" direction=""></marquee>

menu:context

,

menu:c

 <menu type="context"></menu>

menu:toolbar

,

menu:t

 <menu type="toolbar"></menu>

video

 <video src=""></video>

audio

 <audio src=""></audio>

html:xml

 <html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

 <keygen />

command

 <command />

button:submit, button:s, btn:s

 <button type="submit"></button>

button:reset, button:r, btn:r

 <button type="reset"></button>

button:disabled, button:d, btn:d

 <button disabled="disabled"></button>

bq

 <blockquote></blockquote> 

fig

 <figure></figure>

figc

 <figcaption></figcaption>

pic

 <picture></picture>

ifr

 <iframe src="" frameborder="0"></iframe>

emb

 <embed src="" type="" />

obj

 <object data="" type=""></object>

cap

 <caption></caption>

colg

 <colgroup></colgroup>

fst, fset

 <fieldset></fieldset>

btn

<button></button>

optg

 <optgroup></optgroup>

tarea

 <textarea name="" id="" cols="30" rows="10"></textarea>

leg

 <legend></legend>

sect

 <section></section>

art

 <article></article>

hdr

 <header></header>

ftr

 <footer></footer>

adr

 <address></address>

dlg

 <dialog></dialog>

str

 <strong></strong>

prog

 <progress></progress>

mn

 <main></main>

tem

 <template></template>

datag

 <datagrid></datagrid>

datal

 <datalist></datalist>

kg

 <keygen />

out

 <output></output>

det

 <details></details>

cmd

 <command />

ol+

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

ul+

 <ul><li></li></ul>

dl+

                
    
                
  1. <dl>
    2. 
                
  2.     <dt></dt>
    3. 
                
  3.     <dd></dd>
    4. 
                
  4. </dl>
    5.

map+

                
    
                    
  1. <map name="">
    2. 
                    
  2.     <area shape="" coords="" href="" alt="" />
    3. 
                    
  3. </map>
    4.

table+

                
    
                
  1. <table>
    2. 
                
  2.     <tr>
    3. 
                
  3.         <td>
    4. 
                
  4.         </td>
    5. 
                
  5.     </tr>
    6. 
                
  6. </table>
    7.

colgroup+, colg+

<colgroup><col /></colgroup>

tr+

                
    
                
  1. <tr>
    2. 
                
  2.     <td></td>
    3. 
                
  3. </tr>
    4.

select+

                
    
                
  1. <select name="" id="">
    2. 
                
  2.     <option value=""></option>
    3. 
                
  3. </select>
    4.

optgroup+

,

optg+

                
    
                
  1. <optgroup>
    2. 
                
  2.     <option value=""></option>
    3. 
                
  3. </optgroup>
    4.

pic+

                
    
                
  1. <picture>
    2. 
                
  2.     <source srcset="" />
    3. 
                
  3.     <img src="" alt="" />
    4. 
                
  4. </picture>
    5.

Контакты

Информация

Ссылки

Поддержка

© Langner, 2021. Powered by REG.RU