首页 登 录

Emmet 使用手册（上）

## 什么是 Emmet？ Emmet 是一个高效编写 HTML 的插件，其前身是 Zen Coding，目前主流的编辑和 IDE 工具都支持它。如 JetBrains 全家桶、Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等。通过...

什么是 Emmet？

Emmet 是一个高效编写 HTML 的插件，其前身是 Zen Coding，目前主流的编辑和 IDE 工具都支持它。如 JetBrains 全家桶、Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等。通过缩写形式快速生成对应的 HTML 代码，大幅度提升前端开发工作效率。
举个例子：
列表是最常用的代码之一，ul、li 等进行组合，逐行书写十分费力，利用 Emmet 只需要在编辑器中输入缩写代码：ul>li*5，然后按下拓展键（默认为 tab），即可得到代码片段：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

使用方法

emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）
语法:

后代：>

div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2

是不是很爽，很快~~啊 ~ 啊~，仅仅一行代码就生成了一个复杂的HTML结构，并且id，class，内容都对应的上
开始讲解语法吧
1：html初始结构

下图中的结构，偷懒的都会直接一个！=> Tab 解决，这样可以快速生成基础的结构，同时防止手写时忘记某个代码块，输入错误的代码。
这里写图片描述
2：id（#）,class（.）

id指令:# ; class指令:.

div#test
<div id="test"></div>
div.test
<div class="test"></div>

3：子节点（>），兄弟节点（+），上级节点（^）

子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

div>ul>li>p
<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>
div+ul+p
<div></div>
<ul></ul>
<p></p>
div>ul>li^div (这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级）
<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>

4：重复（*）

重复指令：*

div*5（*号后面添加数字表示重复的元素个数）
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

5：分组（()）

分组指令：()

div>(ul>li>a)+div>p
（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）
<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
 </div>

解释：这里如果不加括号的话，猜想下，a+div这样div就是和a是兄弟关系了，会包含在li里面。懂了吧哈哈

 <div>
   <ul>
     <li>
       <a href=""></a>
       <div>
         <p></p>
       </div>
     </li>
   </ul

6：属性（[attr]）——id，class都有怎么能少了属性呢

属性指令：[]

a[href=’###’ name=‘xiaoA’] （中括号内填写属性键值对的形式，并且空格隔开）
<a href="###" name="xiaoA"></a>

6：编号（）‘编号指令：

）‘编号指令： `

ul>li.test$*3 （$代表一位数，后面更上*数字就代表从1递增到填写的数字）
 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

注意：

一个$ 代表一位数，
就是两位数了,以此类推就可以形成$(1),

(01),$$$(001)
如果想自定义从几开始递增的话就利用：$@+数字数字
例如：ul>li.test$@33
 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

7：文本（{}）

文本指令：{}

ul>li.test$*3{测试$} （{里面填写内容，可以和$一起组合使用哦}）
<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

8：隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

例如：.test

<div class="test"></div>

例如：ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

例如：select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

等等…
隐私标签有如下几个：

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中

最后就是：看没用，操作几遍，几分钟你就能掌握这些指令，然后飞快的撸码

使用方法

emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）
语法:
后代：>

缩写：nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

兄弟：+

缩写：div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

上级：^

缩写：div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

缩写：div+div>p>span+em^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组：()

缩写：div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

乘法：*

缩写：ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

自增符号：$

缩写：ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

缩写：h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

缩写：ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

缩写：ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID和类属性

缩写：#header

<div id="header"></div>

缩写：.title

<div class="title"></div>

缩写：form#search.wide

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性

缩写：p[title="Hello world"]

<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写：[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本：{}

缩写：a{Click me}

Click me

缩写：p>{Click }+a{here}+{ to continue}

<p>Click here to continue</p>

隐式标签

缩写：.class

<div class="class"></div>

缩写：em>.class

<em><span class="class"></span></em>

缩写：ul>.class

<ul>
    <li class="class"></li>
</ul>

缩写：table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
更多快捷语法规则请继续浏览下篇或访问下面作者的文章
《Emmet 使用手册（下）》

本文章参考或摘录以下文章，特此感谢作者分享
《前端开发必备！Emmet使用手册》 作者：白牙 原文：http://www.w3cplus.com/tools/emmet-cheat-sheet.html
《Emmet Documentation》Emmet 官方手册 原文：https://docs.emmet.io/cheat-sheet

  • 发表于 2020-01-31 07:53:24
  • 阅读 ( 326 )