使用Emmet加速Web前端开发

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-03-09   阅读次数: 46   查看权限: 游客查看

使用Emmet加速Web前端开发

Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水平。也就是今天所说的Emme插件。

Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中。到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器都可以安装这款插件。比如Sublime Text、Eclipse、Notepad++、Adobe Dreamweaver等都有相应的Emment插件可安装。而webStorm、Builder等IDE都已经内置此插件功能。

在Web前端开发中,我们不得不面对一个残酷的现实。在写HTML代码时需要一定的时间,因为我们要花大把的时间写HTML标签,属性,引号等;同样在编写CSS时,我们要写很多的属性、属性值,大括号和分号等。当然,大多数的文本编辑器都或多或少带有代码自动提示功能,在开发之时,帮了很大的忙,但仍然需要人工输入很多代码。而Emmet插件,集成了很多缩写,大家在开发时只需要输入简单的缩写,按tab键或ctrl+E键就能扩展出所需的代码片段。

创建初始文档
任何一个HTML文件,都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!或html:5,然后点击tab键,你就会看到一个HTML5的doctype默认标签:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>


    html:5或!:HTML5文档类型
    html:xt:XHTML过渡型文档类型
    html:xs:XHTML严格型文档类型
    html:4t:HTML4过渡型文档类型
    html:4s:HTML4严格型文档类型

子元素>
使用>运算符可以用来生成彼此嵌套的元素:
section>div>p
相邻元素+
使用+运算符可以用来生成彼此相邻的元素:
section+div+p
 返回上一层^
使用^运算符,可以让你的代码返回上一层。当你使用>嵌套元素时,想让后面的回到上一层,那么这个方法很适用。
section>div>p>a^p
等价于 section>div>(p>a)+p
这个缩写将两个段落元素都放置在div内,但只有第一个段落里会包含一个链接:

<section>
    <div>
        <p><a href=""></a></p>
        <p></p>
    </div>
</section>

 乘法*
如果你想一次性生成多个相同的元素,比如列表中的li,那么就可以使用乘法运算符*:
ul>li*5
除了能一次性生成多个相同的标签之外,我们还可以通过$符号做递增;通过$@-符号做递减;通过$@3*5这样的方式从第三个开始命名。

ul>li.item$@-*5

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

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

 组合
为了更有效的利用嵌套,我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起,来看一个简单的示例:
ul>(li>a)*3
在我们一个页面中,常会包括页头、主体和页脚三个部分,我们很多时候就可以通过对全们进行一个组合,快速生成有效的代码:div>header+(article>p*3)+footer>p

    <div>
        <header></header>
        <article>
            <p></p>
            <p></p>
            <p></p>
        </article>
        <footer>
            <p></p>
        </footer>
    </div>

 快速添加类名、ID、文本和属性
在Emmet中,还有一个功效,能快速帮助你添加类名、ID、文本和属性。

    使用E#ID添加ID名
    使用E.class添加类名
    使用E[attr]添加属性
    使用E{text}添加文本

 省略标签名
在Emmet中可以省略标签名,默认情况下,如.item和div.item起到的作用是一致的<div class="item"></div>。在实际中还有几种情况:

    ul和 ol中输入指的是li
    table、tbody、thead和tfoot指的是tr
    tr中指的是td
    select和optgroup指的是option

Emmet和CSS

 属性
CSS提供了属性的值,比如font-size,margin和 padding等等。
Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdb,border-top缩写是bdt。正如下面的示例font-size缩写是fz。

 属性值
现在我们已经了解了CSS的属性,它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如,fz18将输出font-size:18px。你不需要输入px,因为Emmet将会其单位是px。如果一个项目没有一个单位(如font-weight),Emmet会很聪明,他不会添加像素单位。

 单位
如果你在CSS不经常使用的像素(px)单位,那会是什么?是em、rem、%、ex和px吗?那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式:
    px→ 默认
    p→ %
    e→ em
    r→ rem
    x→ ex

 多个单位
CSS中的某些属笥,比如margin,允许多个值。在Emmet中要做到这一点,只需要每个值之间使用破折号(-)。来看看下面的例子,给body定义margin的四个值:m10-20-30-40

margin:10px 20px 30px

 颜色
在Emmet中使用#前缀,后面紧跟颜色值,但不同的字符数将会输出不同的十六进制代码。来看一些例子:
    #1→ #111111
    #E0→ #e0e0e0
    #FC0→ #FFCC00

 !important
尽管在CSS中!important并不经常使用,但在Emmet也带有一定的缩写。添加!就可以自动生成。

 多属性
现在我们具Emmet的CSS特性的一个基本了解,也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例:mt10+pt30+mb50

margin-top:10px;
padding-top:30px;
margin-bottom:50px;

 总结

Emmet是一个强大的工具,也被称为是一款高速的编码工具,它可以让你花更少的时间做同样的事情,而无需手动创建自己的代码片段。Emmet的灵感来自于CSS选择器以及可以用于所有主要的文本编辑器,以适应开发者的工作流程。

请记住,你可以在你的工作流中添加任何新工具,这个学习过程也是一个曲线的过程,但你不要花费更多的时间做那些相同的事情。你只是需要定期的访问 Emmet文档,你就会慢慢熟悉Emmet中HTML和CSS的所有特性。让你少想,少写,实现更多想要的代码。

最后附上Emmet Documentation图表图片供参考!

关键词: emmet,Zen Coding   编辑时间: 2015-03-10 16:13:18

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐