Emmet语法分享

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）即可

• 例子：

2.2 生成标签

• 键入标签名即可

• 例子：

2.2 子代

• 键入 > 号即可

• 例子：

2.3 兄弟

• 键入 + 即可

• 例子：

2.4 爬上

• 键入 ^ 即可

• 例子：

2.5 多个

• 键入 * 即可

• 例子：

2.6 分组

• 键入 ( ) 即可

• 例子：

2.7 生成元素属性

• 生成带有 id 属性的元素

• 生成带有 class 属性的元素

• 生成普通属性元素

• 键入 [ ] 即可

2.8 生成元素内容

• 键入 { } 即可

• 例子：

  
  我是div的内容
  

2.9 加序号

• 键入占位符 $ 即可

• 例子：

  
  
  
      
  woshineirong1
      
  woshineirong2
      
  woshineirong3
      
  woshineirong4
  
  
  
  
      
  woshineirong01
      
  woshineirong02
      
  woshineirong03
      
  woshineirong04
  
  

2.10 生成随机文本

• 键入 lorem 即可

• 例子：

   
  
      
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem, inventore?
      
  Explicabo asperiores eaque laboriosam, iste vel necessitatibus possimus quasi molestiae.
      
  Repudiandae fugiat laboriosam cupiditate deleniti cum asperiores sit sint et.
      
  Voluptatibus esse ut aliquam ab ex nam quam eum pariatur.
  
  
  
  Lorem, ipsum dolor.
  Iusto, neque nemo?
  Corporis, dolorum quibusdam!
  Nemo, voluptas vitae.
  

三，Abbreviations-Implicit tag names（缩写词-隐式标签）

3.1 隐式标签基础

• 不嵌套的直接键入内容指代 div

• 例子：

3.2 li中的隐式标签指代

• 例子：

  
  
  
      
  元素内容1
      
  元素内容2
      
  元素内容3
      
  元素内容4
      
  元素内容5
  
  

3.3 其他隐式标签

• 例子：

四，CSS Abbreviations（缩写词-隐式标签）CSS相关

4.1 基本内容

• 键入属性的首字母，快速生成属性

• 例子：