轉自:http://www.jianshu.com/p/67fa1e2114c5
背景
HTML和CSS的寫法相對固定，而且重復的工作特別多，特別是尖括號實在是很煩。使用Emmet至少能幫你節省一半的前期開發工作量，所以花點時間學習Emmet是很值得的。Emmet不是編程語言，而只是編輯器的插件，也可以自定義規則。
安裝
Emmet支持多種編輯器，參見列表。由於我使用vim，這里只介紹vim的插件。
-
安裝方法： 上面的頁面介紹的很清楚
-
配置Emmet
- 只在html和css文件中起作用
let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstal - 修改Emmet的觸發鍵
let g:user_emmet_leader_key='<C-Z>'
- 只在html和css文件中起作用
-
教程：
教程里已經介紹的很清楚，我主要羅列常用寫法。
用法
快捷鍵
注：<c-y>, 指先按ctrl+y，再按,，后面不再說明
| 快捷鍵 | 介紹 |
|---|---|
<c-y>, |
emmet觸發鍵，tips:輸完命令后最好在后面多寫一個空格，如：html:5_ |
v <c-y>, |
先進入可視模式，選擇目標文本，按快捷鍵，狀態欄彈出Tags:，輸入命令即可 |
<c-y>n |
跳轉到下一個編輯點 |
<c-y>N |
跳轉到上一個編輯點 |
<c-y>i |
移動到img標簽，按快捷鍵，自動為圖片添加大小 |
<c-y>m |
合並多行為一行 |
<c-y>k |
刪除當前tag |
<c-y>/ |
切換添加、去除注釋 |
<c-y>a |
自動將網址轉換為鏈接標簽 |
- 簡寫注意事項
| 簡寫 | 編譯 |
|---|---|
| .wrap>.content | div.wrap>div.content |
| em>.info | em>span.info |
| ul>.item*3 | ul>li.item*3 |
| table>#row$*4>[colspan=2] | table>tr#row$*4>td[colspan=2] |
基本html用法
-
!(生成基本html結構，效果同html:5)
示例：!
效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> -
html:5(效果同!，另外還有html:xt, html:4s) -
#(生成id)
示例：div#main 或者直接寫 #main
效果：<div id="main"> </div> -
.(生成class)
示例：div.list
效果：<div class="list"> </div> -
>(生成后代元素)
示例：div.list>ul>li
效果：<div class="list"> <ul> <li></li> </ul> </div> -
+(生成兄弟元素)
示例：h1+h2+p
效果：<h1></h1> <h2></h2> <p></p> -
{}(文本)
示例：a{Click me}+ul>li{item$}*3
效果：<a href="">Click me</a> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>示例2：
p>{Click }+a{here}+{ to continue}
效果：<p>Click <a href="">here</a>to continue</p> -
^(生成上級元素)
示例：div.list>ul>li^span
效果：<div class="list"> <ul> <li></li> </ul> <span></span> </div> -
*(重復生成元素)
示例：ul>li*5
效果：<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> -
()(生成分組)
示例：div.list>ul>li
效果：<div id="main"> <div id="header"> <ul> <li></li> <li></li> </ul> </div> <div id="footer"></div> </div>示例2：
(div>dl>(dt+dd)*3)+footer>p
效果：<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> -
$[N](生成編號，單個編號默認從1開始，也支持多位編號，需要幾位就寫幾個，默認從0開始,N為起始編號)
示例：div>(ul>li.item$*2)+(ul>li.item$$@5*2)
效果：<div> <ul> <li class="item1"></li> <li class="item2"></li> </ul> <ul> <li class="item05"></li> <li class="item06"></li> </ul> </div> -
$@[-][N](編號排序-為倒序，N為起始編號)
示例：ul>li.item$$@-*2
效果：<ul> <li class="item02"></li> <li class="item01"></li> </ul>示例：
ul>li.item$$@5*3
效果：<ul> <li class="item05"></li> <li class="item06"></li> </ul> -
lorem[N](生成隨機內容，N為單詞數量)
示例：lorem
效果：Elit neque iste aspernatur repellat ducimus alias incidunt nam nemo ducimus, id consequatur illo blanditiis! Necessitatibus minima repellat dignissimos eaque quo obcaecati quasi. Voluptatum nostrum harum corporis optio molestias nihil.示例：
h2*3>lorem5或者(h2>lorem5)*3
效果：<h2> Consectetur esse recusandae sapiente magnam. </h2> <h2> Lorem odio unde magni molestias! </h2> <h2> Amet perferendis praesentium facilis maxime. </h2>
實用html組合
-
生成一個基本網站框架
示例：#main_page>(div.header>div.logo+div.menu)+div.context+div.footer
效果：<div id="main_page"> <div class="header"> <div class="logo"></div> <div class="menu"></div> </div> <div class="context"></div> <div class="footer"></div> </div> -
生成內容
示例：.context>((span.title>lorem2)+(span.text>lorem10))*3
效果：<div class="context"> <span class="title">Elit quod?</span> <span class="text">Amet cumque perferendis a quasi dolor voluptatem repellat nihil lorem.</span> <span class="title">Adipisicing atque.</span> <span class="text">Consectetur deleniti quasi ea iste atque dolores rem nihil. Dolor.</span> <span class="title">Adipisicing laborum?</span> <span class="text">Sit nam sapiente eius dolorem accusamus, beatae impedit molestias expedita?</span> </div> -
生成菜單
示例：div.menu>ul#navigation>li*5>a{Item $}
效果：<div class="menu"> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div> -
可視化模式下生成菜單
示例文本：首頁 新聞 方案 關於按
v進入可視模式，選中文本，再按<c-y>,，輸入：nav>ul.nav>li.page$*>a
效果：<nav> <ul class="nav"> <li class="page1"><a href="">首頁</a></li> <li class="page2"><a href="">新聞</a></li> <li class="page3"><a href="">方案</a></li> <li class="page4"><a href="">關於</a></li> </ul> </nav>再進一步，取消上面的操作：輸入：
ul.nav>li.page$*>img[alt=$#]+a[href='#']
效果<ul class="nav"> <li class="page1"> <img src="" alt="首頁"> <a href="#">首頁</a> </li> <li class="page2"> <img src="" alt="新聞"> <a href="#">新聞</a> </li> <li class="page3"> <img src="" alt="方案"> <a href="#">方案</a> </li> <li class="page4"> <img src="" alt="關於"> <a href="#">關於 </a> </li> </ul> - 自動添加圖片尺寸
<img src="test.jpg" alt="首頁">
光標移動到img標簽內，按<c-y>i再按Enter即可
效果：<img src="test.jpg" alt="首頁" width="500" height="375">