html，css之emmet语法

1.emmet 语法

1.1 定义

emmet 语法前身是 Zen coding，可以使用缩写来加快编写 html 和 css 的速度，vscode 自带该语法。

1.2 快速生成 html 结构

1.2.1 生成标签

• 语法

  直接输入标签名，按tab键即可
  1

• 生成 div 标签的例子🌰（记得按tab键）

  div
  1

  当然不按 tab 键，也可以用鼠标点击，但我们通常在敲代码时，我们会尽量减少鼠标的使用（从键盘切换鼠标费时间，鼠标移动点击也费时间）

  

  我们可以看到 vscode也提示了：这是 emmet 语法。

1.2.2 生成多个相同标签

• 语法

  标签名 * 个数
  1

• 生成3个 div 标签的例子🌰（记得按 tab 键）

  div*3
  1

  

1.2.3 生成父子级标签

• 语法

  父级标签 > 子级标签
  1

• 生成无序列表的例子🌰（记得按 tab 键）

  ul > li
  1

  

1.2.4 生成兄弟级标签

• 语法

  兄弟标签其实就是同级标签

  兄弟标签 + 兄弟标签
  1

• 生成 div 和 span 为同级标签的例子🌰

  div + span
  1

  

1.2.5 生成带有id和类的标签

• 语法

  生成带有类名的标签：
  标签名.类名
  
  生成带有id的标签:
  标签名#id名
  1
  2
  3
  4
  5

• 生成两个 div，一个类名为 demo1，一个 id 为 demo2 的例子🌰

  div.demo1+div#demo2
  1

  两个 div 虽是同个标签，但 id 和类名不一样这里直接用兄弟标签处理

  

1.2.6 $自增

$是自增符号（在电脑上面数字4那边），比如可以生成有顺序的 div 名，有顺序的内容

• 语法

  谁自增谁加$，这里要符合逻辑，比如不能出现div*$这样的情况
  1

• 生成3个 div 标签，类名依次为 demo1，demo2，demo3 的例子🌰

  div.demo$*3
  1

  

1.2.7 内容

{}里面是内容，测试可能会用到

• 语法

  标签{具体内容}
  1

• 生成3个 div 标签，内容依次为1，2，3的例子🌰

  div{$}*3
  1

  

1.3 快速生成 css 样式

1.3.1 语法

css 基本采用简写形式：

• h100 + tab 可以生成 height: 100px;
• lh100 + tab 可以生成 line-heigh: 100px;

也就是一般来说：

• 单个单词取首位(不绝对)
• 多个单词取每个单词的首位(不绝对)

1.3.2 例子🌰

• 高度 100px

  h100
  1

  

• 行高 100px

  lh100px
  1

  

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ