1 HTML语法
1.1 初始化HTML结构
输入!再按Tab健即可以生成HTML初始化结构:
<!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>
1.2 生成带有id的标签
使用操作符#即可生成一个带有id的标签,如输入 div#appid 可生成如下代码片段:
<!-- 输入 div#appid--><div id="appid"></div>
当标签为div时,可以省略div标签,直接输入#appid 即可生成与上面相同的代码片段.
1.3 生成带有class的标签
使用操作符即可生成一个带有class的标签,如输入 div.app 可生成如下代码片段:
<!-- 输入 div.app--><div class="app"></div>
类似的,当标签为div时,可以省略div标签,直接输入.app 即可生成与上面相同的代码片段.
1.4 生成带有属性的标签
使用操作符[]即可生成一个带有属性的标签,如输入input[name=userName]可生成如下代码片段:
<!-- 输入 input[name=userName]--><input type="text" name="userName">
1.5 生成标签内文本
使用操作符{}即可生成带文本内容的标签,如输入div{内容}可生成如下代码片段:
<!-- 输入 div{内容}--><div>内容</div>
1.6 重复节点生成
使用操作符*即可生成重复的节点，如输入.app{app} *3可生成如下代码片段：
<!-- 输入 .app{app}*3--><div class="app">app</div><div class="app">app</div><div class="app">app</div>
1.7 子节点生成
使作操作符>即可生成一对父子节点,如输入ul>li{item} * 3可生成如下代码片段：
<!-- 输入 ul>li{item} * 3--><ul><li>item</li><li>item</li><li>item</li></ul>
1.8 兄弟节点生成
使用操作符+即可生成一对兄弟节点，如输入h3{标题}+p{内容}可生成如下代码片段：
<!-- 输入 h3{标题}+p{内容}--><h3>标题</h3><p>内容</p>
1.9 父级兄弟节点生成
使用操作符^即可生成一个父级兄弟节点，父级兄弟节点生成通常与子节点生成同时使用，如输入.app>span{内容}^h3{标题}可生成如下代码片段：
<!-- 输入 .app>span{内容}^h3{标题}--><div class="app"><span>内容</span></div><h3>标题</h3>
还可以使用多个^操作符使语境处于多个父级中，如div>ul>li{内容}^^p{内容}可生成如下代码片段：
<!-- 输入 div>ul>li{内容}^^p{内容}--><div><ul><li>内容</li></ul></div><p>内容</p>
在这个例子中使用两个^操作符来生成div的兄弟节点p。
1.10 节点分组
使用操作符()即可将部分节点分组形成一个整体，将()内的节点与外面节点隔离，避免产生嵌套关系，如输入div>(ul>li{内容})+p{内容}可生成如下代码片段:
<!-- 输入 div>(ul>li{内容})+p{内容}--><div><ul><li>内容</li></ul><p>内容</p></div>
1.11 标签属性值数字编号
使用操作符$即可成带有数字编号的标签属性值,如输入ul>li#appid${内容$} * 5可生成如下代码片段:
<!-- 输入 ul>li#appid${内容$} * 5--><ul><li id="appid1">内容1</li><li id="appid2">内容2</li><li id="appid3">内容3</li><li id="appid4">内容4</li><li id="appid5">内容5</li></ul>
如果自定义起始序号使用操作符$@两个一起,输入ul>li{item-$@6} * 5即可生成如下代码片段：
<!-- 输入 ul>li{item-$@6} * 5--><ul><li>item-6</li><li>item-7</li><li>item-8</li><li>item-9</li><li>item-10</li></ul>
逆序类似的，输入ul>li{item-$@-1} * 5即可生成如下代码片段:
<!-- 输入ul>li{item-$@-1} * 5--><ul><li>item-5</li><li>item-4</li><li>item-3</li><li>item-2</li><li>item-1</li></ul>
2 css语法
2.1 width和height
输入w100即可生成width: 100px，输入w100%即可生成width: 100%；height同理。