In the process of front-end development, most of the work is to write HTM L and CSS code . When writing code manually, the efficiency will be particularly low, because you need to type a lot of angle brackets. Although some software provides developers with some ways to write code quickly, the efficiency improvement is not particularly obvious.
So, Emmet (formerly Zen Coding) was born!
It can greatly improve the efficiency of code writing, it provides a very concise grammatical rules, and then immediately generates the corresponding HTML structure or CSS code, while there are many practical functions to help front-end development.
At present, many front-end development tools, including Webstorm, HBuilder, Dreamweaver, VSCode, etc. have integrated Emmet.
Editors that do not integrate Emmet provide installation plug-ins, such as Sublime Text, Eclipse/Aptana, Notepad++, etc.
Regarding webstorm’s Emmet shortcut keys, there are online, but there is no general collection.
Based on my own experience of using Webstorm, I wrote this article, summarized Emmet's shortcuts, and made a guide for novices.
Emmet In webstorm, you can generate the corresponding complete code by shorthand code + tab key .
For more abbreviations, please refer to Emmet's official website: https://docs.emmet.io/cheat-sheet/
One, write label
1. Quickly generate HTML5 web page structure
! + tab
html:5 + tab<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>I personally think that the HTML5 framework generated in this way is more realistic than the HTML5 framework that comes with webstorm.
2. Generate meta
Encoding settings
meta:utf + tab
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">Viewport is the necessary code for mobile development.
meta:vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. Generate link
Introduce CSS files.
link
<link rel="stylesheet" href="">link:css
<link rel="stylesheet" href="style.css">Introduce small website icons.
link:favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">4. id（#）,class（.）
div.box
<div class="box"></div>
div#header
<div id="header"></div>
div.box#header
<div class="box" id="header"></div>
div.box.top#header
<div class="box top" id="header"></div>5. Properties ([])
div[title]
<div title=""></div>
div[title]
<div title=""></div>
button[type=submit][name=login]
<button type="submit" name="login"></button>
button[type=submit name=login]
<button type="submit" name="login"></button>6. Child node (>), sibling node (+), superior node (^)
div.box>p
<div class="box">
<p></p>
</div>
div.box+p
<div class="box"></div>
<p></p>
div.box>p+div.small^div.next
<div class="box">
<p></p>
<div class="small"></div>
</div>
<div class="next"></div>
7. Repeat (* ), content ({} ), auto-increment ($)
ul.list>li*3
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
ul.list>li{这个是列表}*3
<ul class="list">
<li>这个是列表</li>
<li>这个是列表</li>
<li>这个是列表</li>
</ul>
ul.list>li.item${这个是列表 $ }*3
<ul class="list">
<li class="item1">这个是列表 1</li>
<li class="item2">这个是列表 2</li>
<li class="item3">这个是列表 3</li>
</ul>
ul.list>li{ 内容 $$$}*3
<ul class="list">
<li> 内容 001</li>
<li> 内容 002</li>
<li> 内容 003</li>
</ul>Insert meaningless text : lorem is followed by a number to generate a corresponding amount of meaningless text, complete the text, and facilitate typesetting
lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?8. Some special circumstances
(1) Tags with more types
For example, a, input, and so on.
The following can also be used tag [attribute = value] way to write
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>input
<input type="text">
input:button
<input type="button" value="">
input:submit
<input type="submit" value="">
input:range
<input type="range" name="" id="">
input:radio
<input type="radio" name="" id="">(2) If you do not write the label name, the default is div
.box
<div class="box"></div>(3) The self-contained sub-tags can be omitted
table>.a>.b*2
<table>
<tr class="a">
<td class="b"></td>
<td class="b"></td>
</tr>
</table>
ul>.item*2
<ul>
<li class="item"></li>
<li class="item"></li>
</ul>2. Writing style
The main principle of writing style, the abbreviation is the first letter of a word.
tdn
text-decoration: none;
ovh
overflow: hidden;If there is a value, write it directly behind.
h100px
height: 100px;For non-numeric values, use a colon (:) to connect the first letter.
bg:n
background: none;For more style abbreviations, you can refer to Emmet's official website: https://docs.emmet.io/cheat-sheet/
Generally speaking, I personally feel that I need to write more to be proficient. If you become proficient, your work efficiency will naturally increase.