sublime / vscode 快捷生成HTML代码的实现
文章目录
- sublime / vscode 快捷生成HTML代码的实现
- 1、*基本html结构*
- 操作: ==输入 !+Enter键==
- 实现效果:
- 2、*生成div加类名的快捷键*
- 操作: ==输入 div.list>div.item_$*6==
- 实现效果:
- 3、*带类名的div*
- 操作: ==输入 div.wrapper==
- 实现效果:
- 4、*带id的div*
- 操作: ==div#wrapper==
- 实现效果:
- 5、*属性 []*
- 操作: ==span[title=“test”]==
- 实现效果:
- 6、*后代 >*
- 操作: ==输入div>span>a==
- 实现效果:
- 7、*兄弟 +*
- 操作: ==div+p+span==
- 实现效果:
- 8、*上级 ^*
- 操作: ==div>span^i==
- 实现效果:
- 9、乘法 *
- 操作: ==ul>li*2==
- 实现效果:
- 10、*文本 {}*
- 操作: ==div>span{这是文本}==
- 实现效果:
提示:以下是本篇文章正文内容,下面案例可供参考
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>
更多推荐
快捷生成HTML代码的实现
发布评论