jsrun支持emmet这款高效的输入工具
emmet的使用方法非常的简单, 在编辑器中输入HTML或CSS的代码的缩写, 然后按tab键就可以拓展为完整的代码片段。
下文为Emmet的缩写手册,加入收藏夹,以备不时之需哦。
<nav>
<ul>
<li></li>
</ul>
</nav>
<div></div>
<p></p>
<blockquote></blockquote>
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
<div id="header"></div>
<div class="title"></div>
<form id="search" class="wide"></form>
<p class="class1 class2 class3"></p>
<p title="Hello world"></p>
<td rowspan="2" colspan="3" title=""></td>
<div a="value1" b="value2"></div>
<a href="">Click me</a>
<p>Click <a href="">here</a> to continue</p>
<div class="class"></div>
<em><span class="class"></span></em>
<ul>
<li class="class"></li>
</ul>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
所有未知的缩写都会转换成标签,例如,foo →
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
emmet 缩写 | 别名 | 结果 |
---|---|---|
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" /> |
|
inp | <input type="text" name="" id="" /> |
|
input:hidden | input[type=hidden name] | <input type="hidden" name="" /> |
input:h | input:hidden | <input type="hidden" name="" /> |
input:text, input:t | inp | <input type="text" name="" id="" /> |
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 | inp[type=password] | <input type="password" name="" id="" /> |
input:p | input: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 | inp[type=checkbox] | <input type="checkbox" name="" id="" /> |
input:c | input:checkbox | <input type="checkbox" name="" id="" /> |
input:radio | inp[type=radio] | <input type="radio" name="" id="" /> |
input:r | input:radio | <input type="radio" name="" id="" /> |
input:range | inp[type=range] | <input type="range" name="" id="" /> |
input:file | inp[type=file] | <input type="file" name="" id="" /> |
input:f | input:file | <input type="file" name="" id="" /> |
input:submit | <input type="submit" value="" /> |
|
input:s | input:submit | <input type="submit" value="" /> |
input:image | <input type="image" src="" alt="" /> |
|
input:i | input:image | <input type="image" src="" alt="" /> |
input:button | <input type="button" value="" /> |
|
input:b | input:button | <input type="button" value="" /> |
isindex | <isindex /> |
|
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[type=context]> | <menu type="context"></menu> |
menu:c | menu:context | <menu type="context"></menu> |
menu:toolbar | menu[type=toolbar]> | <menu type="toolbar"></menu> |
menu:t | menu: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> |