Простынь получилась длинная, поэтому приходиться сворачивать под 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]