• Emmet
    • Emmet安装
    • Emmet语法
      • 生成 HTML 文档初始结构
      • 生成 HTML

    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图片