当前位置：Gxlcms > html代码 > Emmet插件使用方法总结

Emmet插件使用方法总结

时间：2021-07-01 10:21:17 帮助过：42人阅读

Emmet插件是一种简化开发的工具，不难发现在前端开发的过程中，很大一部分的工作内容是 HTML、CSS 代码的编写。尤其是没有编辑器的帮助或者工具的使用时效率会特别低下。所以根据HTML和CSS语言的特点诞生了 Emmet(前身是Zen Coding)，它可以帮助你更快的进行前端开发，实现自动补齐、填充和代码生成等功能，在它的帮助下能极大的提高代码编写的效率，更有效率的进行前端开发。

一、安装emmet：packages安装

下面方法适用于 sublime text 3。

1、安装 Package ctrl： 使用 ctrl + ～ 打开控制台，输入以下代码：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2、在 Package ctrl 中选择 Install package；

3、搜索 emmet 并安装。

二、快速编写HTML代码

先来看一下这个插件的效果，

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

基本语法：

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li

每个命令输完后按下Tab键即可快速得到代码

  1. <nav>
  2.     <ul>
  3.         <li></li>
  4.     </ul>
  5. </nav>

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

命令：p+p+bq 得到代码如下：

  1. <p></p>
  2. <p></p>
  3. <blockquote></blockquote>

3、生成上级元素：^ 表示^后面的元素与^前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：p+p>p>span+em^bq 得到代码如下：

  1. <p></p>
  2. <p>
  3.     <p><span></span><em></em></p>
  4.     <blockquote></blockquote>
  5. </p>

命令：p+p>p>span+em^^bq 得到代码如下：

  1. <p></p>
  2. <p>
  3.     <p><span></span><em></em></p>
  4. </p>
  5. <blockquote></blockquote>

4、生成类名： . Emmet 默认的标签为 p ，如果我们不给出标签名称的话，默认就生成 p 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

命令：.container 得到代码如下：

  1. <p class="container"></p>

如果想生成多个类名可连续写

命令： .container.wrapper.more 得到代码如下：

  1. <p class="container wrapper more"></p>

5、生成ID：#

命令：#container 得到代码如下：

  1. <p id="container"></p>

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2) 得到代码如下：

  1. <p class="foo">
  2.     <h1></h1>
  3. </p>
  4. <p class="bar">
  5.     <h2></h2>
  6. </p>

7、重复生成多份：* *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

  1. <ul>
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6.     <li></li>
  7. </ul>

8、对生成内容依次编号：$ $就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

  1. <ul>
  2.     <li class="item1"></li>
  3.     <li class="item2"></li>
  4.     <li class="item3"></li>
  5.     <li class="item4"></li>
  6.     <li class="item5"></li>
  7. </ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

  1. <ul>
  2.     <li class="item5"></li>
  3.     <li class="item4"></li>
  4.     <li class="item3"></li>
  5.     <li class="item2"></li>
  6.     <li class="item1"></li>
  7. </ul>

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5 得到代码如下：

  1. <ul>
  2.      <li class="item3"></li>
  3.      <li class="item4"></li>
  4.      <li class="item5"></li>
  5.      <li class="item6"></li>
  6.      <li class="item7"></li>
  7. </ul>

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧！

9、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性

命令：td[rowspan=2 colspan=3 title] 得到代码如下：

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

10、生成文本内容：{} 大括号里面是你想添加的文本内容

命令：a{Click me} 得到代码如下：

  1. <a href="">Click me</a>

命令：p>{Click }+a{here}+{ to continue} 得到代码如下：

  1. <p>Click <a href="">here</a>to continue</p>

到此为止基本语法内容也就这么多，剩下的就是加强理解与练习了。

注意：在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格

ul>li.item${item$}*3

  1.     <ul>
  2.     
  3. <li class="item1">item1</li>
  4.     
  5. <li class="item2">item2</li>
  6.     
  7. <li class="item3">item3</li>
  8.     </ul>

#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

  1.     <p id="content">
  2.     
  3. <p class="article">
  4.     
  5. <h1 class="ok" title="papername" style="color:#000;"></h1>
  6.     
  7. <h3 class="no" title="subname" style="color:#fff;"></h3>
  8.     
  9. <p class="words"></p>
  10.     
  11. </p>
  12.     </p>　

练习的过程中我们可以试着反推出命令行

  1.     <p class="header">
  2.     
  3. <ul class="nav">
  4.     
  5. <li><a href="" style="block"><span>name</span></a></li>
  6.     
  7. <li><a href="" style="block"><span>name</span></a></li>
  8.     
  9. <li><a href="" style="block"><span>name</span></a></li>
  10.     
  11. <li><a href="" style="block"><span>name</span></a></li>
  12.     
  13. <li><a href="" style="block"><span>name</span></a></li>
  14.     
  15. <li><a href="" style="block"><span>name</span></a></li>
  16.     
  17. </ul>
  18.     </p>


  1.     <table>
  2.     
  3. <thead>
  4.     
  5. <td class="col1"></td>
  6.     
  7. <td class="col2"></td>
  8.     
  9. <td class="col3"></td>
  10.     
  11. <td class="col4"></td>
  12.     
  13. </thead>
  14.     
  15. <tbody>
  16.     
  17. <tr class="row01">
  18.     
  19. <td class="col1"></td>
  20.     
  21. </tr>
  22.     
  23. <tr class="row02">
  24.     
  25. <td class="col2"></td>
  26.     
  27. </tr>
  28.     
  29. <tr class="row03">
  30.     
  31. <td class="col3"></td>
  32.     
  33. </tr>
  34.     
  35. </tbody>
  36.     
  37. <tfoot>
  38.     
  39. <td></td>
  40.     
  41. <td></td>
  42.     
  43. <td></td>
  44.     
  45. <td></td>
  46.     
  47. <td></td>
  48.     
  49. </tfoot>
  50.     </table>
  1.     <html>
  2.     <head>
  3.     
  4. <title></title>
  5.     
  6. <style type="text/css"></style>
  7.     
  8. <script src="abc1.js" type="text/javascript"></script>
  9.     
  10. <script src="abc2.js" type="text/javascript"></script>
  11.     
  12. <script src="abc3.js" type="text/javascript"></script>
  13.     </head>
  14.     <body>
  15.     
  16. <p class="content">
  17.     
  18. <p class="nav">
  19.     
  20. <ul>
  21.     
  22. <li><a href=""><span></span></a></li>
  23.     
  24. </ul>
  25.     
  26. </p>
  27.     
  28. </p>
  29.     
  30. <p class="sidebar">
  31.     
  32. <p class="top"></p>
  33.     
  34. <p class="middle"></p>
  35.     
  36. <p class="bottom"></p>
  37.     
  38. </p>
  39.     
  40. <p class="mian">
  41.     
  42. <p class="article">
  43.     
  44. <h1>article1</h1>
  45.     
  46. </p>
  47.     
  48. <p class="article">
  49.     
  50. <h1>article2</h1>
  51.     
  52. </p>
  53.     
  54. <p class="article">
  55.     
  56. <h1>article3</h1>
  57.     
  58. </p>
  59.     
  60. </p>
  61.     </body>
  62.     <p class="footer">copyright</p>
  63.     </html>

这些代码的命令你反推出来了吗？

1.命令：.header>ul.nav>li*6>a[style=block]>span{name}

2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

命令：link 

  1. <link rel="stylesheet" href="" />

命令：script:src

  1. <script src=""></script>

命令：img

  1. <img src="" alt="" />

命令：inp

  1. <input type="text" name="" id="" />

命令：input:p

  1. <input type="password" name="" id="">

命令：btn 结果：<button></button>

命令：btn：s 结果：<button type="submit"></button>

命令：btn：r 结果：<button type="reset"></button>

CSS中缩写

单位：

    • p 表示%
    • e 表示 em
    • r表示 rem

宽度：

命令：w100 结果：width:100px; 默认单位px

命令：w100p 结果：width:100%;

高度：

命令：h100r 结果：height: 100rem;

颜色：

命令：c#3 结果： color: #333;

命令：c#e0 结果： color: #e0e0e0;

命令：c#fc0 结果： color: #ffcc00;

CSS3前缀：

    • w 表示 -webkit-
    • m 表示 -moz-
    • s 表示 -ms-
    • o 表示 -o-

命令：-wmso-transform

结果：

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

属性模糊匹配：

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

所以在平时使用的时候可留意emmet的提示

命令：h10p+m5e 结果：height: 10%;margin: 5em;

四、定制Emmet插件

    • 添加新缩写或更新现有缩写，可修改snippets.json文件
    • 更改Emmet过滤器和操作的行为，可修改preferences.json文件
    • 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

这里都是英文文档，没有英语基础的同学可就有点抓瞎了。

“公欲利其事，必先利其器”，在前端的开发过程中，掌握一些开发工具的使用技巧，能够使开发过程变得轻松快捷，更有利于关注于代码程序的开发。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！