VS Code

[TOC]

插件

VSCode折騰記-(1)快捷鍵大全

【備忘】 vscode 必備插件
VsCode中使用Emmet神器快速編寫HTML代碼

html代碼補全

html:4t况凉、html:4s衫哥、html:xt、html:xs膛锭、html:xxs蚊荣、html:5

  1. Child: >
    nav>ul>li
    <nav><ul> <li></li> </ul> </nav>

  2. Sibling: +
    div+p+bq
    <div></div> <p></p> <blockquote></blockquote>

  3. 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>

  4. 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>

  5. Multiplication: *
    ul>li*5
    <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

  6. 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>

  7. 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>

  8. 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>

  9. Text: {}
    a{Click me}
    <a href="">Click me</a>
    p>{Click }+a{here}+{ to continue}
    <p>Click <a href="">here</a> to continue</p>

  10. 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>
.

  1. !
    Alias of html:5
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

  2. a
    <a href=""></a>

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

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

  5. abbr
    <abbr title=""></abbr>

  6. acronym
    <acronym title=""></acronym>

  7. base
    <base href="" />

  8. basefont
    <basefont />

  9. br
    <br />

  10. frame
    <frame />

  11. hr
    <hr />

  12. bdo
    <bdo dir=""></bdo>

  13. bdo:r
    <bdo dir="rtl"></bdo>

  14. bdo:l
    <bdo dir="ltr"></bdo>

  15. col
    <col />

  16. link
    <link rel="stylesheet" href="" />

  17. link:css
    <link rel="stylesheet" href="style.css" />

  18. link:print
    <link rel="stylesheet" href="print.css" media="print" />

  19. link:favicon
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  20. link:touch
    <link rel="apple-touch-icon" href="favicon.png" />

  21. link:rss
    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

  22. link:atom
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

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

  24. style
    <style></style>

  25. script
    <script></script>
    script:src
    <script src=""></script>

  26. img
    <img src="" />

  27. iframe
    <iframe src="" frameborder="0"></iframe>

  28. embed
    <embed src="" type="" />

  29. object
    <object data="" type=""></object>

  30. param
    <param name="" value="" />

  31. map
    <map name=""></map>

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

  33. form
    <form action=""></form>
    form:get
    <form action="" method="get"></form>
    form:post
    <form action="" method="post"></form>

  34. label
    <label for=""></label>

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

  36. isindex
    <isindex />

  37. option
    <option value=""></option>

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

  39. 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>

  40. video
    <video src=""></video>

  41. audio
    <audio src=""></audio>
    html:xml
    <html xmlns="http://www.w3.org/1999/xhtml"></html>

  42. keygen
    <keygen />

  43. command
    <command />

  44. bq
    Alias of blockquote
    <blockquote></blockquote>

  45. acr
    Alias of acronym
    <acronym title=""></acronym>

  46. fig
    Alias of figure
    <figure></figure>

  47. figc
    Alias of figcaption
    <figcaption></figcaption>

  48. ifr
    Alias of iframe
    <iframe src="" frameborder="0"></iframe>

  49. emb
    Alias of embed
    <embed src="" type="" />

  50. obj
    Alias of object
    <object data="" type=""></object>

  51. src
    Alias of source
    <source></source>

  52. cap
    Alias of caption
    <caption></caption>

  53. colg
    Alias of colgroup
    <colgroup></colgroup>

  54. fst, fset
    Alias of fieldset
    <fieldset></fieldset>

  55. 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>

  56. optg
    Alias of optgroup
    <optgroup></optgroup>
    opt
    Alias of option
    <option value=""></option>

  57. tarea
    Alias of textarea
    <textarea name="" id="" cols="30" rows="10"></textarea>

  58. leg
    Alias of legend
    <legend></legend>

  59. sect
    Alias of section
    <section></section>

  60. art
    Alias of article
    <article></article>

  61. hdr
    Alias of header
    <header></header>

  62. ftr
    Alias of footer
    <footer></footer>

  63. adr
    Alias of address
    <address></address>

  64. dlg
    Alias of dialog
    <dialog></dialog>

  65. str
    Alias of strong
    <strong></strong>

  66. prog
    Alias of progress
    <progress></progress>

  67. datag
    Alias of datagrid
    <datagrid></datagrid>

  68. datal
    Alias of datalist
    <datalist></datalist>

  69. kg
    Alias of keygen
    <keygen />

  70. out
    Alias of output
    <output></output>

  71. det
    Alias of details
    <details></details>

  72. cmd
    Alias of command
    <command />

  73. 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>

  74. 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>

  75. html:5
    Alias of !!!+doc[lang=${lang}]
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

  76. 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>

  1. !!!
    <!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}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末砾嫉,一起剝皮案震驚了整個濱河市窒篱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌墙杯,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件溉旋,死亡現(xiàn)場離奇詭異嫉髓,居然都是意外死亡,警方通過查閱死者的電腦和手機算行,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來儡陨,“玉大人,你說我怎么就攤上這事骗村。” “怎么了渔扎?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵信轿,是天一觀的道長残吩。 經(jīng)常有香客問我,道長泣侮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任隶校,我火速辦了婚禮蛹锰,結(jié)果婚禮上深胳,老公的妹妹穿的比我還像新娘铜犬。我一直安慰自己,他們只是感情好敛劝,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布纷宇。 她就那樣靜靜地躺著,像睡著了一般像捶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上唆垃,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天痘儡,我揣著相機與錄音,去河邊找鬼。 笑死醉途,一個胖子當(dāng)著我的面吹牛砖茸,可吹牛的內(nèi)容都是我干的隘擎。 我是一名探鬼主播凉夯,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼劲够,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了征绎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤柴墩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后江咳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哥放,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年东臀,在試婚紗的時候發(fā)現(xiàn)自己被綠了犀农。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡呵哨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拒炎,到底是詐尸還是另有隱情挨务,我是刑警寧澤击你,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布丁侄,位于F島的核電站惯雳,受9級特大地震影響鸿摇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜潮孽,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一筷黔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧必逆,春花似錦揽乱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽福压。三九已至或舞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間映凳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工仆救, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矫渔,地道東北人彤蔽。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓顿痪,卻偏偏與公主長得像镊辕,于是被迫代替她去往敵國和親员魏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容

  • HTML受裹、XML虏束、XHTML有什么區(qū)別? XMLXML是The Extensible Markup Languag...
    zx9426閱讀 435評論 0 1
  • 序章 談?wù)劇盀g覽器兼容性”的問題发乔?很多前端的面試或筆試中雪猪,都有比較籠統(tǒng)的“說說你所知道的各瀏覽器存在的兼容問題”,...
    麻辣小隔壁閱讀 3,046評論 1 57
  • “Be conservative in what you send; be liberal in what you...
    Rella7閱讀 1,141評論 0 2
  • 1. XML簡介 以下內(nèi)容來自于http://www.w3school.com.cn/xml 基本知識 XML 和...
    WebSSO閱讀 1,912評論 1 7
  • 本來以為鄧超會來的译仗。 深夜在網(wǎng)上搶票官觅,和舍友托輔導(dǎo)員幫我們留兩張票,晚上興奮的睡不著休涤。監(jiān)控睡眠狀態(tài)沒有一點深睡。做...
    Tunatime閱讀 192評論 0 0