EMMET - сокращения для ускоренной верстки

Технические моменты создания сайтов и других Web-приложений.

EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 09:03

Тем кто занимается или собирается заняться версткой на каком либо из языков программирования, очень полезной будет технология EMMET, представляющая из себя набор специальных плагинов для различных редакторов, при помощи которых возможна ускоренная верстка.
Приведу сразу пример применения в редакторе Visual Studio Code что бы было понятно, насколько быстрее можно верстать.
Пишем в редакторе всего один символ "!" и кликаем по EMMET Abbreviation:

emmet01.jpg
emmet01.jpg (22.02 KiB) Просмотров: 418


Получаем:

emmet02.jpg
emmet02.jpg (30.87 KiB) Просмотров: 418


Удобно? Да! Представьте только если все это набирать руками. Таких удобных команд в EMMET довольно много, постараюсь некоторые из них тут описать. Кроме того из данных команд можно составлять различные комбинации что существенно ускоряет верстку.
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 09:19

Сокращения для HTML тегов.
Тут все просто и понятно.

Для тега A
Набираем "a" получаем:
Код: выделить все
<a href=""></a>

Далее пишу сразу без комментариев, команда-результат.
a:blank
Код: выделить все
<a href="http://" target="_blank" rel="noopener noreferrer"></a>

a:link
Код: выделить все
<a href="http://"></a>

a:tel
Код: выделить все
<a href="tel:+"></a>

a:mail
Код: выделить все
<a href="mailto:"></a>
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 09:39

b
Код: выделить все
<b></b>

base
Код: выделить все
<base href="">

body
Код: выделить все
<body>
   
</body>

br
Код: выделить все
<br>

Для <BUTTON>
button
Код: выделить все
<button></button>

button:d
Код: выделить все
<button disabled="disabled"></button>

button:r
Код: выделить все
<button type="reset"></button>

button:s
Код: выделить все
<button type="submit"></button>
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 10:03

Для тега <LINK>

link
Код: выделить все
<link rel="stylesheet" href="">

link:atom
Код: выделить все
<link rel="alternate" href="atom.xml" type="application/atom+xml" title="Atom">

link:css
Код: выделить все
<link rel="stylesheet" href="style.css">

link:favikon
Код: выделить все
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

link:im
Код: выделить все
<link rel="import" href="component.html">

link:mf
Код: выделить все
<link rel="manifest" href="manifest.json">

link:print
Код: выделить все
<link rel="stylesheet" href="print.css" media="print">

link:rss
Код: выделить все
<link rel="alternate" href="rss.xml" type="application/rss+xml" title="RSS">

link:touch
Код: выделить все
<link rel="apple-touch-icon" href="favicon.png">
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 11:44

Для тега <META>

meta:compat
Код: выделить все
<meta http-equiv="X-UA-Compatible" content="IE=7">

meta:desc
Код: выделить все
<meta name="description" content="">

meta:edge
Код: выделить все
<meta http-equiv="X-UA-Compatible" content="ie=edge">

meta:kw
Код: выделить все
<meta name="keywords" content="">

meta:redirect
Код: выделить все
<meta http-equiv="refresh" content="0; url=http://example.com">

meta:utf
Код: выделить все
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

meta:vp
Код: выделить все
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 19 дек 2020, 15:20

script:src
Код: выделить все
<script src=""></script>


Для тега <IMG>

img:s
Код: выделить все
<img src="" alt="" srcset="">

img:sizes
Код: выделить все
<img src="" alt="" sizes="" srcset="">

img:srcset
Код: выделить все
<img src="" alt="" srcset="">

img:z
Код: выделить все
<img src="" alt="" sizes="" srcset="">
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 22 дек 2020, 15:51

form
Код: выделить все
<form action=""></form>

form:get
Код: выделить все
<form action="" method="get"></form>

form:post
Код: выделить все
<form action="" method="post"></form>


Для тега input
input
Код: выделить все
<input type="text">

input:b
Код: выделить все
<input type="button" value="">

input:c
Код: выделить все
<input type="checkbox" name="" id="">

input:email
Код: выделить все
<input type="email" name="" id="">

input:f
Код: выделить все
<input type="file" name="" id="">

input:h
Код: выделить все
<input type="hidden" name="">

input:i
Код: выделить все
<input type="image" src="" alt="">

input:p
Код: выделить все
<input type="password" name="" id="">

input:r
Код: выделить все
<input type="radio" name="" id="">

input:s
Код: выделить все
<input type="submit" value="">

input:t
Код: выделить все
<input type="text" name="" id="">
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Александр » 23 дек 2020, 09:47

select
Код: выделить все
<select name="" id=""></select>

select:d
Код: выделить все
<select name="" id="" disabled="disabled"></select>

opt
Код: выделить все
<option value=""></option>

textarea
Код: выделить все
<textarea name="" id="" cols="30" rows="10"></textarea>

html5
Код: выделить все
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

html:xml
Код: выделить все
<html xmlns="http://www.w3.org/1999/xhtml"></html>
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 211
Зарегистрирован: 12 мар 2012, 16:32

Re: EMMET - сокращения для ускоренной верстки

Сообщение Spitch » 24 дек 2020, 10:00

Согласен с Александром, EMMET прекрасная технология, существенно облегчающая работу. Начал ею пользоваться не так давно, но, тоже хочу поделиться несколькими приемами. Например соединение, обозначается "+", помогает сразу писать большие куски кода. Приведу пример.
Пишем такую конструкцию: div+p+p+p+div+p нажимаем Emmet Abbreviation
Получаем:
Код: выделить все
<div></div>
<p></p>
<p></p>
<p></p>
<div></div>
<p></p>

Так работает Соединение.
Аватар пользователя
Spitch
Интересующийся
 
Сообщений: 100
Зарегистрирован: 11 янв 2013, 13:08

Re: EMMET - сокращения для ускоренной верстки

Сообщение Spitch » 25 дек 2020, 14:35

Группировка, обозначается ()
Пример группировки, пишем: div>(header>ol>li)+footer>p+p
Получаем:
Код: выделить все
<div>
    <header>
        <ol>
            <li></li>
        </ol>
    </header>
    <footer>
        <p></p>
        <p></p>
    </footer>
</div>
Аватар пользователя
Spitch
Интересующийся
 
Сообщений: 100
Зарегистрирован: 11 янв 2013, 13:08

След.

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron