超高速前端開發工具——Emmet

時間  2019-11-25
標籤 超高速 前端 開發 工具 emmet 简体版
原文   原文鏈接

【因爲 CSDN 不支持富文本編輯器寫的文章遷移到 Markdown 編輯器中修改，已重發了一個從新排版的版本，html

新版連接：http://blog.csdn.net/ys743276112/article/details/52063396 】前端

本篇文章基於sublime text 2軟件，Emmet是其一個插件html5

一、安裝

在Sublime Text 中按「Ctrl+Shift+p」快捷鍵或在菜單-工具中打開「命令面板」，輸入：Install Package (安裝擴展)後回車，彈出新的窗口，再輸入Emmet查找「Emmet」肯定安裝，等到自動打開一個文檔，說明安裝成功。json

二、語法

生成 HTML 文檔初始結構
HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只須要輸入一個 「!」 就能夠生成一個 HTML5 的標準文檔初始結構，你沒有看錯，輸入一個感嘆號（固然是英文符號），而後摁下 TAB 鍵，就會發現生成了下面的結構：
<!doctype html>
<html lang=」en」>
<head>
    <meta charset=」UTF-8″>
    <title>Document</title>
</head>
<body>

</body>
</html>
這就是一個 HTML5 的標準結構，也是默認的 HTML 結構。若是你想生成 HTML4 的過渡型結構，那麼輸入指令 html:xt 便可生成以下結構：
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「>
<html xmlns=」http://www.w3.org/1999/xhtml」 xml:lang=」en」>
<head>
    <meta http-equiv=」Content-Type」 content=」text/html;charset=UTF-8″>
    <title>Document</title>
</head>
<body>

</body>
</html>
Emmet 會自動把 doctype 給你補全了，怎麼樣，這樣的功能會不會讓你動心？簡單總結一下經常使用的 HTML 結構指令：

html:5 或者 ! 生成 HTML5 結構
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型

生成帶有 id 、class 的 HTML 標籤
Emmet 的語法有點相似 CSS 的語法，生成 id 爲 aaa 的 div 標籤，咱們只須要編寫下面指令：
#aaa
Emmet 默認的標籤爲 div ，若是咱們不給出標籤名稱的話，默認就生成 div 標籤。若是編寫一個 class 爲 bbb 的 span 標籤，咱們須要編寫下面指令：
span.bbb
而後就生成了對應的結構。同理，若是想要編寫一個 id 爲 ccc 的 class 爲 ddd 的 ul 標籤，咱們能夠這樣寫：
ul#ccc.ddd
很簡單吧？比你用手寫 id 、class 方便多了吧
生成後代：>
大於號表示後面要生成的內容是當前標籤的後代。例如我要生成一個無序列表，並且被 class 爲 aaa 的 div 包裹，那麼可使用下面指令：
div.aaa>ul>li
能夠生成以下的結構：
<div>
    <ul>
        <li></li>
    </ul>
</div>
生成兄弟：+
上面是生成下級元素，若是想要生成平級的元素，就須要使用 + 號。例以下面指令：
div+p+bq
就能夠生成以下的 HTML 結構：
<div></div>
<p></p>
<blockquote></blockquote>
生成上級元素：^
上級 （Climb-up）元素是什麼意思呢？前面我們說過了生成下級元素的符號「>」，當使用 div>ul>li 的指令以後，再繼續寫下去，那麼後續內容都是在 li 下級的。若是我想編寫一個跟 ul 平級的 span 標籤，那麼我須要先用 「^」 提高一下層次。例如：
div>ul>li^span
就會生成以下結構：
<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>
若是我想相對與 div 生成一個平級元素，那麼就再上升一個層次，多用一個「^」符號：
div>ul>li^^span
重複生成多份：*
特別是一個無序列表，ul 下面的 li 確定不僅是一份，一般要生成不少個 li 標籤。那麼咱們能夠直接在 li 後面 * 上一些數字：
ul>li*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>
此外，分組還能夠很方便的結合上面說的 「*」 符號生成重複結構：
(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>
生成自定義屬性：[attr]
a 標籤中每每須要附帶 href 屬性和 title 屬性，若是咱們想生成一個 href 爲 「http://www.sinlesstime.com」 ，title 爲「時光無罪」的 a 標籤，能夠這樣寫：
a[href="http://www.sinlesstime.com" title="時光無罪"]
其餘標籤和屬性都相似。
對生成內容編號：$
例如無序列表，我想爲五個個 li 增長一個 class 屬性值 item1 ，而後依次遞增從 1-5，那麼就須要使用 $ 符號：
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>
$ 就表示一位數字，只出現一個的話，就從1開始。若是出現多個，就從0開始。若是我想生成三位數的序號，那麼要寫三個 $：
ul>li.item$$$*5
輸出：
<ul>
    <li class=」item001″></li>
    <li class=」item002″></li>
    <li class=」item003″></li>
    <li class=」item004″></li>
    <li class=」item005″></li>
</ul>
只能這樣單調的生成序號？對於強大的 Emmet 來講，確定不會會了，咱們也能夠在 $ 後面增長 @- 來實現倒序排列：
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 指定開始的序號：
ul>li.item$@3*5
這樣就會從 3 開始排序，生成以下代碼：
<ul>
    <li class=」item3″></li>
    <li class=」item4″></li>
    <li class=」item5″></li>
    <li class=」item6″></li>
    <li class=」item7″></li>
</ul>
配合上面倒序輸出，能夠這樣寫：
ul>li.item$@-3*5
生成的就是以 3 爲底倒序：
<ul>
    <li class=」item7″></li>
    <li class=」item6″></li>
    <li class=」item5″></li>
    <li class=」item4″></li>
    <li class=」item3″></li>
</ul>
生成文本內容：{}
上面講解了如何生成 HTML 標籤，那裏面的內容呢？固然也能夠生成了：
a[href="http://www.sinlesstime.com"]{點擊這裏到 時光無罪}
這樣就生成了一個到我博客的超連接了。在生成內容的時候，特別要注意先後的符號關係，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，可是加上其餘的內容就不必定了，例如：
<!– a{click}+b{here} –>
<a href=」」>click</a><b>here</b>

<!– a>{click}+b{here} –>
<a href=」」>click<b>here</b></a>
這樣就生成了徹底不一樣的結構，注意這些小細節哦。
 不要有空格
在寫指令的時候，你可能爲了代碼的可讀性，使用一些空格什麼的排版一下。這就會致使代碼沒法使用。例以下面這句：
(header > ul.nav > li*5) + footer
而去掉空格以後，就能夠正常執行生成結構了。less

恭喜你看完了教程，那麼你就值得知道下面的小技巧：編輯器

在sublime text 2的安裝目錄下的Data\Packages\Emmet\emmet中的snippets.json文件中，修改第三行的」lang」: 「en」,爲」lang」: 「zh-CN」, 這樣每次自動生成的html5的時候語言就成zh-CN，不用每次都修改html代碼了！工具

轉載請註明：時光本無罪 » 超高速前端開發工具——Emmet開發工具

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程