emmet

- mai-com · 27.03.2016

Здравствуйте!Сегодня я хочу поговорить о таком замечательном плагине для Notepad++ как emmet,я нарочно не упоминал его в предыдущей статье Notepad++,потому что этот плагин достоин того что бы написать о его возможностях отдельно.

Этот плагин пригодится тем кто занимается написанием сайтов т.к он значительно сокращает время верстки.

Что же такого замечательного в этом плагине,те кто сталкивался с “версткой”наверняка знают как порой надоедает и сколько времени отнимает то что приходится вводить одни и те же теги по несколько раз,например банально открывающий и закрывающий тег,не говоря уже о более или менее больших строчках кода.

Для того что бы вам стало понятней покажу на примере работу этого плагина,например те кто сталкивался с версткой или хоть отдаленно знают из чего состоит структура веб страницы,знают что даже для того что бы вывести в браузере пустую страничку нужно написать несколько строк кода,а именно:

<!DOCTYPE html>
<html lang=»ru«>
<head>
<meta charset=»utf-8» />
<title>Документ без названия</title>
</head>
<body>

</body>
</html>

Где <!DOCTYPE html> предназначен для указания типа текущего документа

Тег <html lang=”ru”></html>является своеобразным контейнером который заключает в себе все содержимое нашей веб страницы а “атрибут”-lang=”ru” указывает браузеру что контент нашей страницы написан на Русском языке

<head> </head> в этом теге выводится техническая информация,например такая как <meta charset=”utf-8”/> этот тег указывает браузеру в какой кодировке выводится наша страница.

Тег <title></title>предназначен для вывода названия нашей страницы

И наконец тег <body></body> предназначен для того что бы выводить все содержимое нашей веб страницы,грубо говоря все что мы видим на веб странице выводится именно с помощью тега <body><body>.

Например для того что бы на веб странице вывести одну строчку “привет мир”,придется написать

<!DOCTYPE html>
<html lang=»ru«>
   <head>
       <meta charset=»utf-8» />
       <title>Документ без названия</title>
   </head>
   <body>
Привет мир
   </body>
</html>

а если это не просто строчка с приветствием а достаточно серьезный сайт со множеством элементов,таблиц,списков,форм и т.д то можно себе представить сколько времени отнимает написание одних и тех же элементов,так вот для того что бы сократить время написания кода и существует такой плагин как EMMET.

Давайте теперь поближе познакомимся с этим плагином.Для того что бы его скачать и установить запускаем Notepad++,идем во вкладку “плагины” и выбираем пункт “Plugin manager” затем “Show plugin manager” перед нами появится окно в котором побегут строчки с названиями плагинов,дожидаемся когда список дойдет до конца и прокручивая список ищем строчку “Emmet” отмечаем галочкой,нажимаем “instal” и дожидаемся конца установки.

(В некоторых случаях плагин ругается на отсутствие скрипта pyhton скачать его можно здесь здесь )

После установки плагина перезагружаем Notepad++ и идем во вкладку “Опции” и выбираем пункт “Горячие клавиши”далее выбираем вкладку “Plugin comand” и в пункте «Expand abbreviation» и нажимаем кнопку «Modify». Затем выбираем удобные сочетания клавиш если они доступны. Если сочетание доступно но не работает, значит оно где-то уже назначено. При желании можно поискать где именно и снять назначение (назначить другое). А для экспанда использовать понравившееся.К примеру у меня назначено сочетание клавиш “Alt”+”Z”.Аналогичным образом меняем сочетание клавиш для «Wrap with abbreviation».

Теперь о том,как работает данный плагин.К примеру нам нужно создать нашу новую страницу с надписью “привет мир” и теперь нам не нужно вводить все те строки кода которые мы разбирали выше а достаточно ввести всего лишь “!” , нажать назначенное нами сочетание клавиш и получить каркас страницы

<!DOCTYPE html>
    <html lang=»ru«>
    <head>
       <meta charset=»utf-8» />
       <title>Документ без названия</title>
    </head>
    <body>

   </body>
   </html>

Нам останется только написать нашу строчку “привет мир” .

С написанием CSS свойств все еще проще. В основном, сокращение свойств производится по первым буквам. Например: m – margin, ml – margin-left, p – padding, fw — font-weight и так далее.

Если Вам нужен заполняющий текст, так называемая «рыба», то просто набираете lorem запускаете экспанд и все.

Теперь коротко об «Wrap with abbreviation». Это не что иное, как обертка. К примеру, Вы хотите обернуть текст в тег параграфа. Для этого выделяете текст и запускаете врап. Горячие клавиши для него Вы уже назначили. В результате появится окно в котором и нужно прописать р. Или, к примеру, div>p и тогда параграф будет внутри контейнера.

В заключении приведу список сокращений:

Сокращение	Расшифровка сокращения
Базовый синтаксис EMMET
Дочерний: >	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>
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>
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:get form: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	<!— Комментарий —>
cc:ie6	<!—[if lte IE 6]> <![endif]—>
cc:ie	<!—[if IE]> <![endif]—>
cc:noie	<!—[if !IE]><!—> <!—<![endif]—>
Любой тег	div <div></div> span <span></span> Любой другой тег <tagname></tagname>
CSS сокращения
pos	position: relative;
posa	position: absolute;
posr	position: relative;
posf	position: fixed;
t	top: ;
t:a	top: auto;
r	right: ;
r:a	right: auto;
b	bottom: ;
b:a	bottom: auto;
l	left: ;
l:a	left: auto;
z	z-index: ;
za	z-index: auto;
fl	float: left;
fln	float: none;
fr	float: right;
cl	clear: both;
d	display: block;
dn	display: none;
di	display: inline;
dib	display: inline-block;
dt	display: table;
dtc	display: table-cell;
dtr	display: table-row;
v	visibility: hidden;
vv	visibility: visible;
oh	overflow: hidden;
ovv	overflow: visible;
os	code source overflow: scroll;
oa	overflow: auto;
zm	zoom: 1;
cu	cursor: ;
cup	cursor: pointer;
cud	cursor: default;
cuh	cursor: hand;
cuhe	cursor: help;
cum	cursor: move;
cut	cursor: text;
m	margin: ;
m:a	margin: auto;
mt	margin-top: ;
mta	margin-top: auto;
mr	margin-right: ;
mra	margin-right: auto;
mb	margin-bottom: ;
mba	margin-bottom: auto;
ml	margin-left: ;
mla	margin-left: auto;
p	padding: ;
pt	padding-top: ;
pr	padding-right: ;
pb	padding-bottom: ;
pl	padding-left: ;
bsh	-webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color;
bshn	-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
w	width: ;
wa	width: auto;
h	height: ;
ha	height: auto;
maw	max-width: ;
mah	max-height: ;
mw	min-width: ;
mh	min-height: ;
f	font: ;
f+	font: 1em Arial,sans-serif;
fw	font-weight: ;
fwn	font-weight: normal;
fwb	font-weight: bold;
fs	font-style: italic;
fsn	font-style: normal;
fsi	font-style: italic;
fz	font-size: ;
ff	font-family: ;
ffs	font-family: serif;
ffss	font-family: sans-serif;
ffm	font-family: monospace;
ffa	font-family: Arial, «Helvetica Neue», Helvetica, sans-serif;
va	vertical-align: top;
vm	vertical-align: middle;
vabl	vertical-align: baseline;
vb	vertical-align: bottom;
vs	vertical-align: sub;
ta	text-align: left;
tac	text-align: center;
tar	text-align: right;
taj	text-align: justify;
td	text-decoration: none;
tdu	text-decoration: underline;
tdo	text-decoration: overline;
tdl	text-decoration: line-through;
tt	text-transform: uppercase;
ttn	text-transform: none;
ttl	text-transform: lowercase;
ts	text-shadow: hoff voff blur #000;
tra	text-shadow: h v blur rgba(0, 0, 0, .5);
ts+	text-shadow: 0 0 0 #000;
tsn	text-shadow: none;
lh	line-height: ;
lts	letter-spacing: ;
ws	white-space: ;
wsn	white-space: normal;
wsnw	white-space: nowrap;
bg	background: #000;
bg+	background: #fff url() 0 0 no-repeat;
bn	background: none;
bgc	background-color: #fff;
bgt	background-color: transparent;
bgi	background-image: url();
bgin	background-image: none;
bgr	background-repeat: ;
bgrn	background-repeat: no-repeat;
bgrx	background-repeat: repeat-x;
bgry	background-repeat: repeat-y;
bga	background-attachment: ;
baf	background-attachment: fixed;
bas	background-attachment: scroll;
bgp	background-position: 0 0;
bgs	-webkit-background-size: ; background-size: ;
bsa	-webkit-background-size: auto; background-size: auto;
c	color: #000;
cra	color: rgba(0, 0, 0, .5);
op	opacity: ;
ct	content: »;
q	quotes: ;
ol	outline: ;
on	outline: none;
tbl	table-layout: ;
cs	caption-side: ;
ec	empty-cells: ;
bd	border: ;
bd+	border: 1px solid #000;
bdn	border: none;
bdc	border-color: #000;
bdi	-webkit-border-image: url(); -moz-border-image: url(); -o-border-image: url(); border-image: url();
bdin	-webkit-border-image: none; -moz-border-image: none; -o-border-image: none; border-image: none;
bf	-webkit-border-fit: repeat; border-fit: repeat;
bdle	border-length: ;
bsp	border-spacing: ;
bds	border-style: ;
bw	border-width: ;
bt	border-top: ;
bt+	border-top: 1px solid #000;
bdtn	border-top: none;
br	border-right: ;
br+	border-right: 1px solid #000;
bdrn	border-right: none;
bb	border-bottom: ;
bb+	border-bottom: 1px solid #000;
bdbn	border-bottom: none;
bl	border-left: ;
bl+	border-left: 1px solid #000;
bdln	border-left: none;
bdrs	-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;
btrr	border-top-right-radius: ;
bdtrs	border-top-left-radius: ;
bbrr	border-bottom-right-radius: ;
bblr	border-bottom-left-radius: ;
lis	list-style: ;
lisn	list-style: none;
lst	list-style-type: ;
lstn	list-style-type: none;
lstd	list-style-type: disc;
lstc	list-style-type: circle;
lsts	list-style-type: square;
lstdc	list-style-type: decimal;
lsi	list-style-image: ;
lsin	list-style-image: none;
!	!important
@f	@font-face { font-family:; src:url(); }
@f+	@font-face { font-family: ‘FontName’; src: url(‘FileName.eot’); src: url(‘FileName.eot?#iefix’) format(’embedded-opentype’), url(‘FileName.woff’) format(‘woff’), url(‘FileName.ttf’) format(‘truetype’), url(‘FileName.svg#FontName’) format(‘svg’); font-style: normal; font-weight: normal; }
@i	@import url();
@m	@media screen { }
anim	-webkit-animation: ; -o-animation: ; animation: ;
ap	-webkit-appearance: none; -moz-appearance: none; appearance: none;
bgie	filter:progid:DXImageTransform .Microsoft.AlphaImageLoader (src=‘x.png’,sizingMethod=‘crop’);
cm	/ Комментарий /
colm	columns: ;
trf	-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;
trfr	-webkit-transform: rotate(angle); -moz-transform: rotate(angle); -ms-transform: rotate(angle); -o-transform: rotate(angle); transform: rotate(angle);
trfsc	-webkit-transform: scale(x, y); -moz-transform: scale(x, y); -ms-transform: scale(x, y); -o-transform: scale(x, y); transform: scale(x, y);
trft	-webkit-transform: translate(x, y); -moz-transform: translate(x, y); -ms-transform: translate(x, y); -o-transform: translate(x, y); transform: translate(x, y);
tfo	-webkit-transform-origin: ; -moz-transform-origin: ; -ms-transform-origin: ; -o-transform-origin: ; transform-origin: ;
trs	-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;
trsde	-webkit-transition-delay: time; -moz-transition-delay: time; -ms-transition-delay: time; -o-transition-delay: time; transition-delay: time;
trsdu	-webkit-transition-duration: time; -moz-transition-duration: time; -ms-transition-duration: time; -o-transition-duration: time; transition-duration: time;
trsp	-webkit-transition-property: prop; -moz-transition-property: prop; -ms-transition-property: prop; -o-transition-property: prop; transition-property: prop;
us	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

расскажите друзьям

В Мой Мир

emmet

Вам может также понравиться...

Добавить комментарий Отменить ответ

Рубрики

Свежие записи

Использую для продвижения

Использую для заработка

Последние записи

emmet

Сокращение

Расшифровка сокращения

Базовый синтаксис EMMET

HTML сокращения

CSS сокращения

расскажите друзьям

Вам может также понравиться...

Notepad++

почта Gmail

Добавить комментарий Отменить ответ

Рубрики

Свежие записи

Использую для продвижения

Использую для заработка

Последние записи