Emmet 使用手册(上)

什么是 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

缩写:.title

缩写:form#search.wide

缩写:p.class1.class2.class3

自定义属性

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

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

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

文本:{}

缩写:a{Click me}

Click me

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

Click here to continue

隐式标签

缩写:.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

讨论数量: 0

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!