Emmet笔记

概览


HTML

初始化

  • html:5 或!:用于HTML5文档类型
  • html:xt:用于XHTML过渡文档类型
  • html:4s:用于HTML4严格文档类型

添加类、id、文本和属性

  • p.bar#foo 连续输入元素名称和ID

  • h1{foo}和a[href=#] HTML元素的内容和属性

嵌套

  • >子元素符号,表示嵌套的元素
  • +同级标签符号
  • ^可以使该符号前的标签提升一行

分组

通过嵌套和括号来快速生成一些代码块

隐式标签

声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>
现在输入.item,则Emmet会根据父标签进行判定

  • li:用于ul和ol中
  • tr:用于table、tbody、thead和tfoot中
  • td:用于tr中
  • option:用于select和optgroup中

定义多个元素

ul>li*3

定义多个带属性的元素

ul>li.item$*3

CSS缩写

  • w100 = width:100px
  • h10p = height:10% p 表示%
  • m5e = margin:5em e 表示 em x 表示 ex

附加属性

模糊匹配

供应商前缀

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

文章目录
  1. 1. 概览
  2. 2. HTML
    1. 2.1. 初始化
    2. 2.2. 添加类、id、文本和属性
    3. 2.3. 嵌套
    4. 2.4. 分组
    5. 2.5. 隐式标签
    6. 2.6. 定义多个元素
    7. 2.7. 定义多个带属性的元素
  3. 3. CSS缩写
    1. 3.1.
    2. 3.2. 附加属性
    3. 3.3. 模糊匹配
    4. 3.4. 供应商前缀
,