【笔记】Emmet学习笔记

发表于 更新于 阅读次数：

前言

Emmet（以前名为Zen Coding）是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。（维基百科）

HTML

标签

1
div

定义class

  • class在标签名后定义，与id没有顺序要求
1
div.class
定义多个class
1
div.class1.class2

定义id

  • id在标签名后定义，与class没有顺序要求
1
div#id

定义属性

1
div[key=value]
  • 属性要在class和id后定义
1
div.class[key1=value2]
定义多个属性
1
div[key1=value2][key2=value2]

定义内容

1
div{content}
  • 内容要在属性后定义
1
div[key=value]{content}

指定个数

1
div*3
  • 个数要在内容后定义
1
div{content}*3
定义有序数字
  • 通过$定义有序数字占位符，补齐后会自动生成有序数字
1
div{$}*3
定义多个位的有序数字
  • 通过多个$来指定有序数字的位数
1
div{$$}*3

定义子元素

1
div>p

定义兄弟元素

1
div+p

回到上一级

1
div^p

向上多级

1
div^^p

分组

  • 通过()进行分组
1
(div+p)>(div+p)

隐式标签

  • 没有定义标签而直接定义class或id时，标签默认为div
1
.class
  • 如果隐式标签的上一级是ul，则下一级默认为li
1
ul>.class

CSS

定义宽度

1
w100

定义高度

1
h100

定义外边距

1
m100

定义内边距

1
p100

同时定义宽度、高度、外边距、内边距

分开为4个

1
w100+h100+m100+p100

合并为1个

1
w100-h100-m100-p100

定义边框

1
b

定义白色实线

1
bd#cs

完成