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

27顶
0踩

Web前端

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

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

  • 基于SSM+JSP+HTML的东风锻造有限公司重大停管理系统(Java毕业设计，附源码，数据库，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 ssm 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 数据库系统课程设计报告-体育项目比赛管理系统设计与开发

    一、系统需求分析 1 （一）需求概述 1 （二）业务流分析 1 从运动员角度分析 1 （三）数据流分析 4 （四）数据字典 5 二、数据库概念结构设计 6 （一）实体分析 6 （二）属性分析 6 （三）联系分析 8 （四）概念模型分析（.PDM图） 9 三、数据库逻辑结构设计 9 （一）概念模型转化为逻辑模型 9 1.一对一关系的转化 9 2.一对多关系的转化 9 3.多对多关系的转化 10 （二）逻辑模型设计（.PDM图） 10 四、 数据库物理实现（一）表设计 10 （一）表设计 10 （二）创建表和完整性约束代码设计 11 五、数据库功能调试 15 （一）运动员管理模块 15 （二）负责人管理模块 16 （三）系统管理员管理模块 17 六、设计系统前台软件 21 （一）开发软件选择 21 （二）软件功能要求与设计 22 （三）软件功能实现 22 （四）系统测试 24 七、设计总结 27

  • 基于SSM+JSP的文物管理系统+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 智慧园区整体解决方案-37PPT(46页).pptx

    智慧园区，作为现代化城市发展的新兴模式，正逐步改变着传统园区的运营与管理方式。它并非简单的信息化升级，而是跨越了行业壁垒，实现了数据共享与业务协同的复杂运行系统。在智慧园区的构建中，人们常常陷入一些误区，如认为智慧园区可以速成、与本部门无关或等同于传统信息化。然而，智慧园区的建设需要长期规划与多方参与，它不仅关乎技术层面的革新，更涉及到管理理念的转变。通过打破信息孤岛，智慧园区实现了各系统间的无缝对接，为园区的科学决策提供了有力支持。 智慧园区的核心价值在于其提供的全方位服务与管理能力。从基础设施的智能化改造，如全面光纤接入、4G/5G网络覆盖、Wi-Fi网络及物联网技术的运用，到园区综合管理平台的建设，智慧园区打造了一个高效、便捷、安全的运营环境。在这个平台上，园区管理方可以实时掌握运营动态，包括道路状况、游客数量、设施状态及自然环境等信息，从而实现事件的提前预警与自动调配。同时，智慧园区还为园区企业提供了丰富的服务，如项目申报、资质认定、入园车辆管理及统计分析等，极大地提升了企业的运营效率。此外，智慧园区还注重用户体验，通过信息发布系统、服务门户系统及各类智慧应用，如掌上营销、智慧停车、智能安防等，为园区员工、企业及访客提供了便捷、舒适的生活与工作体验。值得一提的是，智慧园区还充分利用大数据、云计算等先进技术，对园区的能耗数据进行采集、分析与管理，实现了绿色、节能的运营目标。 在智慧园区的建设过程中，还涌现出了许多创新的应用场景。例如，在环境监测方面，智慧园区通过集成各类传感器与监控系统，实现了对园区水质、空气质量的实时监测与预警；在交通管理方面，智慧园区利用物联网技术，对园区观光车、救援车辆等进行实时定位与调度，提高了交通效率与安全性；在公共服务方面，智慧园区通过构建统一的公共服务平台，为园区居民提供了包括平安社区、便民社区、智能家居在内的多元化服务。这些创新应用不仅提升了园区的智能化水平，还为园区的可持续发展奠定了坚实基础。同时，智慧园区的建设也促进了产业链的聚合与发展，通过搭建聚合产业链平台，实现了园区内企业间的资源共享与合作共赢。总的来说，智慧园区的建设不仅提升了园区的综合竞争力，还为城市的智慧化发展树立了典范。它以用户需求为导向，以技术创新为驱动，不断推动着园区向更加智慧、高效、绿色的方向发展。对于写方案的读者而言，智慧园区的成功案例与创新应用无疑提供了宝贵的借鉴与启示，值得深入探索与学习。

  • Java毕业设计-SpringBoot+Vue的基于SpringBoot的冬奥会科普平台（附源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • MATLAB设计的芯片字符识别（GUI界面设计）.zip

    MATLAB设计的芯片字符识别（GUI界面设计）

  • 【工程项目】MATLAB口罩识别[自动定位颜色，多人检测，未戴预警 ].zip

    【工程项目】MATLAB口罩识别[自动定位颜色，多人检测，未戴预警 ]

  • 基于SSM+JSP的雅博书城在线系统+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 基于SpringBoot+Vue的校园疫情防控系统 (2)（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目，仅供学习参考。 Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • 2007-2023年 省级-工业机器人安装密度.rar

    工业机器人安装密度通常指的是单位面积或单位人口所拥有的工业机器人数量。这一指标能够直观地反映出一个地区或国家工业机器人的普及程度和使用情况。 本数据参照康茜（2021）和芦婷婷（2021）的方法，根据IRF联盟公布的中国各行业工业机器人安装量（IFR公布的14个大类，对应国民经济行业分类与代码（GB/4754-2011）中13-43的细分行业代码），然后从《中国劳动统计年鉴》里面收集细分行业各个省份的就业人数占全国总就业人数的百分比，工业机器人安装密度=各个省份的就业人数占全国总就业人数的百分比×全国各行业机器人安装数量。 数据 年份、省份、省份代码、所属地域、工业机器人安装密度（台） 参考文献：[1]康茜,林光华.工业机器人与农民工就业:替代抑或促进[J].山西财经大学学报,2021,43(02):43-56. [2]芦婷婷,祝志勇.人工智能是否会降低劳动收入份额——基于固定效应模型和面板分位数模型的检验[J].山西财经大学学报,2021,43(11):29-41. [3]闫雪凌,朱博楷,马超.工业机器人使用与制造业就业:来自中国的证据[J].统计研究,2020,37(01):74-87. [4]王永钦,董雯.机器人的兴起如何影响中国劳动力市场?——来自制造业上市公司的证据[J].经济研究,2020,55(10):159-175.

  • 2006-2023年 地级市-绿色全要素生产率.rar

    绿色全要素生产率（Green Total Factor Productivity，GTFP）是一个综合考虑环境因素的生产效率指标，旨在更全面地评估经济发展的可持续性和环境友好性。通过提升绿色全要素生产率，可以促进资源的有效利用、环境保护和可持续发展。 本数据通过将劳动、资本等生产要素的投入与地区生产总值（GDP）作为合意产出相联系，同时考虑工业二氧化硫、烟粉尘和废水等非合意的环境排放，采用如SBM-Malmquist-Luenberger指数法等计量手段进行测算。这种方法不仅评估了生产效率的改善情况，还反映了技术进步和环境管理在促进绿色增长方面的作用。 参考文献：排污权交易制度与能源利用效率 -对地级及以上城市的测度与实证 数据 年份、城市、超效率SBM、超效率CCR

  • 航空航天领域翼型振动与颤振分析的MATLAB仿真程序实现及应用

    内容概要：本文档详细记录了一段用于进行航空器机翼加装挂载（如导弹或其他装备）后的结构动力响应分析，特别是对颤振现象研究的 MATLAB 代码片段。主要内容涵盖初始化几何参数、物性参数以及质量特性等基本信息设定，通过定义多个矩阵（弯曲模式、扭转模式）用以描述系统运动方程的形式表达；采用Theodorsen函数表征气动力特性对于系统稳定性的影响；最终利用模态分析确定临界速度并给出最小颤振速率发生位置的相关讨论与实验数据对比验证。 适合人群：航空航天专业研究人员，工程物理学者及高等院校飞行器设计方向研究生及以上水平的技术爱好者。 使用场景及目标：①理解机翼与附加载体之间的动态交互机制；②掌握利用数学工具进行复杂机械系统的稳定性判断方法；③为实际产品研发提供理论依据和技术支持。 其他说明：文档中的部分内容已被省略以保护原创版权，同时确保敏感算法细节不在未经授权的情况下传播。由于文中涉及到大量的矩阵运算以及高级工程力学概念，请在使用前确认自己拥有足够的前置知识。

  • MATLAB 界面指纹识别MATLAB（GUI界面，比对两幅指纹）（构架）.zip

    MATLAB 界面指纹识别MATLAB（GUI界面，比对两幅指纹）（构架）

  • MATLAB车牌出入库识别（GUI界面，计时计费，停车位计算，倾斜矫正）【工程项目】.zip

    MATLAB车牌出入库识别（GUI界面，计时计费，停车位计算，倾斜矫正）【工程项目】

  • 基于SSM+JSP+HTML的电气与信息类书籍网上书店(Java毕业设计，附源码，数据库，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 ssm 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

Global site tag (gtag.js) - Google Analytics