Emmet 食用指北

最新推荐文章于 2021-01-24 21:51:33 发布

weixin_34256074

最新推荐文章于 2021-01-24 21:51:33 发布

阅读量74

点赞数

原文链接：https://juejin.im/post/5becf25d51882545235798a2

版权

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

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

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

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

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

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

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

所以相应的简便方法自然而然就产生了，根本不需要死记硬背：

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

想清楚为什么，也就知道该怎么做了。根据二八法则，只列最有用的，毕竟我们要学语文没必要认识新华字典里的所有字。

单个标签

创建单个标签

键入元素名， Tab补全

增加标签内的属性

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

增加单个标签的内容

a{你好！}

指定单个标签的数量

ul>li*3

两个元素之间

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

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名、属性名中

$可以被以下代替：

$$$
- 代表三位数字：001、002、003
$@-
- 倒序排列，3、2、1
$@3
- @第三个位置开始， 3、4、5

其他常用

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

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

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

dib: display:inline-block
lh: line-height
以此类推

最后一个例子：生成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 代码