10.14作业

emment的八种用法

1.标签与内容快速生成

标签{内容} + Tab键快速生成

例如:

<!--h3{这是一个h3标签}-->
<h3>这是一个h3标签</h3>
<!--执行后如上所示-->

2.属性和语法糖

[属性]{内容} + Tab键快速生成

例如:

<!--[id=app]{这是一个定义了id属性的标签}]-->
<div id="app">这是一个定义了id属性的标签</div>
<!--执行后如上所示-->
<!--[class=app]{这是一个定义了class属性的标签}]-->
<div class="app">这是一个定义了class属性的标签</div>
<!--执行后如上所示-->

语法糖用法

由于id,class为通用属性,可以用语法躺的格式去书写

例如:

<!--  #app{这是一个定义了id属性的标签}  -->
<div id="app">这是一个定义了id属性的标签</div>
<!--执行后如上所示-->
<!--  .app{这是一个定义了class属性的标签}  -->
<div class="app">这是一个定义了class属性的标签</div>
<!--执行后如上所示-->

3.重复生成标签

使用*进行重复标签生成

标签{内容}*数量

例如:

<!--div{div标签内容}*3-->
<div>div标签内容</div>
<div>div标签内容</div>
<div>div标签内容</div>
<!--执行后如上所示-->

4.父子标签生成

使用>进行父子标签生成

父标签{内容}>字标签{内容} + Tab键快速生成

例如:

<!-- div{Div内容}>p{p标签内容}>span{span标签内容} -->
<div>Div内容
    <p>p标签内容
        <span>span标签内容</span>
    </p>
</div>
<!--执行后如上所示-->

5.兄弟标签生成

使用+进行兄弟标签生成

标签{内容}+标签{内容} + Tab键快速生成

<!--div{div标签内容}+p{p标签内容}-->
<div>div标签内容</div>
<p>p标签内容</p>
<!--执行后如上所示-->

6.父级生成

使用^进行父级生成

标签>标签{内容}^标签{内容} + Tab键快速生成

例如:

<!-- # (.list>p{这是个p标签}^span{这是个span标签} -->
<div class="list">
<p>这是个p标签</p>
</div>
<span>这是个span标签</span>
<!--执行后如上所示-->

7.分组生成

使用(...)进行分组生成

标签>标签+(标签>标签) + Tab键快速生成

例如:

<!--.list>h3{导航}+(ul>li*3>a{link})-->
<div class="list">
<h3>导航</h3>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<!--执行后如上所示-->

8.序号

正序从0开始

使用$默认从0排序

标签{内容$} + Tab键快速生成

例如:

<!--ul>li{列表$}*3-->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--执行后如上所示-->

正序从指定数字开始

使用$@从指定数字开始排序排序

@来定义从那个数排序

标签{内容$@} + Tab键快速生成

例如:

<!--ul>li{列表$@8}*3-->
<ul>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
</ul>
<!--执行后如上所示-->

倒叙进行排序

使用$@-开始倒叙排序

标签{内容$@-} + Tab键快速生成

例如:

<!--ul>li{列表$@-}*3-->
<ul>
<li>列表3</li>
<li>列表2</li>
<li>列表1</li>
</ul>
<!--执行后如上所示-->

倒叙从指定数字倒叙排序

使用$@-8开始倒叙排序

标签{内容$@-8} + Tab键快速生成

例如:从8开始倒叙

<!--ul>li{列表$@-8}*3-->
<ul>
<li>列表10</li>
<li>列表9</li>
<li>列表8</li>
</ul>
<!--执行后如上所示-->