近來在製作專案時都使用起Emmet指令，主要是因為 Dreamweaver CC (2015) 版本有支援此快速編輯的功能，除了可以化編寫節構外，在使用上只要記得著指令確實可以加快編窵的內容，先是不用寫標籤結尾就可以省去不少時間了，對於開發html與css省力不少。
html:5 or !
1 | html:5 |
1 2 3 4 5 6 7 8 9 10 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
link:css
外連
1 | link:css |
1 | <link rel="stylesheet" href="style.css"> |
本文
1 | style[type=text/css] |
1 | <style type="text/css"></style> |
script:src
嵌入外部檔案
1 | script:src |
1 | <script src=""></script> |
路徑示意
1 | script[src="js/jss.js"] |
1 | <script src="js/jss.js"></script> |
直接嵌入
1 | script[type="text/javascript"] |
1 | <script type="text/javascript"></script> |
標籤結構(元素名稱屬性與屬性值)
1. > 後代
2. + 兄弟
3. ^ 上級
1 2 | div>ul>li^span /* 編寫一個跟 ul 平級的 span 標籤 */ |
1 2 3 4 5 6 | <div> <ul> <li></li> </ul> <span></span> </div> |
1 2 | div>ul>li^^span /* 相對與 div 生成一個平級元素，那麼就再上升一個層次，多用一個「^」符號 */ |
1 2 3 4 5 6 | <div> <ul> <li></li> </ul> </div> <span></span> |
4. () 分組
()與 ()都是依著上層的標籤，其上層標籤的位置在輸出後都會置前，但 ()與 ()的順序會影響輸出後的順序
1 | div>footer(header>ul>li*2>a)(p*3) |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <footer> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <p></p> <p></p> <p></p> </footer> </div> |
1 | div>(header>ul>li*2>a)footer(p*3) |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <footer> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <p></p> <p></p> <p></p> </footer> </div> |
1 | div>(header>ul>li*2>a)(p*3)footer |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <footer> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <p></p> <p></p> <p></p> </footer> </div> |
5. # ID類
6. {} 文本
7. [] 自定義屬性
1 | img[src="img/pic.jgp"] |
1 | <img src="img/pic.jgp" alt=""> |
1 | img[alt=""] |
1 | <img src="" alt=""> |
1 | a:link |
1 | <a href="http://"></a> |
1 | a[href=""] |
1 | <a href=""></a> |
1 | [title=""] |
1 | <div title=""></div> |
1 2 | [title=Emmet is cool] /*註：'Emmet is cool' 如果沒有加""的話，另為有空白鍵會斷成三個值*/ |
1 | <div title="Emmet" is="" cool=""></div> |
標籤層別
div*3 + tab 按鍵
1 | div*3 |
1 2 3 | <div></div> <div></div> <div></div> |
ul> li*3 代表 <ul> 包含 3 個 <li>
1 | ul>li*3 |
1 2 3 4 5 | <ul> <li></li> <li></li> <li></li> </ul> |
ul> li*3> a 代表 <ul> 包含 3 個 <li>, 而 <li> 裡面, 又包含 a
1 | ul>li*3>a |
1 2 3 4 5 | <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
img 標籤不用結尾與父層使用需使用 + 號同層
img 錯誤寫法
a>img{點此連結} <a href=""><img src="" alt="">點此連結</img></a>
無 “+” 字會被包在img內
1 | a>img{點此連結} |
1 | <a href=""><img src="" alt="">點此連結</img></a> |
img 正確寫法
a>img+{點此連結} <a href=""><img src="" alt="">點此連結</a>
有 “+” 字在img外
1 | a>img+{點此連結} |
1 | <a href=""><img src="" alt="">點此連結</a> |
本文與編號
lorem 產生一段本文
lorem3 => lorem+3 的 3 指的是三個單字。
1 | lorem3 |
1 | Lorem ipsum dolor. |
p 段落行內式使用 lorem 產生 span 標籤，區塊元素 div 產生區塊
P內如使果使用 *的話會帶出 <span>，若是 div的話會再用 div來包。
1 | (p>lorem5*3)(div>lorem5*3) |
1 2 3 4 5 6 7 8 9 10 | <p> <span>Lorem ipsum dolor sit amet.</span> <span>Sint, repellat similique quae laudantium.</span> <span>Modi asperiores dignissimos autem. Fuga.</span> </p> <div> <div>Lorem ipsum dolor sit amet.</div> <div>Minus temporibus nulla eveniet commodi!</div> <div>Cum facilis nisi repudiandae sunt.</div> </div> |
$ 數值變數
$ 是個數值代號，如果使用 tab 鍵解開會是個數值標籤。
編號 Item numbering (幾位數就用幾個 &)
1 | $ |
1 | <1></1> |
樣式名稱 – 加上 $ 變數編號與 * 運行次數
1 | ul>li.class-$*5 |
1 2 3 4 5 6 7 | <ul> <li class="class-1"></li> <li class="class-2"></li> <li class="class-3"></li> <li class="class-4"></li> <li class="class-5"></li> </ul> |
1 | ul>li.class-$$*5 |
1 2 3 4 5 6 7 | <ul> <li class="class-01"></li> <li class="class-02"></li> <li class="class-03"></li> <li class="class-04"></li> <li class="class-05"></li> </ul> |
1 | ul>li.class-$$$*5 |
1 2 3 4 5 6 7 | <ul> <li class="class-001"></li> <li class="class-002"></li> <li class="class-003"></li> <li class="class-004"></li> <li class="class-005"></li> </ul> |
由編號開始，共建立幾筆元素正向數字字串
1 2 | ul>li.class-$$$@20*5 /*"$"之後接"@"，編號由20號開始*/ |
1 2 3 4 5 6 7 | <ul> <li class="class-020"></li> <li class="class-021"></li> <li class="class-022"></li> <li class="class-023"></li> <li class="class-024"></li> </ul> |
由編號開始，共建立幾筆元素負向數字字串
1 2 | ul>li.class-$$@-*5 /*"$"之後接"-"，要反過來由大到小的話，那麼就是在"@"後面補上一個"-"負號(就算沒要設定起始值也是要多補 @)*/ |
1 2 3 4 5 6 7 | <ul> <li class="class-05"></li> <li class="class-04"></li> <li class="class-03"></li> <li class="class-02"></li> <li class="class-01"></li> </ul> |
1 | ul>li.class-$$@-20*5 |
1 2 3 4 5 6 7 | <ul> <li class="class-24"></li> <li class="class-23"></li> <li class="class-22"></li> <li class="class-21"></li> <li class="class-20"></li> </ul> |
混用
1 | a:link |
1 | <a href="http://"></a> |
1 | a[href=name-$.html]*3 |
1 2 3 | <a href="name-1.html"></a> <a href="name-2.html"></a> <a href="name-3.html"></a> |
1 | img[src=name-$.png]*3 |
1 2 3 | <img src="name-1.png" alt=""> <img src="name-2.png" alt=""> <img src="name-3.png" alt=""> |
1 | h$[title=item$]{Header$}*3 |
1 2 3 | <h1 title="item1">Header1</h1> <h2 title="item2">Header2</h2> <h3 title="item3">Header3</h3> |
1 | .container>(.block>h3{Tiltle-$}+p>lorem10+a>img[src=name-$@20.png])*3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="container"> <div class="block"> <h3>Tiltle-1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, enim!<a href=""><img src="name-20.png" alt=""></a></p> </div> <div class="block"> <h3>Tiltle-2</h3> <p>Accusantium, eum, excepturi libero nihil repellat sapiente in nulla officiis.<a href=""><img src="name-21.png" alt=""></a></p> </div> <div class="block"> <h3>Tiltle-3</h3> <p>Earum, in, vitae obcaecati consectetur error maxime consequatur. Autem, nobis!<a href=""><img src="name-22.png" alt=""></a></p> </div> </div> |