[TOC]
插件
VSCode折腾记-(1)快捷键大全
【备忘】 vscode 必备插件
VsCode中使用Emmet神器快速编写HTML代码
html代码补全
html:4t、html:4s、html:xt、html:xs、html:xxs、html:5
Child: >
nav>ul>li
<nav><ul> <li></li> </ul> </nav>Sibling: +
div+p+bq
<div></div> <p></p> <blockquote></blockquote>Climb-up: ^
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>Grouping: （）
div>（header>ul>li2>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>Multiplication: *
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>Item numbering:
ul>li.item$3
<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 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">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 and CLASS attributes
＃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>Custom attributes
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>Text: {}
a{Click me}
<a href="">Click me</a>
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>Implicit tag names
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul> <li class="class"></li> </ul>
11 .table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>
HTML
All unknown abbreviations will be transformed to tag， e.g. foo
→ <foo></foo>
.
!
Alias of html:5
<!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="" />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="" />
area:d
<area shape="default" href="" />
area:c
<area shape="circle" coords="" href="" />
area:r
<area shape="rect" coords="" href="" />
area:p
<area shape="poly" coords="" href="" />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
Alias of input[type=hidden name]
<input type="hidden" name="" />
input:h
Alias of input:hidden
<input type="hidden" name="" />
input:text， input:t
Alias of inp
<input type="text" name="" id="" />
input:search
Alias of inp[type=search]
<input type="search" name="" id="" />
input:email
Alias of inp[type=email]
<input type="email" name="" id="" />
input:url
Alias of inp[type=url]
<input type="url" name="" id="" />
input:password
Alias of inp[type=password]
<input type="password" name="" id="" />
input:p
Alias of input:password
<input type="password" name="" id="" />
input:datetime
Alias of inp[type=datetime]
<input type="datetime" name="" id="" />
input:date
Alias of inp[type=date]
<input type="date" name="" id="" />
input:datetime-local
Alias of inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month
Alias of inp[type=month]
<input type="month" name="" id="" />
input:week
Alias of inp[type=week]
<input type="week" name="" id="" />
input:time
Alias of inp[type=time]
<input type="time" name="" id="" />
input:number
Alias of inp[type=number]
<input type="number" name="" id="" />
input:color
Alias of inp[type=color]
<input type="color" name="" id="" />
input:checkbox
Alias of inp[type=checkbox]
<input type="checkbox" name="" id="" />
input:c
Alias of input:checkbox
<input type="checkbox" name="" id="" />
input:radio
Alias of inp[type=radio]
<input type="radio" name="" id="" />
input:r
Alias of input:radio
<input type="radio" name="" id="" />
input:range
Alias of inp[type=range]
<input type="range" name="" id="" />
input:file
Alias of inp[type=file]
<input type="file" name="" id="" />
input:f
Alias of input:file
<input type="file" name="" id="" />
input:submit
<input type="submit" value="" />
input:s
Alias of input:submit
<input type="submit" value="" />
input:image
<input type="image" src="" />
input:i
Alias of input:image
<input type="image" src="" />
input:button
<input type="button" value="" />
input:b
Alias of input:button
<input type="button" value="" />
input:reset
Alias of input:button[type=reset]
<input type="reset" value="" />isindex
<isindex />option
<option value=""></option>textarea
<textarea name="" id="" cols="30" rows="10"></textarea>menu:context
Alias of menu[type=context]>
<menu type="context"></menu>
menu:c
Alias of menu:context
<menu type="context"></menu>
menu:toolbar
Alias of menu[type=toolbar]>
<menu type="toolbar"></menu>
menu:t
Alias of 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
Alias of blockquote
<blockquote></blockquote>acr
Alias of acronym
<acronym title=""></acronym>fig
Alias of figure
<figure></figure>figc
Alias of figcaption
<figcaption></figcaption>ifr
Alias of iframe
<iframe src="" frameborder="0"></iframe>emb
Alias of embed
<embed src="" type="" />obj
Alias of object
<object data="" type=""></object>src
Alias of source
<source></source>cap
Alias of caption
<caption></caption>colg
Alias of colgroup
<colgroup></colgroup>fst， fset
Alias of fieldset
<fieldset></fieldset>btn
Alias of button
<button></button>
btn:b
Alias of button[type=button]
<button type="button"></button>
btn:r
Alias of button[type=reset]
<button type="reset"></button>
btn:s
Alias of button[type=submit]
<button type="submit"></button>optg
Alias of optgroup
<optgroup></optgroup>
opt
Alias of option
<option value=""></option>tarea
Alias of textarea
<textarea name="" id="" cols="30" rows="10"></textarea>leg
Alias of legend
<legend></legend>sect
Alias of section
<section></section>art
Alias of article
<article></article>hdr
Alias of header
<header></header>ftr
Alias of footer
<footer></footer>adr
Alias of address
<address></address>dlg
Alias of dialog
<dialog></dialog>str
Alias of strong
<strong></strong>prog
Alias of progress
<progress></progress>datag
Alias of datagrid
<datagrid></datagrid>datal
Alias of datalist
<datalist></datalist>kg
Alias of keygen
<keygen />out
Alias of output
<output></output>det
Alias of details
<details></details>cmd
Alias of command
<command />doc
Alias of html>（head>meta[charset=UTF-8]+title{${1:Document}}）+body
<html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>
doc4
Alias of html>（head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}}）+body
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>html:4t
Alias of !!!4t+doc4[lang=${lang}]
<!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
Alias of !!!4s+doc4[lang=${lang}]
<!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
Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!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
Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!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
Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]
<!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
Alias of !!!+doc[lang=${lang}]
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>ol+
Alias of ol>li
<ol> <li></li> </ol>
ul+
Alias of ul>li
<ul> <li></li> </ul>
dl+
Alias of dl>dt+dd
<dl> <dt></dt> <dd></dd> </dl>
map+
Alias of map>area
<map name=""> <area shape="" coords="" href="" /> </map>
table+
Alias of table>tr>td
<table> <tr> <td></td> </tr> </table>
colgroup+， colg+
Alias of colgroup>col
<colgroup> <col /> </colgroup>
tr+
Alias of tr>td
<tr> <td></td> </tr>
Alias of >option
< name="" id=""> <option value=""></option> </>
optgroup+， optg+
Alias of optgroup>option
<optgroup> <option value=""></option> </optgroup>
- !!!
<!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
cc:ie6
cc:ie
cc:noie
￥{child}
