关于html的一些快捷键

html快捷键：

！（回车） vscode快速生成HTML骨架 前提文件后缀是.html

alt+b 快速进入网页（vscode下载完open in broswer插件后）
shift+alt+鼠标点击   多行快速编辑
shift+3 快速加# （可快速加标签id名）
ctrl+/ 快速注释

直接编写标签名然后回车可快速生成标签
如：p（回车）-->  <p></p>

生成多个标签

p*3(回车) -->  <p></p><p></p><p></p>

生成嵌套标签

b>i>p  -->  <b><i><p></p></i></b>

同级嵌套标签

(p+br)*2  -->  <p></p><br>
               <p></p><br>

如果想要上级，就加^，需要向上多少级就加多少^

div.nav>ul>li^span

<div class="nav">

<ul> <li></li>

</ul>

<span></span>

</div>

标签名[标签属性]{文本内容}

p[class="jjj"]{你好吗}

输出:

    <p class="jjj">你好吗</p>

生成超链接一般要加上可点击的文本内容:

a{click me}>b  --->  <a href="">click me<b></b></a>

a>{click me}b  --->  <a href="">click me<b></b></a>

a>b{click me}  --->  <a href=""><b></b></a>{click me}

生成制定id为jjj的p标签

p#jjj 

输出：

<p id="jjj"></p>

生成制定类（此处类名为ttt）的p标签

p.ttt 

输出：

  <p class="ttt"></p>

生成类名为ttt和且id为jjj的p标签

p#jjj.ttt

输出：  

 <p id="jjj" class="ttt"></p>

$
例如无序列表，我想为五个个 li 增加一个 class 属性值 item1 ，然后依次递增从 1-5，那么就需要使用 $ 符号：

ul>li.jjj$*5
结果是：<ul>
 <li class="jjj1"></li>
 <li class="jjj2"></li>
 <li class="jjj3"></li>
 <li class="jjj4"></li>
 <li class="jjj5"></li>
</ul>

$ 表示一位数字，只出现一个的话，就从 1 开始，如果出现多个，就从 0 开始。
如果我想生成三位数的序号，那么要写三个 $：

ul>li.jjj$$$*5
1
输出：

<ul>
    <li class="jjj001"></li>
    <li class="jjj002"></li>
    <li class="jjj003"></li>
    <li class="jjj004"></li>
    <li class="jjj005"></li>
</ul>

此外，也可以在 $ 后面增加 @- 来实现倒序排列：

ul>li.jjj$@-*5
1
输出：

<ul>
    <li class="jjj5"></li>
    <li class="jjj4"></li>
    <li class="jjj3"></li>
    <li class="jjj2"></li>
    <li class="jjj1"></li>
</ul>

同时，还可以使用 @N 指定开始的序号：

ul>li.jjj$@3*5
1
那么输出：

<ul>
    <li class="jjj3"></li>
    <li class="jjj4"></li>
    <li class="jjj5"></li>
    <li class="jjj6"></li>
    <li class="jjj7"></li>
</ul>
配合上面倒序输出，可以这样写：

ul>li.jjj$@-3*5
就可以生成以 3 为底倒序列表：

<ul>
    <li class="jjj7"></li>
    <li class="jjj6"></li>
    <li class="jjj5"></li>
    <li class="jjj4"></li>
    <li class="jjj3"></li>
</ul>                                       
　
以上仅是本人浅薄理解，还有不足请各位指正