目录索引
- 1. 生成html模板：【!】或者【html:5】
- 2.单个标签的快速生成
- 3.生成多个相同的同级标签：【table*3】
- 4.生成多个不同的同级标签：【div+input+table】
- 5.生成嵌套标签：【>】
- 6 自增长：【$】
- 7.导入外部css：【link:css】
- 8.导入外部js：【script:src】
- 9.随机文本的输入：【Lorem】
1. 生成html模板：【!】或者【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>
2.单个标签的快速生成
2.1 打完标签名，按下回车键或者Tab键：【div】
生成的模板如下：
<div></div>
2.2 【#】id，【.】class，【[]】属性 ，【{}】标签内容
例：
div.class1#id1[height=100%][width=50%]{aaa bbb}
生成的模板如下：
<div class="class1" id="id1" height="100%" width="50%">aaa bbb</div>
3.生成多个相同的同级标签：【table*3】
生成的模板如下：
<table></table>
<table></table>
<table></table>
4.生成多个不同的同级标签：【div+input+table】
生成的模板如下：
<div></div>
<input type="text">
<table></table>
5.生成嵌套标签：【>】
5.1 指定标签：【el-container>div>table】
生成的模板如下：
<el-container>
<div>
<table></table>
</div>
</el-container>
5.2 指定class：【.class1>.class2>.class3】
生成的模板如下：
<div class="class1">
<div class="class2">
<div class="class3"></div>
</div>
</div>
再例如：【el-container.class1>div.class2>table.class3】
生成的模板如下：
<el-container class="class1">
<div class="class2">
<table class="class3"></table>
</div>
</el-container>
5.3 指定id：【el-container#id1>div#id2>table#id3】
生成的模板如下：
<el-container id="id1">
<div id="id2">
<table id="id3"></table>
</div>
</el-container>
5.4 同时指定class和id
例：
el-container.class1#id1>div.class2#id2>table.class3#id3
生成的模板如下：
<el-container class="class1" id="id1">
<div class="class2" id="id2">
<table class="class3" id="id3"></table>
</div>
</el-container>
5.5 上级元素：【^】
例：
div#id1>div#id2>div#id3^div#id4
生成的模板如下：
注：【^】使得id4的层级和它的上层元素id2相同
<div id="id1">
<div id="id2">
<div id="id3"></div>
</div>
<div id="id4"></div>
</div>
6 自增长：【$】
例：
div>div>ul>li*3>img[src=./imgs/0$.jpg][alt={img 0$}]
生成的模板如下：
<div>
<div>
<ul>
<li><img src="./imgs/01.jpg" alt={img 01}></li>
<li><img src="./imgs/02.jpg" alt={img 02}></li>
<li><img src="./imgs/03.jpg" alt={img 03}></li>
</ul>
</div>
</div>
7.导入外部css：【link:css】
生成的模板如下：
<link rel="stylesheet" href="style.css">
8.导入外部js：【script:src】
生成的模板如下：
<script src=""></script>
9.随机文本的输入：【Lorem】
Lorem：自动输入1行随机文本(默认30个单词)。
Lorem10：自动输入1行随机文本(10个单词)。
Lorem*5：自动输入5行随机文本(每行默认30个单词)。
Lorem2*5：自动输入5行随机文本(每行默认2个单词)。