Emmet

Emmet github地址

Emmet 是 Zen Coding 的升级后改名而成，由Zen Coding 的原作者进行开发维护。它是一款编辑器插件，必须要基于某个编辑器使用。

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
  • Adobe Dreamweaver

Emmet安装

使用 Package Control 安装 Emmet 插件：

  • 在 Package Control 中选择 Install package 或者按 Ctrl+Shift+P，
  • 打开命令板
    输入 pci 然后选择 Install Package
    搜索输入 emmet 找到 Emmet Css Snippets，
  • 点击就可以自动完成安装。

Emmet语法

Emmet 的工作流程：打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成！

生成 HTML 文档初始结构

输入 ! 或 html:5

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     < title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

输入 html:xt

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     < title>Document</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>

生成 HTML

输入#page>div.logo+ul#navigation>li*5>a{Item $}

  1. <div id="page">
  2.     <div class="logo"></div>
  3.     <ul id="navigation">
  4.         <li><a href="">Item 1</a></li>
  5.         <li><a href="">Item 2</a></li>
  6.         <li><a href="">Item 3</a></li>
  7.         <li><a href="">Item 4</a></li>
  8.         <li><a href="">Item 5</a></li>
  9.     </ul>
  10. </div>

使用手册

查看Emmet-API

API图片