php emment,Emmet插件比较实用常用的写法

  • Post author:
  • Post category:php


看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆:haml和Emmet 】,其实一开始的想法是写给自己看的。

有人去阅读我的博客和评论,虽然不算多,但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)

嗯,跑偏了。总之,以后写东西不管是给自己看也好,给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)

关于Emmet

Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用)。再官方一些的官方语言的叽叽喳喳我就不详写了,直接百度可以找到。

Emmet支持的编辑器:

Sublime Text 2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Chocolat (通过“Install Mixin”对话框添加)

Komodo Edit/IDE (通过Tools → Add-ons菜单添加)

Notepad++

PSPad

CodeMirror2/3

Brackets

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的,所以可能并不支持所有Emmet的功能和特性。

SynWrite

WebStorm

PhpStorm

Vim

HTML-Kit

HippoEDIT

CodeLobster PHP Edition

TinyMCE

Emmet安装方法(Sublime text 3安装emmet插件的方法:http://blog.csdn.net/mengke1124/article/details/41696779)

因为我用的是Sublime text 3,其他编辑器安装的方法可能要根据自己的需要在网上搜刮了

Emmet插件实用常用方法

(http://www.w3cplus.com/tools/emmet-cheat-sheet.html)

这篇文档写的很清晰,也有安装插件的方法。但是介绍的方法太多,感觉有点冗长,我汇总了一些我个人觉得比较实用常用的方法。

略写版:

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)

(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)

ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

h.item${hhh $}*5({}括号内为显示文本)

ul>li.item$$$*5($为自增,三个$为三位数字)

ul>li.item$@3*5(@从3开始自增+1)

ul>li.item$@-*5(@-,自减)

ul>li.item$@-3*5(@-3,自减最小数字为3)

form#search.wide(#为id,.为类)

p[title=’hello word’](自定义属性)

(隐式标签)

.class

em>.class

ul>.class

table>.row>.col

!(页面html开始代码缩写)

(缩写)

a

a:link

hr

link

link.css

meta:utf

script:src

img

详写版:

div+div>p>span+em^bq(^为上级元素)

div>

span>

em>p>

blockquote>

div>

div+div>p>span+em^^bq

div>

span>

em>p>

div>

blockquote>

ul>li*5(>为后代缩写,*表示有几个)

  • li>
  • li>
  • li>
  • li>
  • li>

    ul>

    div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)

    • a>li>
    • a>li>

      ul>

      header>

      p>

      footer>

      div>

      (div>dl>(dt+dd)*3)+footer>p(括号内为一个组)

      dt>

      dd>

      dt>

      dd>

      dt>

      dd>

      dl>

      div>

      p>

      footer>

      ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

      hhh 1li1>

      hhh 2li2>

      hhh 3li3>

      hhh 4li4>

      hhh 5li5>

      ul>

      h.item${hhh $}*5({}括号内为显示文本)

      hhh 1h>

      hhh 2h>

      hhh 3h>

      hhh 4h>

      hhh 5h>

      ul>li.item$$$*5($为自增,三个$为三位数字)

      li>

      li>

      li>

      li>

      li>

      ul>

      ul>li.item$@3*5(@从3开始自增+1)

      li>

      li>

      li>

      li>

      li>

      ul>

      ul>li.item$@-*5(@-,自减)

      li>

      li>

      li>

      li>

      li>

      ul>

      ul>li.item$@-3*5(@-3,自减最小数字为3)

      li>

      li>

      li>

      li>

      li>

      ul>

      form#search.wide(#为id,.为类)

      form>

      p[title=’hello word’](自定义属性)

      p>

      (隐式标签)

      .class

      div>

      em>.class


      span>em>

      ul>.class

      li>

      ul>

      table>.row>.col

      td>

      tr>

      table>

      !(页面html开始代码缩写)

      doctype html>

      Documenttitle>

      head>

      body>

      html>

      (缩写)

      a

      a>

      a:link

      a>

      hr


      link

      link.css

      meta:utf

      script:src

      script>

      img

      官方api:http://docs.emmet.io/cheat-sheet/

      api表:http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

      (●-●) 真心讨厌弄文本格式,感觉好浪费时间……