Emmet语法分享
2020-02-03 本文已影响0人
莘栀
Emmet语法
注意：Emmet语法是为了帮助快速写出复杂的html css代码
一，官网连接
1.1 具体内容链接
- 基本语法：https://docs.emmet.io/abbreviations/syntax/
- 隐式标签：https://docs.emmet.io/abbreviations/implicit-names/
二，Abbreviations-Syntax（缩写词-语法）
2.1 生成 html 代码
-
键入 ! 按 Tab键（或者看到界面上给出提示，按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.2 生成标签
-
键入标签名即可
-
例子：
<!-- div --> <div></div>
2.2 子代
-
键入 > 号即可
-
例子：
<!-- div>p>span --> <div> <p><span></span></p> </div>
2.3 兄弟
-
键入 + 即可
-
例子：
<!-- 使用 + 号连接多个元素即可快速生成 --> <!-- div+p+span --> <div></div> <p></p> <span></span>
2.4 爬上
-
键入 ^ 即可
-
例子：
<!-- div>p>span^h2 --> <div> <p><span></span></p> <h2></h2> </div>
2.5 多个
-
键入 * 即可
-
例子：
<!-- 使用子代，兄弟 多个 --> <!-- div>p*5+span*3 --> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div>
2.6 分组
-
键入 ( ) 即可
-
例子：
<!-- Emmet: 使用括号生成如下结构 --> <div> <p> <span></span> <span></span> </p> <span></span> </div> <h1></h1> <!-- Emmet: (div>(p>span+span)+span)+h1 --> <div> <p><span></span><span></span></p> <span></span> </div> <h1></h1>
2.7 生成元素属性
-
生成带有 id 属性的元素
-
生成带有 class 属性的元素
<!-- #xxx 表示生成 id 为 xxx 的元素 --> <div id="main"></div> <!-- .xxx 表示生成 class 为 xxx 的元素 --> <span class="line"></span> -
生成普通属性元素
-
键入 [ ] 即可
<!-- 一次添加多个属性 div#header.container[title="我是一个div容器"] --> <div id="header" class="container" title="我是一个div容器"></div>
2.8 生成元素内容
-
键入 { } 即可
-
例子：
<!-- 生成 div 里面有内容 div{我是div的内容} --> <div>我是div的内容</div>
2.9 加序号
-
键入占位符 $ 即可
-
例子：
<!-- 生成一个 div 元素中 有十个元素，且数字从小到大 --> <!-- div#header>p{woshineirong$}*4 --> <div id="header"> <p>woshineirong1</p> <p>woshineirong2</p> <p>woshineirong3</p> <p>woshineirong4</p> </div> <!-- 一个 $ 相当于数字占位符 --> <div id="header"> <p>woshineirong01</p> <p>woshineirong02</p> <p>woshineirong03</p> <p>woshineirong04</p> </div>
2.10 生成随机文本
-
键入 lorem 即可
-
例子：
<!-- ul.generic-list>lorem10.item*4 --> <ul class="generic-list"> <li class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem, inventore?</li> <li class="item">Explicabo asperiores eaque laboriosam, iste vel necessitatibus possimus quasi molestiae.</li> <li class="item">Repudiandae fugiat laboriosam cupiditate deleniti cum asperiores sit sint et.</li> <li class="item">Voluptatibus esse ut aliquam ab ex nam quam eum pariatur.</li> </ul> <!-- p*4>lorem3 后面跟的数字表示生成几个单词 --> <p>Lorem, ipsum dolor.</p> <p>Iusto, neque nemo?</p> <p>Corporis, dolorum quibusdam!</p> <p>Nemo, voluptas vitae.</p>
三，Abbreviations-Implicit tag names（缩写词-隐式标签）
3.1 隐式标签基础
-
不嵌套的直接键入内容指代 div
-
例子：
<!-- 隐式标签默认指定 div 元素 --> <!-- #header --> <div id="header"></div> <!-- .container>.left --> <div class="container"> <div class="left"></div> </div>
3.2 li中的隐式标签指代
-
例子：
<!-- 此处隐式标签特殊，可以省略 li 并且不指定div --> <!-- ul>.item${元素内容$}*5 --> <ul> <li class="item1">元素内容1</li> <li class="item2">元素内容2</li> <li class="item3">元素内容3</li> <li class="item4">元素内容4</li> <li class="item5">元素内容5</li> </ul>
3.3 其他隐式标签
-
例子：
<!-- li for ul and ol tr for table, tbody, thead and tfoot td for tr option for select and optgroup .wrap>.content div.wrap>div.content em>.info em>span.info ul>.item*3 ul>li.item*3 table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]--> <!-- table>.large+tbody>.lettle --> <table> <tr class="large"></tr> <tbody> <tr class="lettle"></tr> </tbody> </table> <!-- em>#important --> <em><span id="important"></span></em>
四，CSS Abbreviations（缩写词-隐式标签）CSS相关
4.1 基本内容
-
键入属性的首字母，快速生成属性
-
例子：
<style> .box { /* w100+h100+m20+p20 */ width: 100px; height: 100px; margin: 20px; padding: 20px; /* m20-30-40-50 */ margin: 20px 30px 40px 50px; /* fz20 */ font-size: 20px; /* fz1.5 */ font-size: 1.5em; /* fw100 */ font-weight: 100; /* lh59 */ line-height: 50; /* bgc */ background-color: #fff; /* dib */ display: inline-block; } </style>
