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.
! oder html: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:xt HTML4-Übergangstyp generieren
html:4s Generieren Sie HTML4 strikt
Tag # ID-Namen, wie zum Beispiel: p#header
<p id="header"></p>
, z. B.: p.title
<p class="title"></p>
Zum Beispiel: nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
Zum Beispiel: p+p+p
<p></p> <p></p> <p></p>
Zum Beispiel: p^p
<p></p> <p></p>
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
, z. B.: p[value=1]
<p value="1"></p>
wie zum Beispiel: a{Click me}
<a href="">Click me</a>
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>
Zum Beispiel: (ul>ol)*3
<ul> <ol></ol> </ul> <ul> <ol></ol> </ul> <ul> <ol></ol> </ul>
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>
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; w10p width: 10%; w10e width: 10em; w10x width: 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; poa position: 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; fr float: <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; db display: block; dib display: 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; cr color: rgb(0, 0, 0); cra color: 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!
Erhabene chinesische Eingabemethode
So deaktivieren Sie die sublime automatische Vervollständigung
So installieren Sie Bibliotheken von Drittanbietern in Sublime
Sublime führt JS-Code aus
Lösung für das Ende des Fehlercodes 499
So erhalten Sie die Adresse der Adressleiste
Die Rolle des Applet-Tags in HTML
Wie man mit langsamer Computerverzögerung und langsamer Reaktion umgeht
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
