Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des Sublime Text-Plug-Ins Emmet
Detaillierte Erläuterung der Verwendung des Sublime Text-Plug-Ins Emmet
- 高洛峰Original
- 2017-03-26 10:14:511787Durchsuche
Zusammenfassung:
Installation Bitte lesen Sie den vorherigen Artikel Sublime Text – Die Installation mit den integrierten Tastenkombinationen von Sublime geht so schnell.
Die folgenden werden häufig verwendet. Vollständige Informationen finden Sie in der offiziellen Dokumentation von emmet.
Tags generieren
1. Erstellen Sie schnell eine Dokumentstruktur
!oderhtml:5, erstellen Sie schnell eine HTML5-Struktur (Sie müssen die Tabulatortaste erneut drücken)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
html:xtHTML4-Übergangstyp generierenhtml:4sGenerieren Sie HTML4 strikt
2. Generieren Sie ein Element mit der ID
Tag # ID-Namen, wie zum Beispiel: p#header
<p id="header"></p>
3 .Generieren Sie das Element--Tag mit
Klasse, z. B.: p.title
<p class="title"></p>
4. Erzeugen Sie Nachkommenelemente: >
Zum Beispiel: nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
5. Generieren Sie gleichgeordnete Elemente: +
Zum Beispiel: p+p+p
<p></p> <p></p> <p></p>
6 : ^
Zum Beispiel: p^p
<p></p> <p></p>
7. Wiederholt mehrere Elemente generieren: *
Zum Beispiel: ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
8 . Generieren aus Definieren des -Attributs : [attr]
, z. B.: p[value=1]
<p value="1"></p>
9. Generieren Sie Inhalte mit Text: {}
wie zum Beispiel: a{Click me}
<a href="">Click me</a>
10. Zahl hinzufügen: $
Ab 1: $ hinzufügen
Zum Beispiel: p.item${$$}*3
<p class="item1">01</p> <p class="item2">02</p> <p class="item3">03</p>
Umgekehrte Reihenfolge: $ gefolgt von @-
wie zum Beispiel: p.item$@-{$$@-}*3
<p class="item3">03</p> <p class="item2">02</p> <p class="item1">01</p>
Geben Sie die Seriennummer an: Sie können @N
verwenden, beispielsweise: p.item$@4{$$@4}*3
<p class="item4">04</p> <p class="item5">05</p> <p class="item6">06</p>
11.Gruppe: ( )
Zum Beispiel: (ul>ol)*3
<ul> <ol></ol> </ul> <ul> <ol></ol> </ul> <ul> <ol></ol> </ul>
Ein umfassender Fall
table#tab[value=1].a>tr*3>(td{$$}>span)*3
<table id="tab" value="1" class="a"> <tr> <td>01<span></span></td> <td>02<span></span></td> <td>03<span></span></td> </tr> <tr> <td>01<span></span></td> <td>02<span></span></td> <td>03<span></span></td> </tr> <tr> <td>01<span></span></td> <td>02<span></span></td> <td>03<span></span></td> </tr> </table>
ist generiertes CSS
Es gibt viele CSS-Stile und natürlich gibt es viele Abkürzungen. Listen Sie einfach die häufig verwendeten auf und ziehen Sie Schlussfolgerungen.
Die CSS-Abkürzung wird mithilfe der Fuzzy-Suche abgeglichen, z. B. ov:h == ov-h == ovh == oh.
w10
<a href="http://www.php.cn/wiki/835.html" target="_blank">Breite<code><a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px;: 10px; w10pwidth: 10%;w10ewidth: 10em;w10xwidth: 10xe;h10
<a href="http://www.php.cn/wiki/836%20.html" target="_blank">Höhe<code><a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;: 10px;por
<a href="http://www.php.cn%20/wiki/902.html" target="_blank">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;: relative; poaposition: absolute;fll
<a href="http%20://www.php.cn/wiki/919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left;: left; frfloat: <a href="http://www.php%20.cn/wiki/905.html" target="_blank">right<code>float: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;;dt
<a href="http://www%20.php.cn/wiki/927.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table;: table; dbdisplay: block;dibdisplay: inline-block;cb
<a href="http://www.php.cn/wiki/917.html" target="_blank">clear<code><a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>: both;: Both;mt
<a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top<code><a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ;: ; mb<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom<code><a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>: ;: ;pt
<a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ;pb<a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;tac
<a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;lh
<a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;tsn
<a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;tja
<a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;c
color: #000;crcolor: rgb(0, 0, 0);cracolor: rgba(0, 0, 0, .5);op
opacity: ;cnt
content: '';ol
<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;bd+
border: 1px solid #000;bdb+border-bottom: 1px solid #000;bd2px#333s
border: 2px #333 solid;
快捷键
如果没作用请检查快捷键是否冲突
快速生成包裹标签：Ctrl+Shift+G
只有文本没有结构时，如下
首页 简介 动态
选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成
<nav> <ul> <li class="item1"><a href="">首页</a></li> <li class="item2"><a href="">简介</a></li> <li class="item3"><a href="">动态</a></li> </ul> </nav>
如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。
1首页 2简介 3动态
自动添加/更新图片尺寸：ctrl+U
光标移到标签上的任意位置，按下快捷键ctrl+U即可。
<img src="img/x1.png" /> <img src="img/x1.png" width="100" height="200" />
删除标签：shift+ctrl+;
定位到上个编辑点：ctrl+alt+left
定位到下个编辑点：ctrl+alt+right
选中下一项：shift+ctrl+.
加/减1：ctrl+up/ctrl+down
加/减10：shift+alt+up/shift+alt+down
展开缩写：ctrl+e（和tab键作用相同）
重命名标签(rename_tag)：ctrl+shift+'
更换标签(update_as_you_type)：ctrl+Shift+U
匹配标签对：ctrl+alt+j
生成测试文本
输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Lorem ipsum dolor sit amet.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Sublime Text-Plug-Ins Emmet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!