介绍

在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

基本语法:

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

命令:nav>ul>li

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

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

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

命令:div+p+bq   得到代码如下:

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

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

命令: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>

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

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

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

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

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

<div class="container wrapper more"></div>

5、生成ID:#

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

<div id="container"></div>

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

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

<div class="foo">    <h1></h1></div><div class="bar">    <h2></h2></div>

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

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

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

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

命令: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>

只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:命令: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>

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

命令: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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div id="content">    	<div class="article">    		<h1 class="ok" title="papername" style="color:#000;"></h1>    		<h3 class="no" title="subname" style="color:#fff;"></h3>    		<p class="words"></p>    	</div>    </div> 

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

<div class="header">    	<ul class="nav">    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    	</ul>    </div>
<table>    	<thead>    		<td class="col1"></td>    		<td class="col2"></td>    		<td class="col3"></td>    		<td class="col4"></td>    	</thead>    	<tbody>    		<tr class="row01">    			<td class="col1"></td>    		</tr>    		<tr class="row02">    			<td class="col2"></td>    		</tr>    		<tr class="row03">    			<td class="col3"></td>    		</tr>    	</tbody>    	<tfoot>    		<td></td>    		<td></td>    		<td></td>    		<td></td>    		<td></td>    	</tfoot>    </table>
<html>    <head>    	<title></title>    	<style type="text/css"></style>    	<script src="abc1.js" type="text/javascript"></script>    	<script src="abc2.js" type="text/javascript"></script>    	<script src="abc3.js" type="text/javascript"></script>    </head>    <body>    	<div class="content">    		<div class="nav">    			<ul>    				<li><a href=""><span></span></a></li>    			</ul>    		</div>    	</div>    	<div class="sidebar">    		<div class="top"></div>    		<div class="middle"></div>    		<div class="bottom"></div>    	</div>    	<div class="mian">    		<div class="article">    			<h1>article1</h1>    		</div>    		<div class="article">    			<h1>article2</h1>    		</div>    		<div class="article">    			<h1>article3</h1>    		</div>    	</div>    </body>    <div class="footer">copyright</div>    </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

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

命令:script:src

<script src=""></script>

命令:img

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

命令:inp

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

命令:input:p

<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工具使用和技巧的更多相关文章

  1. PostgreSQL 图形化客户端工具的使用技巧你都get了吗?

    PostgreSQL 数据库作为目前功能较强大的开源数据库,得到了广泛应用.其中,TSA就用到了这款数据库来存储处理后的一些业务数据.虽然PostgreSQL自身提供了命令行交互式客户端工具psql, ...

  2. [转帖]CHROME开发者工具的小技巧

    CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论  64,08 ...

  3. 前端开发神一样的工具chrome调试技巧

    前端开发神一样的工具chrome调试技巧 文章来自  Colin-UED // 与您分享前端开发知识 主页 Javascript HTML CSS NodeJs User Experience FE ...

  4. 前端开发入门到进阶第二集【emmet插件的使用技巧】

    Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好 ...

  5. Chrome 35个开发者工具的小技巧

    来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...

  6. web前端开发工具HBuilder使用技巧之快捷键

    /*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/ 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter) 中途 ...

  7. 【原】画流程图工具visio使用技巧汇总

    最近写论文需要画不少流程图,有两种选择,一是word, 二是visio.原先一直用word画,效果也还可以,但是每个部件画完后为了便于适应排版变动,需要将需要的模块按下ctrl逐个点击选中后进行组合. ...

  8. Chrome 开发工具 Javascript 调试技巧

    http://www.w3cplus.com/tools/dev-tips.html 一.Sources 面板介绍: Sources 面板分为左中右 3 部分左:Sources 当前页面加载的资源列表 ...

  9. 复刻smartbits的国产网络测试工具minismb-操作技巧

    复刻smartbits的国产网络性能测试工具smartbits,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连 ...

随机推荐

  1. ife task0003学习笔记(五):JavaScript面向对象

    JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.而在 JavaScript 中,this ...

  2. java线程中的 sleep() wait() yield()

    sleep()方法是让线程休眠  可以指定时间  其实就是让线程进入阻塞状态  指定的时间过后 进入就绪状态  不释锁 相当于抱着锁睡觉 wait()  让线程进入等待状态  被唤醒后才会继续执行   ...

  3. Linux抓包工具:tcpdump

    tcpdump 是一个命令行实用工具,允许你抓取和分析经过系统的流量数据包.它通常被用作于网络故障分析工具以及安全工具. tcpdump 是一款强大的工具,支持多种选项和过滤规则,适用场景十分广泛.由 ...

  4. postgres formencode.api.Invalid

    错误提示: Invalid: expected an int in the IntCol 'geom', got <type 'str'> '010100000007EBFFFC3A611 ...

  5. HDU 1800——Flying to the Mars——————【字符串哈希】

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  6. JavaScript实现StringBuffer

    function StringBuffer() { this._strings = new Array(); } StringBuffer.prototype.Append = function(_s ...

  7. sp_addlinkedserver创建远程服务器查询

    远程服务器查询可以分两步完成: 1.建立连接服务器 exec sp_addlinkedserver @server='Test_Server', --被访问的服务器别名 @srvproduct='', ...

  8. Java ConcurrentHashMap初始化

    初始化ConcurrentHashMap时可以指定map大小,由于ConcurrentHashMap代码默认大小是2n,这里需要把用户填的大小转换成2n备注:代码基于jdk 1.8.0_91Concu ...

  9. -ms-zoom property

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Scrapy框架之日志等级和请求传参

    一.Scrapy的日志等级 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. 1.日志等级(信息种类) ERROR:错误 WARN ...