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

27顶
0踩

Web前端

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

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

  • Matlab环境下决策分类树的构建、优化与应用

    内容概要：本文详细介绍了如何利用Matlab构建、优化和应用决策分类树。首先，讲解了数据准备阶段，将数据与程序分离，确保灵活性。接着，通过具体实例展示了如何使用Matlab内置函数如fitctree快速构建决策树模型，并通过可视化工具直观呈现决策树结构。针对可能出现的过拟合问题，提出了基于成本复杂度的剪枝方法，以提高模型的泛化能力。此外，还分享了一些实用技巧，如处理连续特征、保存模型、并行计算等，帮助用户更好地理解和应用决策树。 适合人群：具有一定编程基础的数据分析师、机器学习爱好者及科研工作者。 使用场景及目标：适用于需要进行数据分类任务的场景，特别是当需要解释性强的模型时。主要目标是教会读者如何在Matlab环境中高效地构建和优化决策分类树，从而应用于实际项目中。 其他说明：文中不仅提供了完整的代码示例，还强调了代码模块化的重要性，便于后续维护和扩展。同时，对于初学者来说，建议从简单的鸢尾花数据集开始练习，逐步掌握决策树的各项技能。

  • 《营销调研》第7章-探索性调研数据采集.pptx

    《营销调研》第7章-探索性调研数据采集.pptx

  • Assignment1_search_final(1).ipynb

    Assignment1_search_final(1).ipynb

  • 美团外卖优惠券小程序 美团优惠券微信小程序 自带流量主模式 带教程.zip

    美团优惠券小程序带举牌小人带菜谱+流量主模式，挺多外卖小程序的，但是都没有搭建教程 搭建： 1、下载源码，去微信公众平台注册自己的账号 2、解压到桌面 3、打开微信开发者工具添加小程序-把解压的源码添加进去-appid改成自己小程序的 4、在pages/index/index.js文件搜流量主广告改成自己的广告ID 5、到微信公众平台登陆自己的小程序-开发管理-开发设置-服务器域名修改成

  • 《计算机录入技术》第十八章-常用外文输入法.pptx

    《计算机录入技术》第十八章-常用外文输入法.pptx

  • 基于Andorid的跨屏拖动应用设计.zip

    基于Andorid的跨屏拖动应用设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。

  • 《网站建设与维护》项目4-在线购物商城用户管理功能.pptx

    《网站建设与维护》项目4-在线购物商城用户管理功能.pptx

  • 区块链_房屋转租系统_去中心化存储_数据防篡改_智能合约_S_1744435730.zip

    区块链_房屋转租系统_去中心化存储_数据防篡改_智能合约_S_1744435730

  • 《计算机应用基础实训指导》实训五-Word-2010的文字编辑操作.pptx

    《计算机应用基础实训指导》实训五-Word-2010的文字编辑操作.pptx

  • 《移动通信(第4版)》第5章-组网技术.ppt

    《移动通信(第4版)》第5章-组网技术.ppt

  • ABB机器人基础.pdf

    ABB机器人基础.pdf

  • 《综合布线施工技术》第9章-综合布线实训指导.ppt

    《综合布线施工技术》第9章-综合布线实训指导.ppt

  • 最新修复版万能镜像系统源码-最终版站群利器持续更新升级

    很不错的一套站群系统源码,后台配置采集节点，输入目标站地址即可全自动智能转换自动全站采集!支持 https、支持 POST 获取、支持搜索、支持 cookie、支持代理、支持破解防盗链、支持破解防采集 全自动分析,内外链接自动转换、图片地址、css、js，自动分析 CSS 内的图片使得页面风格不丢失: 广告标签，方便在规则里直接替换广告代码 支持自定义标签，标签可自定义内容、自由截取、内容正则截取。可以放在模板里，也可以在规则里替换 支持自定义模板，可使用标签 diy 个性模板，真正做到内容上移花接木 调试模式，可观察采集性能，便于发现和解决各种错误 多条采集规则一键切换，支持导入导出 内置强大替换和过滤功能，标签过滤、站内外过滤、字符串替换、等等 IP 屏蔽功能，屏蔽想要屏蔽 IP 地址让它无法访问 ****高级功能*****· url 过滤功能，可过滤屏蔽不采集指定链接· 伪原创，近义词替换有利于 seo· 伪静态，url 伪静态化，有利于 seo· 自动缓存自动更新，可设置缓存时间达到自动更新，css 缓存· 支持演示有阿三源码简繁体互转· 代理 IP、伪造 IP、随机 IP、伪造 user-agent、伪造 referer 来路、自定义 cookie，以便应对防采集措施· url 地址加密转换，个性化 url，让你的 url 地址与众不同· 关键词内链功能· 还有更多功能等你发现…… 程序使用非常简单，仅需在后台输入一个域名即可建站，不限子域名，站群利器，无授权，无绑定限制，使用后台功能可对页面进行自定义修改，在程序后台开启生 成功能，只要访问页面就会生成一个本地文件。当用户再次访问的时候就直接访问网站本地的页面，所以目标站点无法访问了也没关系，我们的站点依然可以访问， 支持伪静态、伪原创、生成静态文件、自定义替换、广告管理、友情链接管理、自动下载 CSS 内的图。

  • 《Approaching(Almost)any machine learning problem》中文版第11章

    【自然语言处理】文本分类方法综述：从基础模型到深度学习的情感分析系统设计

  • 基于Andorid的下拉浏览应用设计.zip

    基于Andorid的下拉浏览应用设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。

Global site tag (gtag.js) - Google Analytics