编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

前端插件emmet语法速查表，学会可以节省一半的敲代码时间

wxchong 2024-07-08 23:17:55 开源技术 8 ℃ 0 评论

不管用什么编辑器，基本都有这个emmet插件了。会用了，用的多了还是很省力。

基本语法

  • 子级：>
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>

有几个^，可以向外爬几层。当然爬到body就爬不动了。

  • 组：（）

先算乘除后算加减，括号内的要先算，一个道理

(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>
乘多少生成多少
  • 累加：$

相当于js中for循环变量i.

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>
  • id和class快捷命名
#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用法

基本是加tab键自动闭合的用法。

！ 自动生成html5规范文档

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

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

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

abbr <abbr title=""></abbr>(鼠标移动悬浮title标签)

acronym, acr <acronym title=""></acronym>(理解可同abbr)

base <base href="" />(所有链接规定默认的地址)

basefont <basefont />（写到head内，默认颜色和字号）

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" />

link:import, link:im<link rel="import" href="component.html" />

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="" />

img:srcset, img:s <img srcset="" src="" alt="" />

img:sizes, img:z <img sizes="" srcset="" src="" alt="" />

picture <picture></picture>

source, src <source />

source:src, src:sc <source src="" type="" />

source:srcset, src:s <source srcset="" />

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,c,r,p来生成不同的形状

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:h <input type="hidden" name="" />

input:text, input:t <input type="text" name="" id="" />

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

input基本是什么加类型就可以生成，如input:time,password，后面就不再列举

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

select:disabled, select:d <select name="" id="" disabled="disabled"></select>

option, opt <option value=""></option>

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

marquee <marquee behavior="" direction=""></marquee>

menu:context, menu:c <menu type="context"></menu>

menu:toolbar, menu:t <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 />

button:submit, btn:s <button type="submit"></button>

button:reset, btn:r <button type="reset"></button>

button:disabled, btn:d <button disabled="disabled"></button>

fieldset:disabled, fst:d <fieldset disabled="disabled"></fieldset>

bq <blockquote></blockquote>

fig <figure></figure>

figc <figcaption></figcaption>

pic <picture></picture>

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

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

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

cap <caption></caption>

colg <colgroup></colgroup>

fst, fset <fieldset></fieldset>

btn <button></button>

optg <optgroup></optgroup>

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

leg <legend></legend>

sect <section></section>

art <article></article>

hdr <header></header>

ftr <footer></footer>

adr <address></address>

dlg <dialog></dialog>

str <strong></strong>

prog <progress></progress>

mn <main></main>

tem <template></template>

datag <datagrid></datagrid>

datal <datalist></datalist>

kg <keygen />

out <output></output>

det <details></details>

cmd<command />

doc

<html>
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>
</body>
</html>

doc4

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

ri:dpr, ri:d<img srcset="" src="" alt="" />

ri:viewport, ri:v<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a

<picture>
 <source media="(min-width: )" srcset="" />
 <img src="" alt="" />
</picture>

ri:type, ri:t

<picture>
 <source srcset="" type="image/" />
 <img src="" alt="" />
</picture>

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

ol+

<ol>
 <li></li>
</ol>

ul+

<ul>
 <li></li>
</ul>

dl+

<dl>
 <dt></dt>
 <dd></dd>
</dl>

map+

<map name="">
 <area shape="" coords="" href="" alt="" />
</map>

table+

<table>
 <tr>
 <td></td>
 </tr>
</table>

colgroup+, colg+

<colgroup>
 <col />
</colgroup>

tr+

<tr>
 <td></td>
</tr>

select+

<select name="" id="">
 <option value=""></option>
</select>

optgroup+, optg+

<optgroup>
 <option value=""></option>
</optgroup>

pic+

<picture>
 <source srcset="" />
 <img src="" alt="" />
</picture>

!!!

<!DOCTYPE html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c

<!-- ${child} -->

cc:ie6

<!--[if lte IE 6]>
 ${child}
<![endif]-->

cc:ie

<!--[if IE]>
 ${child}
<![endif]-->

cc:noie

<!--[if !IE]><!-->
 ${child}
<!--<![endif]-->

其他

除了基本语法和html,emment还提供了css及xsl的使用。

用法也是简写+tab,有兴趣可以参考官方的文档

docs.emmet.io/cheat-sheet

一行代码搭建页面框架

div#header>ul.nav>li*5^^^div#content>h1>a^^^div#footer

 <div id="header">
 <ul class="nav">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <div id="content">
 <h1><a href=""></a></h1>
 </div>
 <div id="footer"></div>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2