Emmet常用语法总结

Emmet简介

Emmet它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。在Emmet中包括HTML语法和CSS语法两个部分。

HTML语法

📖官方文档 HTML Abbreviations

初始化HTML结构

输入!再按TAB键即可生成HTML初始化结构：

生成带id的标签

使用标签名和操作符#即可生成一个带有id的标签，如输入button#main：

当标签为div时，直接输入#main即可生成id为main的div标签：

生成带有class的标签

使用标签名和操作符.，即可生成一个带有class的标签，如输入button.mian：

类似，当标签为div时，可以省略div，直接输入.main即可生成class为main的div标签

生成带有属性的标签

使用操作符[]可生成带有属性的标签，如输入button[name=demo data=btn1]。生成带div的标签同样可以省略div直接输入[name=demo data=d1]

生成多个相同的标签

使用标签名和操作符*后面数字，如果不带数字默认生成一个。如输入div*3：

生成标签属性带数字编号

使用操作符$即可生成带有数字编号的标签属性值，如输入li.bar$*3

更改标签属性带数字的顺序

使用@修饰符，可以更改数字的顺序（升序或降序）同时还可以修改数字的起始值。

• ul>li.item$@-*6
  
• ul>li.item$@2*5
  

生成标签内文本

使用操作符{} 即可生成带文本内容的标签。如输入div{我是文本内容}

子节点生成

使用操作符>即可生成一对分子节点，如输入div>span

兄弟节点生成

使用操作符+即可生成一对兄弟节点，如输入.container+.content

父级别兄弟节点

使用操作符^即可生成一个父级兄弟节点，父级兄弟节点生成通常和子节点生成同时使用，如输入.container>.content^p

还可以使用多个^操作符来返回到多个父级。如输入div>ul>li^^p

分组节点

使用操作符()即可将部分节点分组生成一个整体，将()内的节点与后面的节点隔离，避免产生嵌套关系。如输入div>(ul>li*3)+nav

上面例子div>(ul>li*3)+nav中(ul>li*3)是一个整体，这个整体的兄弟节点是nav。如果不加上()那么生成的片段如下：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <nav></nav>
    </ul>
</div>

可以看出nav成为了li的兄弟节点。

Lorem Ipsum 生成器

lorem可以自动生成虚拟文本来测试HTML模板在真实数据中的外观。

• 输入文本 ul.list>li.content*4>lorem*10
  
• Lorem的隐式转换
  • Emmet 都会查看父标签名称。以下是它如何解析某些父元素的名称：
    • li对于ul和ol
    • tr对于table, tbody,thead和tfoot
    • td为了tr
    • option对于select和optgroup
      输入文本 ul.list>lorem10.content*4
      

CSS语法

📖官方文档 CSS Abbreviations

width和height

• width：
  • w100 —> width:100px
  • w100p —>width:100%
  • w100vh —> width:100vh
  • w100vw —> width: 100vw
  • w100e —> width: 100em
  • w100e —> width: 100ex
• height
  • 和width同理，只需要将w换为h

margin 和 padding

• margin
  • m10 —> marign:10px
  • m10px10px10px10px —>margin: 10px 10px 10px 10px
• padding
  • 和margin同理，只需要将m换为h

生成同级属性和!重要修饰符

操作符+：生成同级样式；操作符!生成!important。输入代码p10!+m10!

颜色值

使用操作符# ，此操作符是一个值分隔符。

1. c#3 —>color: #333
2. bd1#0s ---->border:1px #000 solid

表示十六进制颜色值可以写一个、两个、三个或六个字符：

• #1→#111111
• #e0→#e0e0e0
• #fc0→#ffcc00

属性值生成

1. 输入jc:sa ----> justify-content: space-around
2. 输入 ai:c ----> align-items: center
3. 输入 ta:c ----> text-align: center
4. 输入 d:f ----> display: flex
5. 输入 t:a ----> top: auto
6. …
   通过上面可以发现， Emmet中属性生成的格式为：

属性名各个单词首字母:具体值各个单词首字母