Emmet 食用指北

Emmet 是书写 HTML 元素时的简易标记，它有各类规则，帮助你快速生成 HTML 标签。

好比仅输入一个!, 再按下键盘上的Tab按键，一个HTML基本模板就生成了（前提是安装了 Emmet 插件）。

伟大的 VS Code 内置了这个插件。

若是当时老师有这么个酷酷的东西，我可能就不会对.jsp混乱的标记的学习感到厌烦了。

最重要的：解决了什么问题

规则的细枝末节是其次的，想一想它解决了什么问题？

书写 HTML 标签时冗余的尖括号，属性名，鼠标频繁的定位操做、重复的封闭标签、重复的标签名等等

因此相应的简便方法天然而然就产生了，根本不须要死记硬背：

1. 针对尖括号，采起只写标签名，用Tab键补全封闭标签和一万个尖括号。
2. 针对鼠标定位，采起几个定位符号来逻辑上代表其位置。
3. 针对某个重复的标签名，采起数量符号进行标记。 等等。。

想清楚为何，也就知道该怎么作了。根据二八法则，只列最有用的，毕竟咱们要学语文不必认识新华字典里的全部字。

单个标签

建立单个标签

键入元素名， Tab补全

增长标签内的属性

1. id：a#alpha
2. class：a.beta.gamma
3. attribute：a[title=hello]

增长单个标签的内容

1. a{你好！}

指定单个标签的数量

• ul>li*3

两个元素之间

1. 两个元素间的三种关系：下一级、同一级、跳至上级接着写
2. 改变做用域，优先级不一样：（）

child >

• nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
复制代码

sibling +

• nav+main+footer

<nav></nav>
<main></main>
<footer></footer>
复制代码

climb-up ^

爬升一层接着写

• p>span+em^bq

<p><span></span><em></em></p>
<blockquote></blockquote>
复制代码

Grouping ()

指定优先级为一组

• div>(header>ul>li*2>a)+footer>p

Item numbering $

• ul>li.argument$*3

<ul>
  <li class="argument1"></li>
  <li class="argument2"></li>
  <li class="argument3"></li>
</ul>
复制代码

能够用在内容、类名、id名、属性名中

$能够被如下代替：

• $$$
  • 表明三位数字：00一、00二、003
• $@-
  • 倒序排列，三、二、1
• $@3
  • @第三个位置开始， 三、四、5

其余经常使用

各类特定属性的默认用法：

• a:link
• a:mail
• link:css
• meta:utf
• meta:vp
• input:submit

CSS 中的属性通常都是音节首字母开头, 再按Tab键

1. dib: display:inline-block
2. lh: line-height
3. 以此类推

最后一个例子： 生成Table

一个带表名、表头、表尾、中间数据是10行5列的表！

table>caption{表名}+thead>tr*1>th*5{表头$}^^tbody>tr*10>td*5{$$$}^^tfoot>tr*1>td{总计：}+td*4

附代码

CSS样式

* {
  padding: 0;
  border: 0;
  margin: 0;
}
table {
  width: 100%;
  font-size: 1em;
  border-collapse: collapse;
}
caption {
  text-align: center;
  font-weight: bold;
  font-size: 200%;
  letter-spacing: 2em;
  color: black;
  margin: 0.8em;
}
th {
  text-align: left;
  padding: 0.3em;
  background: #8c8caa;
  color: white;
}
td {
  text-align: left;
  padding: 0.1em;
}
tfoot td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
复制代码

JS 代码

null
复制代码