Front-end development essential artifact Emmet Guide

Others 2019-12-05 22:27:56 views: null

Emmet (formerly known as Zen Coding) is a front-end development can greatly improve the efficiency of a tool:

Basically, most of the text editor will allow you to store and reuse blocks of code, which we call "slice." Although the fragment can well you have to push productivity, but most implementations have such a drawback: you must first define the code snippet you have, and can not be expanded at runtime.

Emmet fragment to improve this concept to a new level: You can set the CSS forms can be resolved dynamic expression, and then get the appropriate content based on the abbreviation you entered. Emmet is very mature and very suitable for writing HTML / XML
front-end developer and CSS code, but can also be used in programming languages.

Example of use:

Input abbreviation code in the editor: UL> Li *. 5, and then press the expansion key (default tab), to get the code fragment:

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

Instructions

emmet to use is also very simple to Notepad ++, for example, directly enter the abbreviation HTML or CSS code in the editor and press Ctrl + E keys can be expanded to the full code snippet. (If there is a conflict with existing shortcuts, you can own it in the editor is set to expand to other key shortcuts)

grammar:

Offspring:>

Abbreviations : nav> ul> li

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

Brothers: +

Abbreviations : div + p + bq

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

Superior: ^

Abbreviations : div + div> p> span + em ^ bq

1
2
3
4
5
 
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Abbreviations : div + div> p> span + em ^^ bq

1
2
3
4
5
 
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Packet :()

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

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

Abbreviations : (div> dl> (dt + dd) * 3) + footer> p

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

multiplication:*

Abbreviations : ul> li * 5

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

自增符号：$

缩写：ul>li.item$*5

1
2
3
4
5
6
7
 
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

缩写：h$[title=item$]{Header $}*3

1
2
3
 
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

1
2
3
4
5
6
7
 
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

缩写：ul>li.item$@-*5

1
2
3
4
5
6
7
 
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

缩写：ul>li.item$@3*5

1
2
3
4
5
6
7
 
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID和类属性

缩写：#header

1
 
<div id="header"></div>

缩写：.title

1
 
<div class="title"></div>

缩写：form#search.wide

1
 
<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

1
 
<p class="class1 class2 class3"></p>

自定义属性

缩写：p[title="Hello world"]

1
 
<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

1
 
<td rowspan="2" colspan="3" title=""></td>

缩写：[a='value1' b="value2"]

1
 
<div a="value1" b="value2"></div>

文本：{}

缩写：a{Click me}

1
 
<a href="">Click me</a>

缩写：p>{Click }+a{here}+{ to continue}

1
 
<p>Click <a href="">here</a> to continue</p>

隐式标签

缩写：.class

1
 
<div class="class"></div>

缩写：em>.class

1
 
<em><span class="class"></span></em>

缩写：ul>.class

1
2
3
 
<ul>
    <li class="class"></li>
</ul>

缩写：table>.row>.col

1
2
3
4
5
 
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

HTML

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

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

</body>
</html>

缩写：a

1
 
<a href=""></a>

缩写：a:link

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

缩写：a:mail

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

缩写：abbr

1
 
<abbr title=""></abbr>

缩写：acronym

1
 
<acronym title=""></acronym>

缩写：base

1
 
<base href="" />

缩写：basefont

1
 
<basefont />

缩写：br

1
 
<br />

缩写：frame

1
 
<frame />

缩写：hr

1
 
<hr />

缩写：bdo

1
 
<bdo dir=""></bdo>

缩写：bdo:r

1
 
<bdo dir="rtl"></bdo>

缩写：bdo:l

1
 
<bdo dir="ltr"></bdo>

缩写：col

1
 
<col />

缩写：link

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

缩写：link:css

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

缩写：link:print

1
 
<link rel="stylesheet" href="print.css" media="print" />

缩写：link:favicon

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

缩写：link:touch

1
 
<link rel="apple-touch-icon" href="favicon.png" />

缩写：link:rss

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

缩写：link:atom

1
 
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

缩写：meta

1
 
<meta />

缩写：meta:utf

大专栏   前端开发必备神器Emmet使用指南ight plain"> 
1
 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写：meta:win

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

缩写：meta:vp

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

缩写：meta:compat

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

缩写：style

1
 
<style></style>

缩写：script

1
 
<script></script>

缩写：script:src

1
 
<script src=""></script>

缩写：img

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

缩写：iframe

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

缩写：embed

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

缩写：object

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

缩写：param

1
 
<param name="" value="" />

缩写：map

1
 
<map name=""></map>

缩写：area

1
 
<area shape="" coords="" href="" alt="" />

缩写：area:d

1
 
<area shape="default" href="" alt="" />

缩写：area:c

1
 
<area shape="circle" coords="" href="" alt="" />

缩写：area:r

1
 
<area shape="rect" coords="" href="" alt="" />

缩写：area:p

1
 
<area shape="poly" coords="" href="" alt="" />

缩写：form

1
 
<form action=""></form>

缩写：form:get

1
 
<form action="" method="get"></form>

缩写：form:post

1
 
<form action="" method="post"></form>

缩写：label

1
 
<label for=""></label>

缩写：input

1
 
<input type="text" />

缩写：inp

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

缩写：input:hidden

别名：input[type=hidden name]

1
 
<input type="hidden" name="" />

缩写：input:h

别名：input:hidden

1
 
<input type="hidden" name="" />

缩写：input:text, input:t

别名：inp

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

缩写：input:search

别名：inp[type=search]

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

缩写：input:email

别名：inp[type=email]

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

缩写：input:url

别名：inp[type=url]

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

缩写：input:password

别名：inp[type=password]

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

缩写：input:p

别名：input:password

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

缩写：input:datetime

别名：inp[type=datetime]

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

缩写：input:date

别名：inp[type=date]

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

缩写：input:datetime-local

别名：inp[type=datetime-local]

1
 
<input type="datetime-local" name="" id="" />

缩写：input:month

别名：inp[type=month]

1
 
<input type="month" name="" id="" />

缩写：input:week

别名：inp[type=week]

1
 
<input type="week" name="" id="" />

缩写：input:time

别名：inp[type=time]

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

缩写：input:number

别名：inp[type=number]

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

缩写：input:color

别名：inp[type=color]

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

缩写：input:checkbox

别名：inp[type=checkbox]

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

缩写：input:c

别名：input:checkbox

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

缩写：input:radio

别名：inp[type=radio]

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

缩写：input:r

别名：input:radio

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

缩写：input:range

别名：inp[type=range]

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

缩写：input:file

别名：inp[type=file]

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

缩写：input:f

别名：input:file

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

缩写：input:submit

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

缩写：input:s

别名：input:submit

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

缩写：input:image

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

缩写：input:i

别名：input:image

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

缩写：input:button

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

缩写：input:b

别名：input:button

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

缩写：isindex

1
 
<isindex />

缩写：input:reset

别名：input:button[type=reset]

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

缩写：select

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

缩写：option

1
 
<option value=""></option>

缩写：textarea

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

缩写：menu:context

别名：menu[type=context]>

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

缩写：menu:c

别名：menu:context

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

缩写：menu:toolbar

别名：menu[type=toolbar]>

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

缩写：menu:t

别名：menu:toolbar

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

缩写：video

1
 
<video src=""></video>

缩写：audio

1
 
<audio src=""></audio>

缩写：html:xml

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

缩写：keygen

1
 
<keygen />

缩写：command

1
 
<command />

缩写：bq

别名：blockquote

1
 
<blockquote></blockquote>

缩写：acr

别名：acronym

1
 
<acronym title=""></acronym>

缩写：fig

别名：figure

1
 
<figure></figure>

缩写：figc

别名：figcaption

1
 
<figcaption></figcaption>

缩写：ifr

别名：iframe

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

缩写：emb

别名：embed

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

缩写：obj

别名：object

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

缩写：src

别名：source

1
 
<source></source>

缩写：cap

别名：caption

1
 
<caption></caption>

缩写：colg

别名：colgroup

1
 
<colgroup></colgroup>

缩写：fst, fset

别名：fieldset

1
 
<fieldset></fieldset>

缩写：btn

别名：button

1
 
<button></button>

缩写：btn:b

别名：button[type=button]

1
 
<button type="button"></button>

Abbreviations : btn: r

Alias: button [type = reset]

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

Abbreviations : btn: s

Alias: button [type = submit]

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

Guess you like

Origin www.cnblogs.com/liuzhongrong/p/11992177.html
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com