Schnelles Lernen der Emmet-Grammatik

Bei der Front-End-Entwicklung ist es häufig erforderlich, einige HTML- und CSS-Codes manuell zu schreiben, und manchmal ist die Handschrift umständlich. So erschien die Emmet-Syntax. Die Hauptfunktion ähnelt der Funktion von Tastenkombinationen. Es müssen nur ein paar Buchstaben eingegeben werden, um schnell und automatisch einen Code zu generieren, was die Entwicklungseffizienz erheblich verbessert.

Emmet ist ein Plug-In. Solange es in jedem Editor installiert werden kann, kann es verwendet werden. Die meisten Editoren können diese Grammatikregel verwenden. Wir entwickeln normalerweise: Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaverusw. Editoren können verwendet werden.

Dann werde ich es Ihnen anhand offizieller Dokumente erklären, was einfach und direkt ist.

1. Grundlegendes Syntaxbeispiel:

untergeordneter Knoten (Child): >

Eingabe: nav>ul>li

Automatisch generiert:

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

Wiederholen (Multiplikation):*

Eingabe: ul>li*5

Automatisch generiert:

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

Artikelnummerierung: $

Eingabe: ul>li.item$*5

Automatisch generiert:

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

Eingabe: h$[title=item$]{Header $}*3

Automatisch generiert:

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

Eingabe: ul>li.item$$$*5

Automatisch generiert:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Eingabe: ul>li.item$@-*5

Automatisch generiert:

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

Eingabe: ul>li.item$@3*5

Automatisch generiert:

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

Wiederholen (Geschwister): +

Eingabe: div+p+bq

Automatisch generiert:

<div></div>
<p></p>
<blockquote></blockquote>

Knoten der oberen Ebene (Aufstieg): ^

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

Automatisch generiert:

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

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

Automatisch generiert:

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

Gruppierung: ()

Eingabe: div>(header>ul>li*2>a)+footer>p

Automatisch generiert:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Eingabe: (div>dl>(dt+dd)*3)+footer>p

Automatisch generiert:

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

ID- und Klassenattribute ( ID- und CLASS-Attribute )

Geben Sie ein: #header

Automatisch generiert:

<div id="header"></div>

Geben Sie ein: .title

Automatisch generiert:

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

Geben Sie Folgendes ein: form#search.wide

Automatisch generiert:

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

Geben Sie ein: p.class1.class2.class3

Automatisch generiert:

<p class="class1 class2 class3"></p>

Benutzerdefinierte Attribute ( Benutzerdefinierte Attribute )

Eingabe: p[title="Hallo Welt"]

Automatisch generiert:

<p title="Hello world"></p>

Eingabe: td[rowspan=2 colspan=3 title]

Automatisch generiert:

<td rowspan="2" colspan="3" title=""></td>

Eingabe: [a='Wert1' b="Wert2"]

Automatisch generiert:

<div a="value1" b="value2"></div>

Text ( Text ) : {}

Eingabe: a{Click me}

Automatisch generiert:

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

输入:p>{Klicken Sie hier auf }+a{}+{, um fortzufahren}

Automatisch generiert:

<p>Click <a href="">here</a> to continue</p>

Diätetiketten ( implizite Tag-Namen )

Geben Sie ein: .class

Automatisch generiert:

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

Geben Sie ein: em>.class

Automatisch generiert:

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

Geben Sie ein: ul>.class

Automatisch generiert:

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

Eingabe: Tabelle>.Zeile>.Spalte

Automatisch generiert:

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

Zweitens, HTML-Struktur:

eingeben:! oder html:5

Automatisch generiert:

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

Eingabe: a

Automatisch generiert:

<a href=""></a>

Geben Sie Folgendes ein: a: Link

Automatisch generiert:

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

Eingabe: br

Automatisch generiert:

<br />

Geben Sie ein: Link

Automatisch generiert:

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

Geben Sie ein: link:css

Automatisch generiert:

<link rel="stylesheet" href="style.css" />

Eingabe: Stil

Automatisch generiert:

<style></style>

Eingabe: Skript

Automatisch generiert:

<script></script>

Geben Sie ein: script:src

Automatisch generiert:

<script src=""></script>

Eingabe: input:text oder input:t

Automatisch generiert:

<input type="text" name="" id="" />

Eingabe: html:xml

Automatisch generiert:

<html xmlns="http://www.w3.org/1999/xhtml"></html>

Eingabe: bq

Automatisch generiert:

<blockquote></blockquote>

Eingabe: Dok

Automatisch generiert:

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Eingabe: doc4

Automatisch generiert:

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

Eingabe: ol+

Automatisch generiert:

<ol>
    <li></li>
</ol>

Eingabe: ul+

Automatisch generiert:

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

eingeben:!!!

Automatisch generiert:

<!DOCTYPE html>

Drei, CSS-Struktur:

Eingabe: Pos

Automatisch generiert:

position:relative;

Eingabe: pos:s

Automatisch generiert:

position:static;

Eingabe: pos:a

Automatisch generiert:

position:absolute;

Eingabe: m

Automatisch generiert:

margin:;

Geben Sie ein: m:a

Automatisch generiert:

margin:auto;

Geben Sie ein: bxz

Automatisch generiert:

box-sizing:border-box;

Eingabe: bg

Automatisch generiert:

background:#000;

eingeben:!

Automatisch generiert:

!important

Geben Sie ein: @f

Automatisch generiert:

@font-face {
    font-family:;
    src:url(|);
}

Eingabe: @i oder @import

Automatisch generiert:

@import url();

Geben Sie ein: @kf

Automatisch generiert:

@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}

So viele sind grob aufgelistet, und andere Verwendungen im Detail sind ähnlich.

Sie können sich auch das offizielle Beispieldokument ansehen: https://docs.emmet.io/cheat-sheet/