Emmet语法
用于快速输入html标签和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 */
.one {
/* 在类名中直接输入 */
text-align: center;
/* tac 文本居中 */
text-indent: 2em;
/* ti2em 首行缩进2单元 */
width: 100px;
/* w100 100像素宽度 */
height: 200px;
/* h200 200像素高度 */
line-height: 26px;
/* lh26px 行高26像素 */
text-decoration: none;
/* tdn 使文本无修饰,如取消超链接文本的下划线 */
}
</style>
</head>
<body>
<!-- 快速生成html标签 -->
<div></div>
<!-- div -->
<!-- 快速生成标签,输入标签名后直接tab -->
<div></div>
<div></div>
<div></div>
<!-- div*3 -->
<!-- 快速生成多个标签,输入标签名后*需要的个数 -->
<ul>
<li></li>
</ul>
<div><span></span></div>
<!-- ul>li -->
<!-- div>span -->
<!-- 快速生成父子级关系的标签,输入父标签名后>子标签名 -->
<div></div>
<span></span>
<!-- div+span -->
<!-- 快速生成兄弟关系标签,输入一个标签后+另一个标签名 -->
<div class="demo"></div>
<div id="demo"></div>
<span class="test"></span>
<ul>
<li id="demo1"></li>
<li id="demo2"></li>
</ul>
<!-- .demo -->
<!-- #demo -->
<!-- span.test -->
<!-- ul>li#demo$*2 -->
<!-- 快速生成带有类名或者id名的标签,直接.或#加类名或者id名,默认div -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<!-- .demo$*3 -->
<!-- 快速生成有顺序的类名,使用自增符号$*需要生成的个数,默认从1开始 -->
<div>测试测试1</div>
<div>测试测试2</div>
<div>测试测试3</div>
<!-- div{测试测试$}*3 -->
<!-- 快速生成有内容的标签,使用标签名加{},在{}内直接填写内容tab即可 -->
</body>
</html>