介绍

在前端开发的过程中,一大部分的工作是写 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. Linux利器strace

    strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核态模式 ...

  2. php二维数组排序方法(array_multisort usort)

    一维数组排序可以使用asort.ksort等一些方法进程排序,相对来说比较简单.二维数组的排序怎么实现呢?使用array_multisort和usort可以实现 例如像下面的数组: $users = ...

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

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

  4. C++程序设计基础(4)宏定义和内联

    1.知识点 1.1宏定义 (1)不带参数的宏定义 #define ERROR_MESSAGE -100 #define SECONDS_PER_DAY 60*60*60 (2)带参数宏定义,这种形式称 ...

  5. ul+js模拟select+改进

    html: <div class="select_box"> <input type="text" value="还款方式" ...

  6. 深入理解JavaScript系列(2):揭秘命名函数表达式

    前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表 ...

  7. SpringSecurity 3.2入门(9)自定义权限控制代码实现

    1. 一个自定义的filter,必须包含authenticationManager,accessDecisionManager,securityMetadataSource三个属性,我们的所有控制将在 ...

  8. info.plist 安全登录

    设置info.plist 安全登录 App Transport Security Settings  dictionary Allow Arbitrary Loads  Boolean  YES

  9. 从零开始的全栈工程师——html篇1

    全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐 ...

  10. mardown文档的用法

    <hr>分割换行符<br>分隔符 <ul> <li></li></ul>无序标签 <ol><li>< ...