CSS基础——emment语法，有效提高编写速率

在日常的工作中，我们都会往便利、提高速度的方向去编写代码，因此，emmet语法就给予了我们便利。

emment简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

快速生成HTML结构语法

• 生成标签名
  直接输入标签名，按 tab 键即可
  

<!-- div --><div></div>

• 生成带有类名的div标签
  方法：先写一个. 紧接着写上类名

<!-- .box --><div class=\"box\"></div>

• 生成带有类名的其他标签
  方法：先写标签名，再写一个. 紧接着写上类名

<!-- p.box --><p class=\"box\"></p>

• 生成带有id名的标签
  方法：先写标签名，紧接着写#和id名（div标签可省略写标签名）

<!-- #two --><div id=\"two\"></div><!-- p#one --><p id=\"one\"></p>

• 生成多个相同的标签
  方法：先写上标签名，然后乘以需要生成的数量

<!-- p*3 --><p></p><p></p><p></p>

• 父子级关系的标签
  方法：使用 > （大于号）

<!-- ul>li --><ul><li></li></ul>

• 兄弟关系的标签
  方法：使用 + （加号）

<!-- div+p --><div></div><p></p>

• 生成有顺序的div类名
  方法：使用 $ 自增符号

<!-- .$*3 --><div class=\"1\"></div><div class=\"2\"></div><div class=\"3\"></div>

• 在生成的标签内部写内容
  方法：使用 {}

<!-- ul>li{第$$条项目}*3 --><ul><li>第01条项目</li><li>第02条项目</li><li>第03条项目</li></ul>

快速生成CSS样式语法

CSS 基本采取简写形式即可

比如 w200 按tab 可以 生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

p{/* lh */line-height: 20px;}

最后，给大家来个复合型案例

<!-- ul>li[id=\'item$\']{第$$$条数据}*10 --><ul><li id=\"item1\">第001条数据</li><li id=\"item2\">第002条数据</li><li id=\"item3\">第003条数据</li><li id=\"item4\">第004条数据</li><li id=\"item5\">第005条数据</li><li id=\"item6\">第006条数据</li><li id=\"item7\">第007条数据</li><li id=\"item8\">第008条数据</li><li id=\"item9\">第009条数据</li><li id=\"item10\">第010条数据</li></ul>