1、快速生成html结构
输入 html: 或者 ! 后,回车或tab
2、 快速格式化代码:右键格式化文档或者直接快捷键 shift+alt+f
3、快速补全css及标签,css只举例几个常用的。
<!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>
<style>
/* 快速生成css样式 */
div {
width: 200px;
/* w200 */
height: 300px;
/* h300 */
line-height: 30px;
/* lh30px */
text-align: center;
/* tac */
text-indent: 5em;
/* ti5em */
}
</style>
</head>
<body>
<!-- 快速生成标签 -->
<!-- 1、快速生成无属性值和内容的单个标签:输入标签名后按tab键,如输入div后按tab键 -->
<div></div>
<!-- 2、生成多个相同标签:标签名后加上*及生成的个数,如生成3个p,输入p*3 -->
<p></p>
<p></p>
<p></p>
<!-- 3、生成父子级关系的标签:用>连接,如ul下面的li,输入ul>li -->
<ul>
<li></li>
</ul>
<!-- 4、生成兄弟关系的标签:用+连接,如p后面有img,输入p+img-->
<p></p>
<img src="" alt="">
<!-- 5、生成带有属性名的标签:直接写.或者# ,如div的id为name,class为ip,输入div#name.ip -->
<div id="name" class="ip"></div>
<input type="text" class="ip1 ip2 ip3">
<!--一个属性有多个属性值,如input.ip1.ip2.ip3 -->
<div st="myset,hehe,pp" id="me"></div> <!-- div[st=myset,hehe,pp]#me -->
<!-- 6、生成的标签:用自增符号$,如生成三个div的class属性依次递增,输入.name$*3 -->
<div class="name1"></div>
<div class="name2"></div>
<div class="name3"></div>
<!-- 多位序号:使用多个$,如#li$$$*4name -->
<div id="li001name"></div>
<div id="li002name"></div>
<div id="li003name"></div>
<div id="li004name"></div>
<!-- 7、生成带有文本内容且内容递增的标签:使用自增符号$表示递增内容,用{}包裹表示标签内容,如内容依次递增的三个li,输入ul>li{代号$}*3 -->
<ul>
<li>代号1</li>
<li>代号2</li>
<li>代号3</li>
</ul>
<!-- 8、上级关系: ^ ,例 div+div>p>span+em^p -->
<div></div>
<div>
<p><span></span><em></em></p>
<p></p>
</div>
<!-- 9、分组:() ,例 div>(header>ul>li*2>)+div>img ,可以使用多个()分成更多的组-->
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<div><img src="" alt=""></div>
</div>
<!-- 10、倒序:@-, 如ul>li.item$@-*3 -->
<ul>
<li class="item03"></li>
<li class="item02"></li>
<li class="item01"></li>
</ul>
</body>
</html>
更多推荐
html快速生成标签:tab或回车快速补全标签或css样式
发布评论