
Простынь получилась длинная, поэтому приходиться сворачивать под cut...
Саму таблицу сокращений, смотри по кнопке "Дальше"
Базовый синтаксис | |
---|---|
Сокращение | Расшифровка сокращения |
Дочерний: > | nav>ul>li <nav> <ul> <li></li> </ul> </nav> |
Соединение: + | div+p+bq <div></div> <p></p> <blockquote></blockquote> |
Поместить выше (в деревеHTML): ^ | div>p>span+em^bq <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> |
Группировать: () | div>(header>ul>li)+footer>p <div> <header> <ul> <li></li> </ul> </header> <footer> <p></p> </footer> </div> |
Умножение: * | ul>li*3 <ul> <li></li> <li></li> <li></li> </ul> |
Нумерация: $ | ul>li.item_$*3 <ul> <li class="item_1"></li> <li class="item_2"></li> <li class="item_3"></li> </ul> ul>li*3>a{item$} <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> <li><a href="">item3</a></li> </ul> ul>li*3>a[href="#$"]{item$} <ul> <li><a href="#1">item1</a></li> <li><a href="#2">item2</a></li> <li><a href="#3">item3</a></li> </ul> |
id и class | #header+.class <div id="header"></div> <div class="class"></div> #hdr.cl_1.cl_2 <div id="hdr" class="cl_1 cl_2"></div> |
Атрибуты: [] | a[title="Подсказка ссылки"] <a href="" title="Подсказка ссылки"></a> td[rowspan colspan title] <td rowspan="" colspan="" title=""></td> |
Текст: {} | .class{свободный текст} <div class="class">свободный текст</div> p>{Кликните }+a{сюда}+{ скорее} <p>Кликните <a href="">сюда</a> скорее</p> |
Сокращение тегов | .class <div class="class"></div> em>.class <em><span class="class"></span></em> ul>.class <ul> <li class="class"></li> </ul> table>.row>.col <table> <tr class="row"> <td class="col"></td> </tr> </table> |
HTML сокращения | |
---|---|
! | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
h1{Заголовок} | <h1>Заголовок</h1> |
a | <a href=""></a> |
a:link | <a href="http://"></a> |
a:mail | <a href="mailto:"></a> |
base | <base href=""> |
br | <br> |
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"> |
link:atom | <link rel="alternate" type="application/atom+xml"title="Atom" href="atom.xml"> |
meta:utf | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> |
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"> |
script:src | <script src=""></script> |
img | <img src="" alt=""> |
ifr | <iframe src="" frameborder="0"></iframe> |
emb | <embed src="" type=""> |
obj | <object data="" type=""></object> |
map | <map name=""></map> |
map+ | <map name=""> <area shape="" coords="" href="" alt=""> </map> |
area | <area shape="" coords="" href="" alt=""> |
form | <form action=""></form> |
form:getform:post | <form action="" method="get"></form> <form action="" method="post"></form> |
label | <label for=""></label> |
input | <input type="text"> |
inp | <input type="text" name="" id=""> |
input:h | <input type="hidden" name=""> |
input:p | <input type="password" name="" id=""> |
input:c | <input type="checkbox" name="" id=""> |
input:r | <input type="radio" name="" id=""> |
input:f | <input type="file" name="" id=""> |
input:s | <input type="submit" value=""> |
input:i | <input type="image" src="" alt=""> |
input:b | <input type="button" value=""> |
input:reset | <input type="reset" value=""> |
select | <select name="" id=""></select> |
select+ | <select name="" id=""> <option value=""></option> </select> |
opt | <option value=""></option> |
tarea | <textarea name="" id="" cols="30" rows="10"></textarea> |
video | <video src=""></video> |
audio | <audio src=""></audio> |
bq | <blockquote></blockquote> |
fst | <fieldset></fieldset> |
btn | <button></button> |
btn:s | <button type="submit"></button> |
btn:b | <button type="button"></button> |
btn:r | <button type="reset"></button> |
sect | <section></section> |
art | <article></article> |
hdr | <header></header> |
ftr | <footer></footer> |
str | <strong></strong> |
ol+ | <ol> <li></li> </ol> |
ul+ | <ul> <li></li> </ul> |
dl+ | <dl> <dt></dt> <dd></dd> </dl> |
table+ | <table> <tr> <td></td> </tr> </table> |
tr+ | <tr> <td></td> </tr> |
c | <!-- Комментарий --> |
CSS сокращения | |
db | display: block |
Сокращения HTML можно скачать в формате PDF:
Сокращения CSS можно скачать в формате PDF:
P.S. Для CSS сокращений наверное надо новый список делать, чтобы не создавать ещё больше простынь, которую фиг прокрутишь...
Так что в скором времени опубликую и CSS файл.
P.P.S. Сделал я этот PDF файл, СSS для Emmet... посмотрел на него и думаю : - наверное не буду его публиковать... 24! страницы, куда-на??? Просто дам ссылку, кому надо тот скачает, оставлю самые ходовые сокращения. Можно ещё в комментах добавить, если кто чего не нашёл на странице...
Такие вот дела...
Есть ещё ФИШка...😊 пишешь - Lorem жмёшь tab и появляется текст-"рыба". Удобная штука, для наполнения шаблона текстом.
ОтветитьУдалитьНо можно эту ФИШку запустить на русском добавив ru - Loremru - тогда текст будет на русском... короче, прикольная тема.😉
Для примера набрал в VScode - Loremru100 (100 - это количество слов в абзаце)
[img]https://1.bp.blogspot.com/-Qzr4xWvgJhA/YC-ZguR5MXI/AAAAAAAAAEM/p6A8QJzYuNUAxofICRtX0c-KzajCLYdkACLcBGAsYHQ/s0/lorem.jpg[/img]