前端开发必备
介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。
基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。
Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
示例在编辑器中输入缩写代码ul>li*5，然后按下拓展键（默认为tab），即可得到代码片段：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
编辑器插件
以下都是Emmet为编辑器提供的安装插件。
Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSPad
textarea
CodeMirror
Brackets
NetBeans
Adobe Dreamweaver
在线编辑器的支持：
JSFiddle
JS Bin
CodePen
ICEcoder
Divshot
Codio
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。
SynWrite
WebStorm
PhpStorm
Vim
HTML-Kit
HippoEDIT
CodeLobster PHP Edition
TinyMCE
语法后代：>
nav>ul>li
<nav> <ul> <li></li> </ul></nav>
兄弟：+
div+p+bq
<div></div><p></p><blockquote></blockquote>
上级：^
div+div>p>span+em^bq
<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>
div+div>p>span+em^^bq
<div></div><div> <p><span></span><em></em></p></div><blockquote></blockquote>
分组：()
div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div>
(div>dl>(dt+dd)*3)+footer>p
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer>
乘法：*
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
自增符号：$
ul>li.item$*5
<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
<h1 id="Header">Header 1</h1><h2 id="Header">Header 2</h2><h3 id="Header">Header 3</h3>
ul>li.item$$$*5
<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
<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
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>
ID和类属性
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
p[title="Hello world"]
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本：{}
a{Click me}
<a href="">Click me</a>
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</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
所有未知的缩写都会转换成标签，例如，foo →
!
<!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>
abbr
<abbr title=""></abbr>
acronym
<acronym title=""></acronym>
base
<base href="" />
basefont
<basefont />
br
<br />
frame
<frame />
hr
<hr />
bdo
<bdo dir=""></bdo>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
col
<col />
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
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
<meta />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
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" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
iframe
<iframe src="" frameborder="0"></iframe>
embed
<embed src="" type="" />
object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
area:d
<area shape="default" href="" alt="" />
area:c
<area shape="circle" coords="" href="" alt="" />
area:r
<area shape="rect" coords="" href="" alt="" />
area:p
<area shape="poly" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="text" />
input:text input:t inp
<input type="text" name="" id="" />
input:hidden input:h input[type=hidden name]
<input type="hidden" name="" />
input:search inp[type=search]
<input type="search" name="" id="" />
input:email inp[type=email]
<input type="email" name="" id="" />
input:url inp[type=url]
<input type="url" name="" id="" />
input:password input:p inp[type=password]
<input type="password" name="" id="" />
input:datetime inp[type=datetime]
<input type="datetime" name="" id="" />
input:date inp[type=date]
<input type="date" name="" id="" />
input:datetime-local inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month inp[type=month]
<input type="month" name="" id="" />
input:week inp[type=week]
<input type="week" name="" id="" />
input:time inp[type=time]
<input type="time" name="" id="" />
input:number inp[type=number]
<input type="number" name="" id="" />
input:color inp[type=color]
<input type="color" name="" id="" />
input:checkbox input:c inp[type=checkbox]
<input type="checkbox" name="" id="" />
input:radio input:r inp[type=radio]
<input type="radio" name="" id="" />
input:range inp[type=range]
<input type="range" name="" id="" />
input:file input:f inp[type=file]
<input type="file" name="" id="" />
input:submit input:s
<input type="submit" value="" />
input:image input:i
<input type="image" src="" alt="" />
input:button input:b
<input type="button" value="" />
input:reset input:button[type=reset]
<input type="reset" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:context menu:c menu[type=context]
<menu type="context"></menu>
menu:toolbar menu:t menu[type=toolbar]
<menu type="toolbar"></menu>
video
<video src=""></video>
audio
<audio src=""></audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
keygen
<keygen />
command
<command />
bq blockquote
<blockquote></blockquote>
acr acronym
<acronym title=""></acronym>
fig figure
<figure></figure>
figc figcaption
<figcaption></figcaption>
ifr iframe
<iframe src="" frameborder="0"></iframe>
emb embed
<embed src="" type="" />
obj object
<object data="" type=""></object>
src source
<source></source>
cap caption
<caption></caption>
colg colgroup
<colgroup></colgroup>
fst fset fieldset
<fieldset></fieldset>
btn button
<button></button>
btn:b button[type=button]
<button type="button"></button>
btn:r button[type=reset]
<button type="reset"></button>
btn:s button[type=submit]
<button type="submit"></button>
关于更多的HTML以及CSS的缩写请查看：官网文档
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
