Emmet初探2

時間 2019-11-26

標籤 emmet 初探简体版

原文原文鏈接

關於Emmetphp

Emmet插件的前身是Zen coding，能夠大幅度提升前端開發效率的一個工具，也有人說相似於jade（高性能的模板引擎,它深受 Haml 影響,它是用 JavaScript 實現的,而且能夠供 Node 使用）。再官方一些的官方語言的嘰嘰喳喳我就不詳寫了，直接百度能夠找到。css

Emmet支持的編輯器：html

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
<textarea>
CodeMirror2/3
Brackets

第三方插件的支持前端

下面這些編輯器的插件都是由第三方開發者所提供的，因此可能並不支持全部Emmet的功能和特性。git

Emmet安裝方法(Sublime text 3安裝emmet插件的方法：http://blog.csdn.net/mengke1124/article/details/41696779)github

由於我用的是Sublime text 3，其餘編輯器安裝的方法可能要根據本身的須要在網上搜颳了web

Emmet插件實用經常使用方法vim

（http://www.w3cplus.com/tools/emmet-cheat-sheet.html）api

這篇文檔寫的很清晰，也有安裝插件的方法。可是介紹的方法太多，感受有點冗長，我彙總了一些我我的以爲比較實用經常使用的方法。eclipse

略寫版：

div>(header>ul>li*2>a)+footer>p(+號鏈接下一個兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括號內爲一個組)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括號內爲顯示文本)
ul>li.item$$$*5($爲自增,三個$爲三位數字)
ul>li.item$@3*5(@從3開始自增+1)
ul>li.item$@-*5(@-,自減)
ul>li.item$@-3*5(@-3,自減最小數字爲3)
form#search.wide(#爲id,.爲類)
p[title='hello word'](自定義屬性)

(隱式標籤)

.class
em>.class
ul>.class
table>.row>.col
!(頁面html開始代碼縮寫)
(縮寫)
a
a:link
hr
link
link.css
meta:utf
script:src
img

詳寫版：

div+div>p>span+em^bq(^爲上級元素)

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

div+div>p>span+em^^bq

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

ul>li*5(>爲後代縮寫,*表示有幾個)

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

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>

ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

<ul>
    <li1 title="item1">hhh 1</li1>
    <li2 title="item2">hhh 2</li2>
    <li3 title="item3">hhh 3</li3>
    <li4 title="item4">hhh 4</li4>
    <li5 title="item5">hhh 5</li5>
</ul>

h.item${hhh $}*5({}括號內爲顯示文本)

<h class="item1">hhh 1</h>
<h class="item2">hhh 2</h>
<h class="item3">hhh 3</h>
<h class="item4">hhh 4</h>
<h class="item5">hhh 5</h>

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>

ul>li.item$@3*5(@從3開始自增+1)

<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$@-*5(@-,自減)

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

ul>li.item$@-3*5(@-3,自減最小數字爲3)

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

form#search.wide(#爲id,.爲類)

<form action="" id="search" class="wide"></form>

p[title='hello word'](自定義屬性)

<p title="hello word"></p>

(隱式標籤)
.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>
    <li class="class"></li>
</ul>

table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

!(頁面html開始代碼縮寫)

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

(縮寫)
a

<a href=""></a>

a:link

<a href="http://"></a>

<hr>

link

<link rel="stylesheet" href="">

link.css

<link rel="stylesheet" href="" class="css">

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

script:src

<script src=""></script>

img

<img src="" alt="">

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

1. Emmet初探
2. bootstrap初探2
3. 初探JVM（2）
4. Docker初探2
5. Emmet 語法探析
6. Angular初探（1-2）
7. TensorRT 2 初探祕（一）
8. 2七、初步探索echarts源碼
9. 【WP7進階】——XNA遊戲初探2
10. Spark菜鳥之路（2）：IntelLij初探
更多相關文章...
• 探索Redis事務回滾 - Redis教程
• Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
• 適用於PHP初學者的學習線路和建議
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。