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

27顶
0踩

Web前端

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

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

  • 本地磁盘E的文件使用查找到的

    本地磁盘E的文件使用查找到的

  • Java毕设项目：基于spring+mybatis+maven+mysql实现的社区服务管理系统分前后台【含源码+数据库+毕业论文】

    一、项目简介 本项目是一套基于SSM框架实现的社区服务管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.7及以上 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，jquery 三、系统功能 系统用户包括有管理员、社区用户 主要功能如下： 用户登录 用户注册 个人中心 修改密码 个人信息 社区用户管理 社区停车管理 社区公共场所管理 新闻类型管理 新闻资讯管理 社区政务服务管理 社区活动管理 活动报名管理 服务类型管理 社区安保维护管理 住户反馈管理 公共场所预约管理 社区论坛 系统管理等功能 详见 https://flypeppa.blog.csdn.net/article/details/139136499

  • 基于小程序的图书馆自习室座位预约管理微信小程序源代码（java+小程序+mysql+LW）.zip

    管理员权限主要实现了管理员服务端；首页、个人中心、学生管理、座位信息管理、自习室分类管理、座位预约管理、学院分类管理、专业分类管理、留言板管理、系统管理，学生微信端；首页、座位信息、座位预约、我的等功能，基本上实现了整个图书馆自习室座位预约小程序信息管理的过程。 项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 部署容器：tomcat7 小程序开发工具：hbuildx/微信开发者工具

  • 基于知识图谱的出版物检索和推荐系统源码+文档+全部资料.zip

    【资源说明】 基于知识图谱的出版物检索和推荐系统源码+文档+全部资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 基于python深度学习对花卉进行目标检测-含摄像头识别-含代码和数据集.zip

    本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本，环境需要自行配置。或可直接参考下面博文进行环境安装。 https://blog.csdn.net/no_work/article/details/144331388 安装好环境之后， 代码如需重新训练的话，需要依次运行 01、02、03py文件。 ，如果只是调用已经训练好的模型，去做识别的话，直接运行03pyqt.py即可 以下关于每个py文件的介绍： 输入指令python 01划分数据集.py 就会将我们的数据集转成yolo格式的txt，同时生成train.txt和val.txt,和配置文件data.yaml 运行02train.py即可开始训练模型。 最后运行03pyqt.py文件就有pyqt的可视化界面。 通过点击加载图片按钮，来选择我们要识别的图片，再点击检测按钮就可以完成识别了。 如果要使用摄像头检测功能直接点击摄像头按钮即可实时检测。

  • 分布式电源选址定容与优化配置MATLAB程序基于多目标粒子群算法 （1）该程序为基于多目标粒子群算法的分布式电源优化配置与选址定容程序，期刊lunwen源程序，配有该lunwen （2）本程序可有效

    分布式电源选址定容与优化配置MATLAB程序基于多目标粒子群算法 （1）该程序为基于多目标粒子群算法的分布式电源优化配置与选址定容程序，期刊lunwen源程序，配有该lunwen。 （2）本程序可有效配置分布式电源容量与安装位置。程序与lunwen包含的内容有综合成本、网损、电压稳定裕度为目标函数建立分布式电源的规划模型、多目标粒子群算法、IEEE-69节点的算例求解。 （3）赠送若干极为相似的参考lunwen，均为本人研究该课题期间认为非常系统、全面、易懂、基础的文章。

  • 分布式电源优化配置与选址定容MATLAB程序基于遗传算法 （1）该程序为基于遗传算法的分布式电源优化配置与选址定容程序，硕士学位lunwen源程序，配有该lunwen （2）本程序可有效配置分布式电

    分布式电源优化配置与选址定容MATLAB程序基于遗传算法 （1）该程序为基于遗传算法的分布式电源优化配置与选址定容程序，硕士学位lunwen源程序，配有该lunwen。 （2）本程序可有效配置分布式电源容量与安装位置。程序与lunwen包含的内容有选用投资运行成本、网损费用、发电费用为目标函数建立分布式电源的规划模型改进的自适应遗传算法、IEEE-33节点的算例求解。 （3）赠送若干极为相似的参考lunwen，均为本人研究该课题期间认为非常系统、全面、易懂、基础的文章。

  • java毕设项目之基于SpringBoot+Vue的电商应用系统的设计与实现(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java 框架：springboot，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3

  • 【瑞达期货-2024研报】加籽价格表现强劲，提振国内菜系走势.pdf

    【瑞达期货-2024研报】加籽价格表现强劲，提振国内菜系走势.pdf

  • 【JCR一区级】基于matlab蝗虫算法GOA-CNN-BiLSTM-Attention故障诊断分类预测【Matlab仿真 5445期】.zip

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

  • 基于SpringBoot集成Neo4j图数据库，利用Spark的朴素贝叶斯分类器实现基于电影知识图谱的智能问答系统源码+文档+全部资料.zip

    【资源说明】 基于SpringBoot集成Neo4j图数据库，利用Spark的朴素贝叶斯分类器实现基于电影知识图谱的智能问答系统源码+文档+全部资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 基于小程序的上门维修系统源代码（java+小程序+mysql+LW）.zip

    系统分为前台用户模块、维修员模块和管理员模块三部分； （1）、用户进入系统可以实现首页，广告信息，新闻资讯，我的，在我的页面可以对维修信息，维修记录，评价信息，我的收藏管理进行管理。 （2）、维修员进入系统可以实现首页，广告信息，新闻资讯，我的，在我的页面可以对维修信息，维修记录，评价信息等进行管理。 （3）、管理员主要包括系统首页，个人中心，用户管理，维修员管理，维修信息管理，维修记录管理，评价信息管理，广告信息管理，系统管理等有关功能进行管理。 项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 部署容器：tomcat7 小程序开发工具：hbuildx/微信开发者工具

  • MATLAB代码：计及风光发电不确定性的机组组合随机优化程序，本程序利用场景集进行随机机组组合优化调度，最终在实现运行成本最低的情况下，得到风-光-常规机组的调度结果 其中场景集的缩减采用了两种方法

    MATLAB代码：计及风光发电不确定性的机组组合随机优化程序，本程序利用场景集进行随机机组组合优化调度，最终在实现运行成本最低的情况下，得到风-光-常规机组的调度结果。 其中场景集的缩减采用了两种方法，一种是k-means聚类生成不同概率的典型场景，另一种是利用场景树算法生成不同概率的风光预测误差集。 算例采用IEEE30节点系统，在节点20和24分别加入了风电场和光伏电站，验证了随机优化在机组组合中的有效性。 该程序结果正确，注释齐全，有相应的数学模型参考文献，并提供程序的指导和，100%自己的原创程序，是学习随机优化和场景缩减以及机组组合很好的程序。

  • 【CNN回归预测】基于matlab樽海鞘算法优化卷积神经网络SSA-CNN风电数据预测（多输入单输出）【Matlab仿真 5308期】.zip

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

  • java毕设项目之大学生心理健康管理系统的设计与实现(完整前后端+说明文档+mysql+lw).zip

    功能实现：个人信息管理、学生管理、心理老师管、试卷管理、试题管理、通知管理等功能。 项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java 框架：springboot，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3

Global site tag (gtag.js) - Google Analytics