sublime / vscode 快捷生成HTML代码的实现
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
1、基本html结构
操作： 输入 !+Enter键
注意：这里输入“！”+回车键前，需要清空原来生成的基本结构
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2、生成div加类名的快捷键
操作： 输入 div.list>div.item_$*6
实现效果：
<div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div>
3、带类名的div
操作： 输入 div.wrapper
实现效果：
<div class="wrapper"></div>
4、带id的div
操作： div#wrapper
实现效果：
<div id="wrapper"></div>
5、属性 []
操作： span[title=“test”]
实现效果：
<span title="test"></span>
6、后代 >
操作： 输入div>span>a
实现效果：
<span title="test"></span>
7、兄弟 +
操作： div+p+span
实现效果：
<div></div>
<p></p>
<span></span>
8、上级 ^
操作： div>span^i
实现效果：
<div><span></span></div>
<i></i>
9、乘法 *
操作： ul>li*2
实现效果：
<ul>
<li></li>
<li></li>
</ul>
10、文本 {}
操作： div>span{这是文本}
实现效果：
<div><span>这是文本</span></div>