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

27顶
0踩

Web前端

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

2013-04-16 17:40 by 副主编 wangguo 评论(17) 有434599人浏览
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”呼出面板，输入...

  • php入门留言板 php+access PHP语言基础

    【PHP】php入门留言板 php+access PHP语言基础 【实例简介】php入门留言板 php access php入门留言板 让你轻松学会php 基本语言结构.php连 access数据库的语法以及功能.php access 【核心代码】 文件清单 ├── admin.php ├── detail.php ├── images │ ├── arrow2.gif │ ├── arrow.gif │ ├── bg.gif │ ├── bottom-bg.gif │ ├── column.gif │ ├── dished_x.gif │ ├── favicon.ico │ ├── layout-bodybg.gif │ ├── layout-footer.gif │ ├── layout-top.gif │ ├── li-right.gif │ └── Thumbs.db ├── inc │ ├── config.php │ ├── conn.php │ └── data.mdb ├── index.php ├── sty

  • 关于C语言的学习代码和C语言的刷题代码.zip

    C语言诞生于美国的贝尔实验室，由丹尼斯·里奇（Dennis MacAlistair Ritchie）以肯尼斯·蓝·汤普森（Kenneth Lane Thompson）设计的B语言为基础发展而来，在它的主体设计完成后，汤普森和里奇用它完全重写了UNIX，且随着UNIX的发展，c语言也得到了不断的完善。为了利于C语言的全面推广，许多专家学者和硬件厂商联合组成了C语言标准委员会，并在之后的1989年，诞生了第一个完备的C标准，简称“C89”，也就是“ANSI C”，截至2020年，最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C，是因为C语言源自Ken Thompson发明的B语言，而B语言则源自BCPL语言。 1967年，剑桥大学的Martin Richards对CPL语言进行了简化，于是产生了BCPL（Basic Combined Programming Language）语言。

  • 安卓图片上传和文件上传带jsp服务端源码.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台

  • 物资管理系统项目源码.rar

    物资管理系统项目源码.rar是一个综合性的软件开发包，旨在为高校学生提供一个完整的框架和参考实现，以便他们能够进行毕业设计或课程设计。这个压缩包包含了多个关键组件，如用户认证、库存管理、订单处理、报表生成等模块，每个模块都配备了详细的文档和代码实例，确保学生可以快速理解并开始构建自己的物资管理系统。该系统采用了现代的软件架构理念，比如MVC模式，使得前后端分离，便于维护和升级。同时，它支持多种数据库系统，如MySQL、SQLite等，提供了数据持久化的灵活性。在安全性方面，系统实现了基于角色的访问控制，保障了操作的权限划分。此外，它还考虑了用户体验，界面友好，操作直观。对于即将步入职场的软件工程专业的学生而言，通过分析和扩展这个源码包中的项目，不仅可以锻炼他们的编程实践能力，还能帮助他们理解企业级应用的开发流程和标准。无论是作为学习资源还是实践平台，物资管理系统项目源码.rar都是一个宝贵的资料，有助于学生将理论知识转化为实际操作技能，为他们日后的职业发展奠定坚实的基础。问问助手:解决方案编制助手重新回答||

  • 可二次开发程序员表白代码.rar

    “可二次开发程序员表白代码.rar”是一个专为计算机专业的学生和编程爱好者设计的源码文件包，它旨在帮助用户通过编写和定制专属的表白程序来表达他们的情感。这个文件包不仅适合作为毕业设计或课程设计项目，而且也是一个绝佳的实践工具，用于提升编程技能和理解软件开发的全过程。该源码文件包含有多个模块，每个模块都经过精心设计，易于理解和修改，以适应不同的个性化需求。用户可以在这些模板的基础上进行二次开发，添加自己的创意元素，如特定的文本信息、背景音乐、动画效果等，使得表白程序更具个性和情感色彩。此外，源码文件包还附带详细的文档说明和注释，为初学者提供了丰富的学习资源。通过阅读和实践这些材料，学生能够深入理解编程语言的本质，提高解决实际问题的能力，并学会如何将理论知识应用到实际项目中。总之，“可二次开发程序员表白代码.rar”不仅是一个富有创意和技术挑战的项目，它还鼓励用户发挥想象力，用技术的方式传达爱意，是一份融合了情感与科技、教育与娱乐的独特礼物。问问助手:资深编程大师重新回答||

  • 数字同轴全息显微术中孪晶图像去除的神经网络方法matlab代码.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 返回键退出程序的两种方式.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台

  • 浮动窗口.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台

  • 二维码扫描案例.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台

  • 基于matlab的CDMA

    写出所有n=5的m序列发生器的特征多项式，画出电路结构，仿真生成m序列并运算，画出其自相关和互相关曲线。

  • 基于单片机的智能家居环境监控系统的设计，单片机能够检测家居环境并显示，根据数据智能预警

    当今家居生活中面临各种环境与健康安全问题，如空气湿度过低，容易让人患上呼吸系统的疾病；CO、甲醛等有害气体危害人体健康；天燃气泄漏引起的爆炸事故频发等。人们对高品质生活环境的追求越来越强烈，所以居住环境的各种参数得到了大家的广泛重视。随着智能化与信息化的快速发展，我们可以利用现代科技对家居环境进行监测及调整，使我们的居住体验更加美好。 本设计完成一个可以监测温湿度、有害气体以及非法入侵的智能家居监控系统，包括主控模块、传感器模块、显示模块、报警驱动模块等。 系统的控制核心是STC89C52单片机，通过DHT11传感器来监测室内温湿度，烟雾传感器MQ-2监测有害气体烟雾浓度，HC-SR501传感器用来监测人体信号，按键电路可以设置监测数据上下限阈值及人体红外监测布防状态，当超过阈值时，蜂鸣器和LED灯声光报警，同时通过继电器驱动相应电器，实时对家居环境进行调控。此外，通过LCD1602液晶屏显示实时温湿度、烟雾浓度等信息供人们实时了解家庭环境状况，从而保证家庭生活环境的安全与舒适。

  • 网易推出的AI智能翻译平台，支持音频、文档、图片、字幕等.txt

    网易推出的AI智能翻译平台，支持音频、文档、图片、字幕等.txt

  • NC65 UAP65 主子单据开发 带审批流 详细笔记

    NC65 UAP65 主子单据开发 带审批流 详细笔记，共同学习，共同进步。

  • 机械臂的碰撞检测研究.pdf

    机械臂的碰撞检测研究.pdf

  • c语言-c语言编程基础之leetcode题解第23题合并K个升序链表.zip

    c语言 c语言_c语言编程基础之leetcode题解第23题合并K个升序链表

Global site tag (gtag.js) - Google Analytics