No processo de desenvolvimento front-end, a maior parte do trabalho é escrever código HTM L e CSS . Ao escrever código manualmente, a eficiência será particularmente baixa, porque você precisa digitar muitos colchetes angulares.Embora alguns softwares forneçam aos desenvolvedores algumas maneiras de escrever código rapidamente, a melhoria da eficiência não é particularmente óbvia.
Então, Emmet (anteriormente Zen Coding) nasceu!
Ele pode melhorar muito a eficiência da escrita do código, fornece regras gramaticais muito concisas e, em seguida, gera imediatamente a estrutura HTML ou código CSS correspondente, embora haja muitas funções práticas para ajudar no desenvolvimento do front-end.
No momento, muitas ferramentas de desenvolvimento de front-end, incluindo Webstorm, HBuilder, Dreamweaver, VSCode, etc. integraram o Emmet.
Todos os editores que não integram o Emmet fornecem plug-ins de instalação, como Sublime Text, Eclipse / Aptana, Notepad ++, etc.
Em relação às teclas de atalho do Emmet do webstorm, existem online, mas não existe uma coleção geral.
Com base em minha própria experiência de uso do Webstorm, escrevi este artigo, resumi os atalhos de Emmet e fiz um guia para iniciantes.
Emmet No webstorm, você pode gerar o código completo correspondente por código abreviado + tecla tab .
Para obter mais abreviações, consulte o site oficial da Emmet: https://docs.emmet.io/cheat-sheet/
Um, escreva etiqueta
1. Gere rapidamente a estrutura da página da web HTML5
! + 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>Pessoalmente, acho que a estrutura HTML5 gerada dessa forma é mais realista do que a estrutura HTML5 que vem com o webstorm.
2. Gerar meta
Configurações de codificação
meta:utf + tab
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">Viewport é o código necessário para o desenvolvimento móvel.
meta:vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. Gerar link
Apresente arquivos CSS.
link
<link rel="stylesheet" href="">link:css
<link rel="stylesheet" href="style.css">Apresente pequenos ícones de sites.
link:favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">4. id （#）, classe （.）
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. Propriedades ([])
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. Nó filho (>), nó irmão (+), nó superior (^)
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. Repita (*), conteúdo ({}), incremento automático ($)
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>Inserir texto sem sentido : lorem é seguido por um número para gerar uma quantidade correspondente de texto sem sentido, completar o texto e facilitar a composição
lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?8. Algumas circunstâncias especiais
(1) Tags com mais tipos
Por exemplo, a, input e assim por diante.
O seguinte também pode ser usado tag [attribute = value] maneira de escrever
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) Se você não escrever o nome do rótulo, o padrão é div
.box
<div class="box"></div>(3) As subtiquetas independentes podem ser omitidas
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. Estilo de escrita
Princípio básico do estilo de escrita, a abreviação é a primeira letra de uma palavra.
tdn
text-decoration: none;
ovh
overflow: hidden;Se houver um valor, escreva-o logo atrás.
h100px
height: 100px;Para valores não numéricos, use dois pontos (:) para conectar a primeira letra.
bg:n
background: none;Para mais abreviações de estilo, você pode consultar o site oficial do Emmet: https://docs.emmet.io/cheat-sheet/
De modo geral, eu pessoalmente sinto que preciso escrever mais para ser proficiente. Se você se tornar proficiente, sua eficiência no trabalho aumentará naturalmente.