地址:https://segmentfault.com/a/1190000007812543

Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能,极大的提高前端开发效率。

下载地址http://emmet.io/download/

缩写

Emmet使用特殊的表达式Abbreviations,也就是缩写:这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。

例如

#page>div.logo+ul#navigation>li*5>a{Item $}

会被转义成

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>

HTML元素

在Emmet中可以使用元素名例如 div 或 p 生成HTML标签。Emmet没有预设任何标签名,所以可以使用任何可用名称来生成HTML标签:div → <div></div> 或 foo → <foo></foo>

嵌套操作符

嵌套操作用来生成元素的DOM树中的兄弟节点或子节点

child:>

使用 > 生成元素子节点

div>ul>li

会被转义成

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

Sibling: +

使用 生成元素兄弟节点

div+p+bq

会被转义成

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

Climb-up: ^

使用 ^ 在元素父节点生成新的元素节点

操作符 ^ 的作用和 > 刚好相反

 > 可以在子级生成新的节点

div+div>p>span+em

会被转义成

<div></div>
<div>
<p><span></span><em></em></p>
</div>

 ^ 可以在父级生成新的节点

div+div>p>span+em^bq

会被转义成

<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

用n个 ^ ,就可以在第n父级生成新的节点

div+div>p>span+em^^^bq

会被转义成

<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

使用 * 生成多个相同元素

ul>li*5

会被转义成

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

Grouping: ()

圆括号 () 是Emmet的高级用法,用来实现比较复杂的DOM结构

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>

属性操作符

属性操作符用来修改元素的属性

ID 和 CLASS

Emmet给元素添加ID和CLASS的方法和CSS的语法类似

div#header+div.page+div#footer.class1.class2.class3

会被转义为

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

使用[attr]标记来添加自定义属性

td[title="Hello world!" colspan=3]

会被转义为

<td title="Hello world!" colspan="3"></td>

元素编号

使用 $ 操作符可以对重复元素进行有序编号

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>

还可以用多个 $ 定义编号的格式

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>

 $ 后面添加 @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

会被转义为

<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>

文本操作符

Emmet使用 Text:{} 给元素添加文本内容

a{Click me}

会被转义为

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

注意: {text} 在Emmet中是被当成单独的元素来解析的,但当和其他元素结合使用时会有特殊的含义

例如:
a{click}  a>{click 
会输出相同的结果,但
a{click}+b{here}  a>{click}+b{here} 
输出的结果则不一样

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b> <!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

 a>{click}+b{here} 中, <b> 元素是<a>元素的子节点。这个就是区别:当 {text} 直接写在元素后面时,并不会改变父元素的上下文。

下面是一个更复杂的案例:

p>{Click }+a{here}+{ to continue}

会被转义为

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

p{Click }+a{here}+{ to continue}

则会被转义为

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

Emmet-前端开发神器的更多相关文章

  1. webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器

    #webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事 必先利其器 ##各工具介绍 `webstorm`是**JetBrains* ...

  2. Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

    WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...

  3. 前端开发神器 VSCode 使用总结

    VSCode 是微软出品的,基于 Electron 和 TypeScript 的,集成了 git 版本管理和命令行终端,而且开源稳定,插件丰富,再搭配一款 Chrome 浏览器,可以说是前端开发神器了 ...

  4. 前端开发神器Charles从入门到卸载

    前言 本文将带大家学习使用前端开发神器-charles,从基本的下载安装到常见配置使用,为大家一一讲解. 一.花式夸奖Charles 截取 Http 和 Https 网络封包. 支持重发网络请求,方便 ...

  5. Sublime Text 使用指南 - 前端开发神器

    Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...

  6. 前端开发神器 - Brackets

    做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端! Brackets是一款基于web(html+css+js)开发的web ...

  7. 前端开发神器Sublime Text2/3之安装使用(windows7/Mac)

    一,到官方网站下载神器 地址:http://www.sublimetext.com/3 Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packag ...

  8. 前端开发神器sublime Text

    实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...

  9. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

  10. 学习web前端之神器sublime text 3

    第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习.现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾.不知道自己能否坚持每周至少写2篇博文. 古话说的好:工欲善其事,必先 ...

随机推荐

  1. Linux延时执行命令at

    也许你的Ubuntu没有at命令,先安装 - sudo apt install at 在某时刻执行命令 - at 15:30:回车之后,需要在at后输入指令,表示在15:30要执行的指令 - 比如输入 ...

  2. vue项目报错,解决Module build failed: Error: Cannot find module 'node-sass' 问题

    1.报错问题 1 E:\WebStormFile\treehole-manage>npm run dev > xc-ui-pc-sysmanage@1.0.0 dev E:\WebStor ...

  3. wepy_two

    2.代码高亮WebStorm/PhpStorm(其他工具参见:wepy官网代码高亮) (1)打开Settings,搜索Plugins,搜索Vue.js插件并安装. (2) 打开Settings,搜索F ...

  4. openstack stein部署手册 8. neutron-api

    # 建立数据库用户及权限 create database neutron; grant all privileges on neutron.* to neutron@'localhost' ident ...

  5. Maya2014下载安装与激活

    目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. 其他下载地址 3. 激活步骤 1. 更多推荐 其他Maya版本的下载与激活:https://www.cnblogs.com/ ...

  6. Archlinux笔记本安装手记

    最近看着Linux Mint里一揽子乱七八糟的应用和散布各处的配置文件愈发烦躁,便想体验下大名鼎鼎的Arch,网上的帖子们把Arch Linux的安装难度描述的非常可怕,但实际上跟着Wiki一步一步来 ...

  7. 动态规划—distinct-subsequences

    题目: Given a string S and a string T, count the number of distinct subsequences of T in S. A subseque ...

  8. Mac sublime 安装包的时候出现 unable to download xxx (_ssl.c:548)

    Mac sublime 安装包的时候出现 unable to download xxx前置条件:[本文行文中,所使用的电脑环境为 mac](当然不排除,在其他系统下,依然可以采用这种解决方案) 今天想 ...

  9. 动态新增删除tbody表格行与ajax请求完成后刷新父窗口问题

    获取tbody内的一行数据,包括hidden类型的数据$("#tbody_id").find("tr").each(function(){ var tdArr ...

  10. pycharm中能运行,但是往往py都要放到服务器上去跑,问题来了

    py文件在linux上运行,导包错误: 在py文件中添加项目的根目录: import sys sys.path.append('项目路径') sys.path.append(os.path.dirna ...