suchen

Heim >Web-Frontend >HTML-Tutorial >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:511884Durchsuche

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

  • ! 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

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; 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;

  • ovy overflow-y<a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y</a>: hidden;: versteckt;

  • 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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie man HTML verwendet, um Positionierungscodebeispiele zu implementierenNächster Artikel：Wie man HTML verwendet, um Positionierungscodebeispiele zu implementieren

In Verbindung stehende Artikel

Mehr sehen