前端框架常用插件（前端插件emmet语法速查表）

威哥 2023-05-02 04:11:45 192

前端框架常用插件（前端插件emmet语法速查表）a:mail <a href="mailto:"></a>a:link <a href="http://"></a>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"></

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

前端框架常用插件（前端插件emmet语法速查表）(1)

基本语法

子级：>

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="https://img.aigexing.com"></script>

img <img src="https://img.aigexing.com" alt="" />

img:srcset img:s <img srcset="" src="https://img.aigexing.com" alt="" />

img:sizes img:z <img sizes="" srcset="" src="https://img.aigexing.com" alt="" />

picture <picture></picture>

source src <source />

source:src src:sc <source src="https://img.aigexing.com" type="" />

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

iframe <iframe src="https://img.aigexing.com" frameborder="0"></iframe>

embed <embed src="https://img.aigexing.com" 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="https://img.aigexing.com"></video>

audio <audio src="https://img.aigexing.com"></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="https://img.aigexing.com" frameborder="0"></iframe>

emb <embed src="https://img.aigexing.com" 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="https://img.aigexing.com" alt="" />

ri:viewport ri:v <img sizes="" srcset="" src="https://img.aigexing.com" alt="" />

ri:art ri:a

ri:type ri:t

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>

map

table

colgroup colg

select

optgroup optg

pic

!!!

<!DOCTYPE html>

!!!4t

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