emmet的用法 - JavaShuo

emmet 是一個提升前端開發效率的一個工具。
emmet容許在html、xml、和css等文檔中輸入縮寫，而後按tab鍵自動展開爲完整的代碼片斷。css

1、Sublime Text 3 安裝插件Emmet
點擊菜單欄的首選項
->Package Control
-> 在彈出命令行中輸入ip，在列表中點擊「install Package」
-> 彈出命令行輸入框，輸入「emmet」進行安裝html

本人安裝完後提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解決方法：
按提示打開https://github.com/emmetio/pyv8-binaries，選擇本身版本下載pyv8，本人下載pyv8-win64-p3.zip。
點擊Sublime Text 3菜單欄的首選項->瀏覽插件目錄，打開Packages目錄，再切換到上一層Installed Packages目錄，
新建目錄PyV8，把pyv8-win64-p3.zip解壓後的文件放進去，重啓ST編輯器。前端

2、emmet的用法
emmet插件的官方文檔： https://docs.emmet.io/abbreviations/syntax/git

新建一個html文件
一、元素
可使用元素的名稱（如DIV或P）生成HTML標記。
如輸入div按tabl鍵後，自動生成<div></div>。
若是輸入！，則自動生成一個HTML5基本結構github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、嵌套操做符
（1）子元素：>編輯器

<!-- div>ul>li -->

<div>
    <ul>
        <li></li>
    </ul>
</div>

備註：div>ul>li的中間和後面不能有空格，不然按tab鍵後emmet 會中止解析，後面的例子也同樣不能有空格。工具

（2）兄弟元素：+spa

<!-- div+p+bq --> --> <div></div>
<p></p>
<blockquote></blockquote>

（3）向上一層：^，和>相反，能夠屢次使用插件

<!-- div+div>p>span+em -->

<div></div>
<div>
    <p><span></span><em></em></p>
</div>


<!-- div+div>p>span+em^^^bq -->

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

（4）乘法：*，重複指定次數生成元素命令行

<!-- ul>li*5 -->

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

（5）分組：()，括號裏面的內容爲一個代碼塊，括號後面的元素與括號的第一個元素在同一級別

<!-- div>(header>ul>li*2>a)+footer>p -->

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

三、屬性操做符

（1）id和class

<!-- div#header+div.page+div#footer.class1.class2.class3 -->

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

（2）自定義屬性：[attr]

<!-- td[title="Hello world!" colspan=3] -->

<td title="Hello world!" colspan="3"></td>

（3）項目編號：$

<!-- ul>li.item$*5 -->

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

使用任意個$在數字前加任意個0

<!-- ul>li.item$$*5 -->

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
</ul>

倒序，在$後面加@-

<!-- ul>li.item$@-*5 -->

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

指定開始的序號，在$後面加@N，N爲開始的序號

<!-- ul>li.item$@3*5 -->

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

四、文本：{}，爲元素添加文本

<!-- a{Click me} -->

<a href="">Click me</a>

由於文本也是節點，因此 a[href=1.htm]{click me} 與 a[href=1.htm]>{click me} 等價。

可是有多個元素時生成的結果會不一樣，用子元素>後面有元素時，也會放在a元素裏面，例如

<!-- a{click}+b{here} -->

<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->

<a href="">click<b>here</b></a>