在写代码的时候有时候要创建很多个相同的标签,如何快速生成标签。
所有的操作都是按下tab键即可瞬间完成。

!或者输入html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在编辑器中输入ul>li*n,n代表创建n个li标签

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

在编辑器中输入ul>(li>a)*n

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

在编辑器中输入dl>(dt+dd)*n,+代表在同级创建兄弟标签

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

在编辑器中创建标签含Id、class类名的标签,其他属性用[]

<!--输入div#content-->
<div id="content"></div>
<!--输入div.content-->
<div class="content"></div>
<!--输入div[title='hello' colspan=3]-->
<div title="hello" colspan="3"></div>

创建5个div类名为content1-5,用@n来修改起始值

<!--输入div.content$*5-->
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<!--输入div.content$@3*3-->
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>

创建5个div类名为content、内容为1-5

<!--输入div.content{$}*5-->
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>

总结:
1.用 >创建父子结构标签,生成子元素
2. 用+创建兄弟标签,生成同级元素
3. 用.或者#创建类标签
4. 用[]来创建属性标签
5. 用{}在标签的内容
6. 用$来实现编号
7. 用@n来修改起始值

更多推荐

HTML快速创建标签,生成代码的语法