visual studio code快速生成Html頭部信息和炫酷的代碼補全

時間 2019-12-05

標籤 visual studio code 快速生成 html 頭部信息代碼補全欄目 Visual Studio 简体版

原文原文鏈接

html:4t、html:4s、html:xt、html:xs、html:xxs、html:5css

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>li*2>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￥*5: <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>

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

!: Alias of html:5windows

<!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]app

<input type="hidden" name="" />

input:h: Alias of input:hiddenide

<input type="hidden" name="" />

input:text， input:t: Alias of inppost

<input type=" text" name="" id="" />

input:search: Alias of inp[type=search]ui

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

input:email: Alias of inp[type=email]atom

<input type="email" name="" id="" />

input:url: Alias of inp[type=url]url

<input type="url" name="" id="" />

input:password: Alias of inp[type=password]spa

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

isindex: <isindex />

input:reset: Alias of input:button[type=reset]

<input type="reset" value="" />

: < name="" id=""></>

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}

相關文章

相關標籤/搜索

瀏覽器信息

Docker命令大全

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<