Emmet语法

Emmet官网：https://emmet.io/
转载至知乎作者：LRachel
原文章链接：Emmet插件及用法，VS code前端开发必备神器open in new window

HTML 初始化

快速生成Html文档常用结构代码
当然你可以去VS code安装包修改这个模板

! + Tab

<!--效果-->
<!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>

子代

键入 >号 + Tab
示例

<!--div>p>span-->
<div>
    <p><span></span></p>
</div>

同级

键入+号 + Tab
示例

<!--多个dom元素之间用+号连接即可-->
<!--div+p+span-->
<div></div>
<p></p>
<span></span>

到上级

键入^号 + Tab
示例

<!--多个dom元素之间用+号连接即可-->
<!--div>p^span-->
<div><p></p></div>
<span></span>

多个

键入* number + tab
示例

<!--多个dom元素之间用+号连接即可-->
<!--div>ul>li*5-->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

生成元素属性

键入 #id名 + tab
键入 .类名 + tab
生成普通属性[] + tab
生成元素内容 {} + tab
示例

<!--.nav-->
<div class="nav"></div>

<!--#id-->
<div id="itme"></div>

<!--一次添加多个属性 div#header.container[title="我是一个容器"]-->
<div id="header" class="container" title="我是一个容器"></div>

<!--div{我是文字内容}-->
<div>我是文字内容</div>

添加序号

键入占位符$ + tab $的数量代表序列号的位数
示例

<!--div.container#header>p{$$排序}*5-->
<div class="container" id="header">
    <p>01排序</p>
    <p>02排序</p>
    <p>03排序</p>
    <p>04排序</p>
    <p>05排序</p>
</div>

生成随机文本

lorem是Lorem ipsum的简称，中文称之为「乱数假文」。
作用是随机生成一些填充文本，类似数学函数=rand()。
更多介绍可以查阅open in new window

键入lorem+number + tab lorem后面的数字代表几个单词
示例

<!--ul.city>lorem6*4-->
<ul class="city">
    <li>Lorem ipsum dolor sit amet consectetur.</li>
    <li>Reiciendis voluptatum veritatis itaque ea ipsum.</li>
    <li>Ullam facilis itaque aperiam cumque quo!</li>
    <li>Vitae officiis accusamus exercitationem. Ut, sint.</li>
</ul>

Abbreviationsopen in new window-Implicit tag names（缩写词-隐式标签）

不嵌套的直接键入内容指代div
其他常见的隐式指代如：ul,ol,table,em等
示例

<!--#header-->
<div id="header"></div>

<!--ul>.item$${我是文字内容}*3-->
<ul>
    <li class="item01">我是文字内容</li>
    <li class="item02">我是文字内容</li>
    <li class="item03">我是文字内容</li>
</ul>

<!--table>.name*2+tb>.grade-->
<table>
    <tr class="name"></tr>
    <tr class="name"></tr>
    <tb>
        <div class="grade"></div>
    </tb>
</table>

<!--em#name3-->
<em><span id="name"></span></em>

CSS Abbreviations (CSS相关的缩写词-隐式标签)

键入属性的首字母或缩写词，快速生成属性
示例

.body{
<!--w400+h300+m24+p32-->
    width: 400px;
    height: 300px;
    margin: 24px;
    padding: 32px;

<!-- m0-0-24-0-->
 margin: 0 0 24px 0;

<!--fz20-->
 font-size: 20px;

<!--fz1.5-->
font-size: 1.5em;

<!--fw500-->
font-wight: 500;

<!--lh48-->
line-height: 48;

<!--bgc-->
background-color: #fff;

<!--dib-->
display: inline-block;

<!--dif-->
display: inline-flex;

<!--df-->
display: flex;
}

长标签名支持缩写

<!--script:src-->
<script src=""></script>

<!--link-->
<link rel="stylesheet" href="">

<!--link:css-->
<link rel="stylesheet" href="style.css">

<!--a:link-->
<a href="http://"></a>

<!--inp-->
<input type="text" name="" id="">

<!--input-->
<input type="text">

<!--input:password-->
<input type="password" name="" id="">

<!--btn-->
<button></button>

<!--btn:s-->
<button type="submit"></button>