资讯频道 → Web前端
阅读更多

27顶
0踩

Web前端

原创新闻 Emmet：HTML/CSS代码快速编写神器

2013-04-16 17:40 by 副主编 wangguo 评论(17) 有435124人浏览
html css Emmet Zen coding

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：


Zen coding下的编码演示


去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。

一、快速编写HTML代码

1.  初始化

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



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

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



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

<p class="bar" id="foo"></p>

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

<h1>foo</h1>
<a href="#"></a>



3.  嵌套

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

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



4.  分组

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

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



5.  隐式标签

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

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



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

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

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

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




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

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

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




二、CSS缩写

1.  值

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

width: 100px;



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

height: 10%;
margin: 5em;


单位别名列表：

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

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

@font-face {
  font-family:;
  src:url();
}

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

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}



3.  模糊匹配

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

overflow: hidden;



4.  供应商前缀

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

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



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

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

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

-webkit-transform: ;
-moz-transform: ;
transform: ;

前缀缩写如下：

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

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

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);



三、附加功能

生成Lorem ipsum文本

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

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



四、定制

你还可以定制Emmet插件：


五、针对不同编辑器的插件

Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：

相关文档：http://docs.emmet.io/（其中包含了一个Demo，你可以试验文中所提到的这些缩写）

Via smashingmagazine
  • 大小: 122.9 KB
  • 大小: 48.2 KB
  • 大小: 13 KB
  • 大小: 15.8 KB
  • 大小: 26.4 KB
  • 大小: 26.8 KB
  • 大小: 25.1 KB
  • 大小: 18.7 KB
  • 大小: 28.9 KB
  • 大小: 36 KB
  • 大小: 78.7 KB
  • 大小: 61 KB
  • 大小: 111.1 KB
  • 大小: 94.8 KB
  • 大小: 23 KB
27
顶
0
踩
评论 共 17 条 请登录后发表评论
17 楼 hejinguo727 2016-05-03 14:13
神器啊。。。
16 楼 yanhaijing 2014-12-25 11:12
这么酷炫，赞
15 楼 FLOWER1987 2013-05-23 15:35
不支持ftl文件吗 只支持扩展名为html的文件？
14 楼 naryCC 2013-05-07 14:18
效率是成功的10%
13 楼 meichen8050753 2013-04-18 13:22
神器啊。。。
12 楼 cyruscript 2013-04-18 12:17
在MyEclipse 2013下试过,与hibernate插件有冲突.
11 楼 wgy_java 2013-04-18 10:46
这么酷@!
10 楼 akandfxs 2013-04-18 09:20
特意登陆顶神器。
9 楼 ivension 2013-04-17 21:39
神器，MARK一下。
8 楼 weng 2013-04-17 21:06
神器   
7 楼 toolog 2013-04-17 16:19
见识过！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
6 楼 yjc2020 2013-04-17 14:24
wangguo 写道
yjc2020 写道
eclipse 插件 403

https://github.com/emmetio/emmet-eclipse



Go to Help > Install New Software… in your Eclipse IDE
Add http://emmet.io/eclipse/updates/ in update sites
Check Emmet for Eclipse group in available plugins list, click Next button and follow the installation instructions
Restart Eclipse
5 楼 wangguo 2013-04-17 10:10
yjc2020 写道
eclipse 插件 403

https://github.com/emmetio/emmet-eclipse
4 楼 yjc2020 2013-04-17 09:46
eclipse 插件 403
3 楼 cyruscript 2013-04-16 21:13
freezingsky 写道
。。。这种编码很是神奇，但对于开发者而言，相当于学多门语言。。。

语法很简单，会基本css语法基本可以在非常短的时间就可以把常用的语法掌握。
2 楼 freezingsky 2013-04-16 20:29
。。。这种编码很是神奇，但对于开发者而言，相当于学多门语言。。。
1 楼 cyruscript 2013-04-16 20:23
$符号得到加强，不过支持最好是SublimeText. DW等真没支持。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Emmet for Sublime Text 3 HTML/CSS代码快速编写神器

    Sublime Text 3的HTML/CSS代码快速编写神器：Emmet，使用方法：直接解压到Sublime Text 3安装路径下，如C:\Software\Sublime Text3\Emmet，注意Emmet文件名的大小写。

  • html自动补全pspad,Emmet：HTML/CSS 代码快速编写神器

    它使用仿 CSS 选择器的语法来生成代码，大大提高了 HTML/CSS 代码编写的速度，比如下面的演示：Zen coding 下的编码演示去年年底，该插件已经改名为 Emmet。但 Emmet 不只改名，还带来了一些新特性。本文就来直观地...

  • Emmet:HTML/CSS代码快速编写神器

    如何使用phpstorm，快速生成html代码，详细看转载的文章。

  • emmet：HTML/CSS代码快速编写神器

    在 Sublime text 2 中安装 Emmet Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入...

  • 分布式电网动态电压恢复器模拟装置设计与实现.doc

    本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。

  • 【无人机通信】基于matlab Stackelberg算法无人机边缘计算抗干扰信道分配【含Matlab源码 4957期】.mp4

    Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

  • 电网公司数字化转型规划与实践两个文件.pptx

    电网公司数字化转型规划与实践两个文件.pptx

  • React Native Ruby 前后端分离系统案例介绍文档

    React Native Ruby 前后端分离系统案例介绍文档

  • http请求方法.docx

    HTTP（Hypertext Transfer Protocol）定义了一些常见的请求方法（也称为动词或谓词），用于指示对服务器执行的操作类型。以下是常见的 HTTP 请求方法： GET：从服务器获取资源。GET 方法的请求参数一般附在 URL 后面，通过问号传参形式传递。 POST：向服务器提交数据，常用于提交表单或上传文件等操作。POST 方法的请求参数一般包含在请求体中。 PUT：向服务器发送数据，用来创建或更新资源。通常用于更新整个资源，但不限于此。 DELETE：请求服务器删除指定的资源。 HEAD：类似于 GET 方法，但服务器只返回响应头部，不返回实际内容。主要用于获取资源的元信息。 PATCH：部分更新资源，用来对资源进行局部修改。 OPTIONS：获取目标资源所支持的通信选项，常用于跨域请求的预检。 TRACE：回显服务器收到的请求，主要用于测试或诊断。 CONNECT：HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 这些方法定义了客户端与服务器之间的交互方式，每种方法都有特定的语义和使用场景。在实际开发中，选择合适的方法非常重

  • ROS的一些基本概念和语法介绍 ROS提供了丰富的工具和库，用于构建复杂的机器人应用.docx

    ROS的一些基本概念和语法介绍。ROS提供了丰富的工具和库，用于构建复杂的机器人应用.docx

  • 利达余压调试软件说明书

    利达余压调试软件说明书，介绍利达旗下品牌的余压系统调试软件的使用方法

  • 基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx

    基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx

  • 城乡规划相关-第八章城市生态与城市环境.pdf

    城乡规划相关-第八章城市生态与城市环境.pdf，思维导图，适合打印，城乡规划考试必备

  • 安卓古籍库v9.2.0纯净无广告

    软件介绍 这是一款免费阅读的书籍app，有听书功能包含几乎所有古籍，喜欢古籍，喜欢学习各方面知识不可错过的软件，包含了古代各方面知识，古代科技，中医，科技，神话小说，道佛，诸子百家，二十六史记等等你能想到的里面几乎都有。

  • java面试，Java基础知识

    Java面试是评估应聘者Java技术能力和项目经验的重要环节。在准备Java面试时，应聘者需要深入理解Java语言的核心概念，熟练掌握常用的开发框架和库，并能够清晰地描述自己的项目经历。以下是一些Java面试中可能涉及的关键点和建议： 一、Java基础知识 Java核心特性：理解Java的面向对象编程、自动内存管理（垃圾回收）、跨平台性等核心特性。 Java集合框架：熟悉Java集合框架，如List、Set、Map等接口及其实现类的特性和使用场景。 JVM与内存管理：了解Java虚拟机(JVM)的工作原理和内存管理，包括类加载机制、内存区域（堆、栈、方法区等）以及垃圾回收算法。 二、Java进阶知识 并发编程：掌握线程的生命周期、同步机制、线程池等。 基本算法与数据结构：熟练掌握排序、搜索、递归、动态规划等常见算法，以及数组、链表、栈、队列、树（二叉树、平衡树、红黑树）、图等基本数据结构及其操作。 性能优化：了解如何对Java程序进行性能优化，包括代码层面的优化（减少不必要的对象创建、使用缓存等）、数据库查询优化（索引、分页查询等）、使用性能分析工具进行瓶颈定位。 三、Java技术栈

  • 遗传算法的概要介绍与分析

    遗传算法（Genetic Algorithms, GA）是一种模拟自然选择和遗传学机制的搜索启发式算法，它通过模拟生物进化过程中的遗传、选择、交叉（杂交）和变异等操作，来求解复杂的优化问题。遗传算法资源广泛且多样，涵盖了从基础理论到实际应用的各个方面。 首先，理论资源方面，遗传算法的研究涵盖了算法设计原理、适应度函数构造、遗传算子（选择、交叉、变异）的优化策略等。这些资源通常以学术论文、专著和在线教程的形式存在，为学者和工程师提供了深入理解和应用遗传算法的理论基础。 其次，软件工具与库是遗传算法实践的重要资源。市面上存在多种开源和商用的遗传算法库，如MATLAB的遗传算法工具箱、Python的DEAP（Distributed Evolutionary Algorithms in Python）库等，这些工具提供了丰富的算法实现和接口，极大地方便了用户进行算法测试和应用开发。 此外，遗传算法的应用案例也是宝贵的资源。从工程优化、机器学习参数调优到生物信息学等领域，遗传算法都展现出了强大的求解能力。通过研究这些应用案例，用户可以了解到遗传算法在不同场景下的具体实现方法和效果，从而为自

  • css,基础知识小总结

    前端，初学者基础知识小总结，内容简单易懂，适合想学习前端的新手小百查考学习,内容有 标签选择器，类选择器 ，id选择器，通配符，后代选择器，子选择器， 并集选择器，伪类选择器，字体“ 样式 系列 大小 粗细 风格”，文本样式 ，文本颜色，文本对齐，装饰文本，文本缩进，行间距，背景颜色， 背景图片，背景平铺，背景图片位置，背景样式简写，背景色半透明，元素的显示模式：“块元素, 行内元素,行内块元素,元素显示模式的转换" ,边框、外边距、内边距、实际内容,浮动，网页布局总结，清除浮动，CSS样式表：“行内样式表，内部样式表，外部样式表,这些基础前端内容。还未学习前端，想了解前端的宝子们可以看看。

  • 【无人机定位】基于matlab拓展卡尔曼滤波EKF结合LQR无人机定位【含Matlab源码 4951期】.mp4

    Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

  • 2024年欧洲节水花洒头市场主要企业市场占有率及排名.docx

    2024年欧洲节水花洒头市场主要企业市场占有率及排名.docx

Global site tag (gtag.js) - Google Analytics