VSCode快速生成HTML

快速生成HTML"/>

VSCode快速生成HTML

生成HTML模板：

! (英文感叹号) 然后回车或TAB键

格式化代码：

Shift + Alt + F（Windows下）

生成标签：

单个：div

多个：div*3

父子：ul>li*3, tr*3>td*4(3行4列）

父子升级：ul>li*3>a，table>tr*3>td*4

兄弟：h1 + div*3 + ul>li*3

注：若直接复制vscode会没有提示，尝试先去掉最后一个字符再补全有提示后回车即可

标签和内容：{}

 h1{这是一级标签}   ->    <h1>这是一级标签</h1>

注：感觉只在这里用的话有点多余，但后面内容自增有用

标签和属性：[ ]

 div[name]   ->   <div name=" "></div>
 div[name=Michael]   ->    <div name="Michael"></div>

class类名标签：

h1.className   ->    <h1 class="className"></h1>

不写标签默认为div
 .className   ->    <div class="className"></div>

id名标签：

h1#idName   ->    <h1 id="idName"></h1>

不写标签默认为div
 #idName   ->    <div id="idName"></div>

同时带class和id标签：

h1#idName.className   ->    <h1 id="idName" class="className"></h1>

不写标签默认为div
 #idName.className   ->    <div id="idName" class="className"></div>

标签的自增：$

   类名自增：h1.className$*2   ->

                  <h1 class="className1"></h1>
                  <h1 class="className2"></h1>
                            
  id自增： h1#idName$*2   ->        

                <h1 id="idName1"></h1>
                <h1 id="idName2"></h1>

  标签内容自增: div*2{$}     ->    

                 <div>1</div>
                 <div>2</div>