Emmet 实例教程

标签（空格分隔）： html html5 css

Emmet 简介

简而言之,Emmet 的前身是大名鼎鼎的 Zen coding；基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。

Emmet 把片段这个概念提高到了一个新的层次：你可以设置 CSS 形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet 是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，也可以用于编程语言。

Emmet 功能

• snippet(代码片段)

• abbreviation expand(简写展开)

Emmet 特性

• 简写支持嵌套；

• 简写支持分组；

• 简写支持乘法；

• 简写支持自增和自减,起序,编号；

Emmet 语法

文档初始化:

• html:5 或! ：用于 HTML5 文档类型 —看代码

• html:xt ：用于 XHTML 过渡文档类型 — 不演示

• html:4s ：用于 HTML4 严格文档类型 — 不演示

  Document

id # |类.|属性[]|内容{},若是不带父元素,则默认为隐性生成(就近原则)

  
  

  
<p id="test" class="test">

  
<a href="http://www.jikexueyuan.com"&gt;文本内容

后代> | 兄弟+ | 上级^

ul>li 后代 -->

  

    

  



  

  




  

    

      

      
      
    
  

分组()/乘法*/自增$/自减$@-/起序$@数字

ul>(li>a)*2 -->

  

    

    

  




  

    

    

  




  

    

    

    

  




  

    

    

    

    

    

  

参考资料

官方语法参考：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!