码迷，mamicode.com
首页 > 其他好文 > 详细

Emmet相关使用

时间：2014-05-18 06:15:21      阅读：473      评论：0      收藏：0      [点我收藏+]

标签：style   blog   class   c   tar   ext   

          Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度,支持多款编辑器或者集成IDE的无缝插件,支持的编辑器或者IDE有,如下图:

bubuko.com,布布扣

当然,Emmet还支持很多在线编辑以及第三方软件的集成,如图:

bubuko.com,布布扣

足以可见它的强大了,下面是Emmet常用的使用方法.大家可以去它的官方网站上查看其英文原版的使用方法,下面是从网络上收集的常用使用方法.

管网地址:http://docs.emmet.io/abbreviations/syntax/

Emmet针对html，键入命令都是基于html的tags。命令输入完成后，光标停在命令尾端，使用Ctrl+E快捷键执行命令。

1 子节点 操作符 >

[html] view plaincopy
  1. body>div>ul>li  
使用快捷键 Ctrl+E ，执行命令后，则出现下面的html节点结构：

[html] view plaincopy
  1. <body>  
  2.     <div>  
  3.         <ul>  
  4.             <li></li>  
  5.         </ul>  
  6.     </div>  
  7. </body>  

2 兄弟节点 操作符 +

[html] view plaincopy
  1. body>div+div+div  
执行命令，如下：

[html] view plaincopy
  1. <body>  
  2.     <div></div>  
  3.     <div></div>  
  4.     <div></div>  
  5. </body>  

3 父节点 操作符 ^ （英文输入法下，Shift+6）

[html] view plaincopy
  1. body>div+div+div^script  
执行命令后，如下：

[html] view plaincopy
  1. <body>  
  2.     <div></div>  
  3.     <div></div>  
  4.     <div></div>  
  5. </body>  
  6. <script></script>  
这里要说明2点：a 父节点只是针对^操作符前一个tag而言； b 生成的父节点追加是向后的，即例子中script的生成，出现在body之后，而不是之前。


4 多个相同兄弟节点 操作符 *

在上面的例子中可以看到，生成了三个兄弟节点 div ，如果当前文档需要生成10个呢，难道要输入十次div么？不，使用*10 就搞定了。例子：

[html] view plaincopy
  1. body>div*10  
执行命令后，如下：
[html] view plaincopy
  1. <body>  
  2.     <div></div>  
  3.     <div></div>  
  4.     <div></div>  
  5.     <div></div>  
  6.     <div></div>  
  7.     <div></div>  
  8.     <div></div>  
  9.     <div></div>  
  10.     <div></div>  
  11.     <div></div>  
  12. </body>  
看吧，多么方便呀。

5 分组 操作符 ()
从第三个例子可以想到，如果给每个div生成不同的子节点，可能会想到的命令如下：

[html] view plaincopy
  1. body>div>ul>li+div>p+div>form^script  
可是，生成后，却是下面的结果，并非所愿：

[html] view plaincopy
  1. <body>  
  2.     <div>  
  3.         <ul>  
  4.             <li></li>  
  5.             <div>  
  6.                 <p></p>  
  7.                 <div>  
  8.                     <form action=""></form>  
  9.                 </div>  
  10.                 <script></script>  
  11.             </div>  
  12.         </ul>  
  13.     </div>  
  14. </body>  
那怎么办？使用 () 进行分块吧：

[html] view plaincopy
  1. body>(div>ul>li)+(div>p)+(div>form)^script  

执行，对了，这才是所要的结果：

[html] view plaincopy
  1. <body>  
  2.     <div>  
  3.         <ul>  
  4.             <li></li>  
  5.         </ul>  
  6.     </div>  
  7.     <div>  
  8.         <p></p>  
  9.     </div>  
  10.     <div>  
  11.         <form action=""></form>  
  12.     </div>  
  13. </body>  
  14. <script></script>  


6 ID 和 CLASS 操作符 # 和 .

常要做的一件事儿就是给element追加属性。如下：

[html] view plaincopy
  1. body>(div#nav>ul>li)+(div.main>p)+(div.submit.foot>form)^script  
执行结果如下：
[html] view plaincopy
  1. <body>  
  2.     <div id="nav">  
  3.         <ul>  
  4.             <li></li>  
  5.         </ul>  
  6.     </div>  
  7.     <div class="main">  
  8.         <p></p>  
  9.     </div>  
  10.     <div class="submit foot">  
  11.         <form action=""></form>  
  12.     </div>  
  13. </body>  
  14. <script></script>  
嗯，漂亮！


7 自定义属性操作符 []
这里首先说明一点，按照现在的前端规范，样式是和html分离的，所以，这里就只有自定义属性一说；但是，比如img等需要引入资源和进行alt说明（按照性能一说，alt必须有）的属性，是会自动生成的。

[html] view plaincopy
  1. body>(div#nav>ul>li>img[user_data="my_face"])+(div.main>p)+(div.submit.foot>form)^script  
执行结果如下：
[html] view plaincopy
  1. <body>  
  2.     <div id="nav">  
  3.         <ul>  
  4.             <li><img src="" alt="" user_data="my_face"></li>  
  5.         </ul>  
  6.     </div>  
  7.     <div class="main">  
  8.         <p></p>  
  9.     </div>  
  10.     <div class="submit foot">  
  11.         <form action=""></form>  
  12.     </div>  
  13. </body>  
  14. <script></script>  

说明一点，如果自定义的属性只没有空格，可以不用键入""双引号。如下：

[html] view plaincopy
  1. body[who=baidu.com]>div  
执行结果如下：
[html] view plaincopy
  1. <body who="baidu.com">  
  2.     <div></div>  
  3. </body>  

8 计数器 $

举个实例，在我们做”轮播“时，给元素的命名（id或者class），都会有一个计数位，这个时候，我们就可以使用 $ 它来实现了，如下：

[html] view plaincopy
  1. body>div#loop_show>ul>li.img_$*5  
执行结果如下：

[html] view plaincopy
  1. <body>  
  2.     <div id="loop_show">  
  3.         <ul>  
  4.             <li class="img_1"></li>  
  5.             <li class="img_2"></li>  
  6.             <li class="img_3"></li>  
  7.             <li class="img_4"></li>  
  8.             <li class="img_5"></li>  
  9.         </ul>  
  10.     </div>  
  11. </body>  
说明，a 这里的*5操作是放在一个元素所有操作就结束的末尾;；b $操作符可以进行组合，比如 $$$$，将由填充数0001开始计数。

9 文本内容 操作符 {}

在给tag进行填充文本内容时候，使用 {} 来完成，如下：

[html] view plaincopy
  1. body>div#loop_show>ul>li.img_${轮播图片$}*5  
执行结果如下：

[html] view plaincopy
  1. <body>  
  2.     <div id="loop_show">  
  3.         <ul>  
  4.             <li class="img_1">轮播图片1</li>  
  5.             <li class="img_2">轮播图片2</li>  
  6.             <li class="img_3">轮播图片3</li>  
  7.             <li class="img_4">轮播图片4</li>  
  8.             <li class="img_5">轮播图片5</li>  
  9.         </ul>  
  10.     </div>  
  11. </body>  
说明，$ 只是一个计数器，所以呢，放在合法的地方都是可以的。如上命令所示。


10 关于空格

从上面的命令都能看得出来，操作符与tags之间，都没有空格，因为，空格被Emmet用着了“缩写解析”的停止标志。而在属性值中，如果有空格，也需要使用""（双引号）进行包括。


11 其他

a 执行命令。执行命令时候，有两种合法操作：一是光标位于命令行末，二是命令行被整体选中。

b 命令行数。命令不能多行，只允许一行。这个 第10点 中的 空格 的解释有些类似，LF标志Emmet无法解析。

c 命令执行后光标位置。a 中第一种情况，光标停留在 【最低级节点文本编辑区域】；第二种情况，如果是向后选中全行，结果同a中第一种情况，如果是向前全选整行，则光标停留在结果的最后位置。

下面为其他博客转载:

1.  初始化

HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

bubuko.com,布布扣


  • html:5 或!：用于HTML5文档类型
  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型
2.  轻松添加类、id、文本和属性

连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：

bubuko.com,布布扣


连续输入类和id，比如p.bar#foo，会自动生成：

Html代码
  1. <p class="bar" id="foo"></p>  

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：

Html代码
  1. <h1>foo</h1>  
  2. <a href="#"></a>  

bubuko.com,布布扣


3.  嵌套

现在你只需要1行代码就可以实现标签的嵌套。

  • >：子元素符号，表示嵌套的元素
  • +：同级标签符号
  • ^：可以使该符号前的标签提升一行
效果如下图所示：

bubuko.com,布布扣


4.  分组

你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：

Html代码
  1. <div class="foo">  
  2.   <h1></h1>  
  3. </div>  
  4. <div class="bar">  
  5.   <h2></h2>  
  6. </div>  

bubuko.com,布布扣


5.  隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。

在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

bubuko.com,布布扣


下面是所有的隐式标签名称：

  • li：用于ul和ol中
  • tr：用于table、tbody、thead和tfoot中
  • td：用于tr中
  • option：用于select和optgroup中
6.  定义多个元素

要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：

Html代码
  1. <ul>  
  2.   <li></li>  
  3.   <li></li>  
  4.   <li></li>  
  5. </ul>  


bubuko.com,布布扣


7.  定义多个带属性的元素

如果输入 ul>li.item$*3，将会生成如下代码：

Html代码
  1. <ul>  
  2.   <li class="item1"></li>  
  3.   <li class="item2"></li>  
  4.   <li class="item3"></li>  
  5. </ul>  


bubuko.com,布布扣


二、CSS缩写

1.  值

比如要定义元素的宽度，只需输入w100，即可生成

Css代码
  1. width: 100px;  

bubuko.com,布布扣


除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：

Css代码
  1. height: 10%;  
  2. margin: 5em;  


单位别名列表：

  • p 表示%
  • e 表示 em
  • x 表示 ex
2.  附加属性

可能你之前已经了解了一些缩写，比如 @f，可以生成：

Css代码
  1. @font-face {  
  2.   font-family:;  
  3.   src:url();  
  4. }  

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：

Css代码
  1. @font-face {  
  2.   font-family: ‘FontName‘;  
  3.   src: url(‘FileName.eot‘);  
  4.   src: url(‘FileName.eot?#iefix‘) format(‘embedded-opentype‘),  
  5.      url(‘FileName.woff‘) format(‘woff‘),  
  6.      url(‘FileName.ttf‘) format(‘truetype‘),  
  7.      url(‘FileName.svg#FontName‘) format(‘svg‘);  
  8.   font-style: normal;  
  9.   font-weight: normal;  
  10. }  

bubuko.com,布布扣


3.  模糊匹配

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

Css代码
  1. overflow: hidden;  

bubuko.com,布布扣


4.  供应商前缀

如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

Css代码
  1. -webkit-transform: ;  
  2. -moz-transform: ;  
  3. -ms-transform: ;  
  4. -o-transform: ;  
  5. transform: ;  

bubuko.com,布布扣


你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

Css代码
  1. -webkit-super-foo: ;  
  2. -moz-super-foo: ;  
  3. -ms-super-foo: ;  
  4. -o-super-foo: ;  
  5. super-foo: ;  

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

Css代码
  1. -webkit-transform: ;  
  2. -moz-transform: ;  
  3. transform: ;  

前缀缩写如下：

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-
5.  渐变

输入lg(left, #fff 50%, #000)，会生成如下代码：

Css代码
  1. background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  
  2. background-image: -webkit-linear-gradient(left, #fff 50%, #000);  
  3. background-image: -moz-linear-gradient(left, #fff 50%, #000);  
  4. background-image: -o-linear-gradient(left, #fff 50%, #000);  
  5. background-image: linear-gradient(left, #fff 50%, #000);  

bubuko.com,布布扣


三、附加功能

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：

引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

bubuko.com,布布扣


四、定制

你还可以定制Emmet插件：


Emmet相关使用,布布扣,bubuko.com

Emmet相关使用

标签：style   blog   class   c   tar   ext   

原文地址：http://blog.csdn.net/u012332735/article/details/26005453
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！