Detaillierte Erläuterung der Verwendung des Sublime Text-Plug-Ins Emmet-HTML-Tutorial-php.cn

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

3 .Generieren Sie das Element--Tag mit

Klasse

, z. B.: p.title

<p class="title"></p>

Nach dem Login kopieren

4. Erzeugen Sie Nachkommenelemente: >

Zum Beispiel: nav>ul>li

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

Nach dem Login kopieren

5. Generieren Sie gleichgeordnete Elemente: +

Zum Beispiel: p+p+p

<p></p>
<p></p>
<p></p>

Nach dem Login kopieren

6 : ^

Zum Beispiel: p^p

<p></p>
<p></p>

Nach dem Login kopieren

7. Wiederholt mehrere Elemente generieren: *
Zum Beispiel: `ul>li*5`

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

Nach dem Login kopieren

8 . Generieren aus Definieren des -Attributs : [attr]

, z. B.: p[value=1]

<p value="1"></p>

Nach dem Login kopieren

9. Generieren Sie Inhalte mit Text: {}

wie zum Beispiel: a{Click me}

<a href="">Click me</a>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

11.Gruppe: ( )

Zum Beispiel: (ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

只有文本没有结构时，如下

首页
简介
动态

Nach dem Login kopieren

选中文本按快捷键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>

Nach dem Login kopieren

如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。

1首页
2简介
3动态

Nach dem Login kopieren

自动添加/更新图片尺寸：ctrl+U

光标移到标签上的任意位置，按下快捷键ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />

Nach dem Login kopieren

删除标签：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!

Nach dem Login kopieren

Lorem ipsum dolor sit amet.

Nach dem Login kopieren

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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7549

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Was soll ich zum Öffnen von HTML verwenden? Apr 21, 2024 am 11:33 AM

Zum Öffnen von HTML-Dateien müssen Sie einen Browser wie Google Chrome oder Mozilla Firefox verwenden. Um eine HTML-Datei mit einem Browser zu öffnen, gehen Sie folgendermaßen vor: 1. Öffnen Sie Ihren Browser. 2. Ziehen Sie die HTML-Datei per Drag-and-Drop in das Browserfenster oder klicken Sie auf das Menü „Datei“ und wählen Sie „Öffnen“.

Welche Software eignet sich für die Python-Programmierung? Apr 20, 2024 pm 08:11 PM

IDLE und Jupyter Notebook werden für Anfänger empfohlen, und PyCharm, Visual Studio Code und Sublime Text werden für mittlere/fortgeschrittene Schüler empfohlen. Die Cloud-IDEs Google Colab und Binder bieten interaktive Python-Umgebungen. Weitere Empfehlungen sind Anaconda Navigator, Spyder und Wing IDE. Zu den Auswahlkriterien gehören Qualifikationsniveau, Projektgröße und persönliche Vorlieben.

So öffnen Sie eine lokale Datei in HTML Apr 22, 2024 am 09:39 AM

Mit HTML können lokale Dateien wie folgt geöffnet werden: Erstellen Sie eine .html-Datei und importieren Sie die jQuery-Bibliothek. Erstellen Sie ein Eingabefeld, das es dem Benutzer ermöglicht, eine Datei auszuwählen. Hören Sie sich das Dateiauswahlereignis an und verwenden Sie ein FileReader()-Objekt, um den Dateiinhalt zu lesen. Zeigen Sie den Inhalt der gelesenen Datei auf der Webseite an.

So erstellen Sie eine Py-Datei in Python May 05, 2024 pm 07:57 PM

Schritte zum Erstellen einer .py-Datei in Python: Öffnen Sie einen Texteditor (z. B. Notepad, TextMate oder Sublime Text). Erstellen Sie eine neue Datei und geben Sie den Python-Code ein. Achten Sie dabei auf Einrückung und Syntax. Verwenden Sie beim Speichern der Datei die Erweiterung .py (z. B. my_script.py).

So verwenden Sie den kopierten Code in Python Apr 20, 2024 pm 06:26 PM

Hier sind die Schritte zur Verwendung von kopiertem Code in Python: Kopieren Sie den Code und fügen Sie ihn in einen Texteditor ein. Erstellen Sie eine Python-Datei. Führen Sie den Code über die Befehlszeile aus. Verstehen Sie, wozu der Code dient und wie er funktioniert. Ändern Sie den Code nach Bedarf und führen Sie ihn erneut aus.

Womit kann ich HTML öffnen? Apr 21, 2024 am 11:36 AM

HTML-Dateien können mit einem Browser (z. B. Chrome, Firefox, Edge, Safari, Opera) geöffnet werden: Suchen Sie die HTML-Datei (.html- oder .htm-Erweiterung); wählen Sie „Öffnen“; ; Wählen Sie die Datei aus, die Sie im Browser verwenden möchten.

Erstellen und öffnen Sie leere HTML-Dokumente Apr 09, 2024 pm 12:06 PM

Erstellen Sie ein HTML-Dokument: Geben Sie die HTML-Struktur mit einem Texteditor ein und speichern Sie sie als .html-Datei. Öffnen Sie ein HTML-Dokument: Doppelklicken Sie auf die Datei oder verwenden Sie die Option „Datei“ > „Öffnen“ in Ihrem Browser. Praxisfall: Erstellen Sie eine neue HTML-Datei, fügen Sie Titel, Stylesheet und Inhalt hinzu und speichern Sie sie als .html-Datei.

Welche HTML-Editor-Software ist einfach zu verwenden? Apr 17, 2024 am 04:54 AM

Zusammenfassend lässt sich sagen, dass die folgenden HTML-Editoren hoch gelobt werden: Visual Studio Code: Plattformübergreifend, funktionsreich, kostenlos und Open Source. Sublime Text: Leistungsstarke, hochgradig anpassbare, kostenpflichtige Software. Atom: plattformübergreifend, skalierbar, Open Source und kostenlos. Klammern: speziell für die Front-End-Entwicklung, intuitive Benutzeroberfläche, Open Source und kostenlos. Notepad++: leicht, schnell, leistungsstark, Open Source und kostenlos. Berücksichtigen Sie bei der Auswahl eines HTML-Editors Faktoren wie Plattformkompatibilität, Funktionen, Erweiterbarkeit, Preis und Benutzerfreundlichkeit.

See all articles

Detaillierte Erläuterung der Verwendung des Sublime Text-Plug-Ins Emmet

Zusammenfassung:

Tags generieren

1. Erstellen Sie schnell eine Dokumentstruktur

2. Generieren Sie ein Element mit der ID

3 .Generieren Sie das Element--Tag mit

4. Erzeugen Sie Nachkommenelemente: >

5. Generieren Sie gleichgeordnete Elemente: +

6 : ^

7. Wiederholt mehrere Elemente generieren: *Zum Beispiel: ul>li*5

8 . Generieren aus Definieren des -Attributs : [attr]

9. Generieren Sie Inhalte mit Text: {}

10. Zahl hinzufügen: $

11.Gruppe: ( )

Ein umfassender Fall

ist generiertes CSS

快捷键

生成测试文本

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen

7. Wiederholt mehrere Elemente generieren: *
Zum Beispiel: `ul>li*5`