Συνοπτικός οδηγός Emmet

Δωρεάν

Μια αναζητήσιμη, εκτυπώσιμη αναφορά Emmet: τελεστές φωλιάσματος, πολλαπλασιασμό, ομαδοποίηση, χαρακτηριστικά, συντομογραφίες HTML και CSS. Δωρεάν.

Nesting operators

div>ul>li

> child: li inside ul inside div

div+p+blockquote

+ sibling: elements on the same level

div+div>p>span+em

Combine child and sibling operators

div+div>p>span+em^bq

^ climb up: bq is a sibling of p

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

Each ^ climbs one more level up

nav>ul>li*4>a

A four-link navigation in one line

ul>li>a[href=#]{Link}

Nest, attribute and text combined

div>p+p+p

One parent, three paragraph children

Multiplication & numbering

ul>li*5

* repeats the element 5 times

li.item$*3

$ = counter: item1, item2, item3

li.item$$$*3

Pad with zeros: item001, item002...

li.item$@-*3

@- counts down: item3, item2, item1

li.item$@3*5

@3 starts counting at 3 (3..7)

li.item$@-3*5

Count down ending at 3 (7..3)

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

$ works in tag, attribute and text

ul>li*3>a{Link $}

Counter follows the repeated parent

td*5

Five empty table cells

Grouping

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

() groups a subtree; footer stays in div

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

Nested groups, repeated dt/dd pairs

(li>a)*5

Multiply a whole group, not one tag

ul>(li>a{Item $})*4

Grouped repeat with counters

(header+main+footer)

Page skeleton as one abbreviation

table>(tr>td*3)*4

4x3 table via nested groups

(div.col)*2

Two sibling columns

section>(h2+p)*3

Repeat heading + paragraph blocks

ID, class & attributes

div#header

# sets the id attribute

div.title

. sets the class attribute

p.class1.class2.class3

Chain multiple classes

form#search.wide

Combine id and class

#page

No tag: div is implied

.card

Same: expands to div.card

td[title="Hello" colspan=3]

[] sets custom attributes

a[href=# data-id=5]

Multiple attributes, space-separated

input[type=text required]

Boolean attributes need no value

img[src=logo.png alt=Logo]

Quotes optional for simple values

Text & implicit tag names

a{Click me}

{} inserts text into the element

a{click}+b{here}

<a>click</a><b>here</b>

a>{click}+b{here}

<a>click<b>here</b></a>: b inside a

p>{Text }+a{link}+{ more}

Mix raw text nodes and elements

.wrap>.content

div is implied at block level

em>.hint

Inside inline: span is implied

ul>.item*3

Inside ul/ol: li is implied

table>.row>.col

tr and td are implied in tables

select>.opt*3

option is implied inside select

HTML boilerplate

!

Full HTML5 boilerplate (html:5)

html:5

Same: doctype, head, meta, body

!!!

Just the <!DOCTYPE html> line

meta:utf

meta:vp

Responsive viewport meta tag

link

link:css

Stylesheet link to style.css

link:favicon

Favicon link tag

script:src

doc

Document without the doctype

Common HTML abbreviations

a

a:mail

img

btn

form:post

Form with method="post"

input:email

Email input with name and id

input:password

Password input

input:checkbox / input:radio

Checkbox / radio inputs

input:submit

Submit button input

sel>opt*3

Select with three options

label+input

Label and input pair

tarea

table+

table>tr>td expanded

ol+ / ul+ / dl+

List with its first item(s)

CSS abbreviations

m10

margin: 10px;

p10-20

padding: 10px 20px;

m10-auto

margin: 10px auto;

w100 / h50

width: 100px; / height: 50px;

df

display: flex;

dib / dn

display: inline-block; / none;

pos:a / pos:r / pos:f

position absolute/relative/fixed

t0+l0

top: 0; left: 0;

fz14

font-size: 14px;

fwb / fw700

font-weight: bold / 700

c#f00

color: #f00;

bgc#fff

background-color: #fff;

bd+

border: 1px solid #000;

tac / tar

text-align: center / right

bdrs5

border-radius: 5px;

CSS values & units

m10

Integers default to px: 10px

m10p

p suffix = percent: 10%

m1.5

Floats default to em: 1.5em

m10e

e suffix = em: 10em

m10r

r suffix = rem: 10rem

m10x

x suffix = ex unit

w100p

width: 100%;

m-10

Negative value: margin: -10px;

m10-20-30-40

Four values: top right bottom left

lh1.5

line-height: 1.5em (or unitless)

fz2r

font-size: 2rem;

Vendor prefixes

-bdrs

Prefix with all vendors + plain

-wm-trf

Only -webkit- and -moz- variants

-w-bxsh

w=webkit, m=moz, s=ms, o=opera

trf:r

transform: rotate(angle);

trf:s

transform: scale(x, y);

trs

transition shorthand

anim

animation shorthand

us:n

user-select: none;

-super-foo

Unknown props get prefixed too

Wrap & editor actions

Wrap with Abbreviation

Wrap the selection in an abbreviation

ul>li*

While wrapping: one li per line

a[href=$#]{$#}

$# outputs the wrapped content

Balance (outward/inward)

Select the matching tag pair

Go to Matching Pair

Jump between open and close tags

Remove Tag

Delete a tag, keep its children

Split/Join Tag

Toggle <p></p> and <p/> forms

Toggle Comment

Comment out the current tag/rule

Increment Number by 1/10/0.1

Bump a number under the cursor

Select Next/Previous Item

Hop between tags, attrs, classes

Update Image Size

Insert real width/height of an img

Καμία καταχώριση δεν ταιριάζει με «:q».

Σχετικά με το Συνοπτικός οδηγός Emmet

Αυτό το cheat sheet του Emmet μετατρέπει τη σύνταξη συντομογραφιών σε μία αναζητήσιμη σελίδα: τελεστές φωλιάσματος, πολλαπλασιασμό και αρίθμηση, ομαδοποίηση, σύνταξη ID, class και χαρακτηριστικών, κείμενο και υπονοούμενα ονόματα ετικετών, τον σκελετό HTML, κοινές συντομογραφίες HTML, συντομογραφίες CSS, τιμές και μονάδες CSS, προθέματα προγράμματος περιήγησης, και ενέργειες wrap και επεξεργαστή.

Το Emmet αποδίδει από τη στιγμή που κολλήσουν οι τελεστές: οι χαρακτήρες child, sibling και climb-up, ο πολλαπλασιασμός και η αρίθμηση με $ που παράγουν μια ολόκληρη λίστα, και οι συντομογραφίες CSS που επεκτείνουν μια ιδιότητα και την τιμή της από τρία γράμματα. Κάθε γραμμή δείχνει τη συντομογραφία και τη σήμανση ή CSS στην οποία επεκτείνεται.

Όπως κάθε cheat sheet σε αυτή την ομάδα, είναι δωρεάν και λειτουργεί στην πλευρά του πελάτη: φιλτράρετε γραμμές ζωντανά με το πλαίσιο αναζήτησης, μετακινηθείτε μεταξύ ενοτήτων με τον σταθερό πίνακα περιεχομένων, αντιγράψτε οποιαδήποτε συντομογραφία με ένα κλικ και εκτυπώστε τη σελίδα για αναφορά στον επεξεργαστή σας.

Πώς να χρησιμοποιήσετε το Συνοπτικός οδηγός Emmet

Ανοίξτε το φύλλο και εξετάστε τις ενότητες, από τους Τελεστές φωλιάσματος έως τα Wrap & ενέργειες επεξεργαστή.
Αναζητήστε μια λέξη-κλειδί όπως numbering, boilerplate ή grid για να φιλτράρετε κάθε γραμμή ζωντανά.
Μεταβείτε στις Συντομογραφίες CSS όταν θέλετε τις συντομογραφίες ιδιοτήτων αντί για αυτές της σήμανσης.
Κάντε κλικ σε μια συντομογραφία ή στο εικονίδιο αντιγραφής της για να την αντιγράψετε στο πρόχειρό σας, μετά επεκτείνετέ την στον επεξεργαστή σας.
Χρησιμοποιήστε το Εκτύπωση για ένα χάρτινο αντίγραφο της πλήρους αναφοράς Emmet.

Συχνές ερωτήσεις

Έντεκα ενότητες: τελεστές φωλιάσματος, πολλαπλασιασμό και αρίθμηση, ομαδοποίηση, ID, class και χαρακτηριστικά, κείμενο και υπονοούμενα ονόματα ετικετών, τον σκελετό HTML, κοινές συντομογραφίες HTML, συντομογραφίες CSS, τιμές και μονάδες CSS, προθέματα προγράμματος περιήγησης, και wrap και ενέργειες επεξεργαστή.

Ναι: το Emmet είναι ενσωματωμένο στο VS Code, και συνοδεύει τους περισσότερους άλλους σύγχρονους επεξεργαστές και IDE, οπότε οι συντομογραφίες αυτού του φύλλου επεκτείνονται αμέσως.

Η ενότητα πολλαπλασιασμού και αρίθμησης δείχνει τον τελεστή * με τα placeholders $, συμπεριλαμβανομένου του padding με μηδενικά και των offsets εκκίνησης, ώστε μία συντομογραφία να παράγει μια αριθμημένη λίστα στοιχείων.

Ναι. Κάντε κλικ σε οποιαδήποτε γραμμή ή στο εικονίδιο αντιγραφής της και η συντομογραφία αντιγράφεται αμέσως.

Ναι, είναι εντελώς δωρεάν και τρέχει στο πρόγραμμα περιήγησής σας χωρίς σύνδεση.

Δημοφιλείς αναζητήσεις

emmet cheat sheet emmet abbreviations emmet html shortcuts emmet css abbreviations emmet syntax reference vs code emmet shortcuts emmet multiplication numbering

Χρειάζεστε βοήθεια;

Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.

Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο: αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.

<iframe src="https://tweakee.com/el/tools/developer/emmet-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>

Συνοπτικός οδηγός Emmet

Nesting operators

Multiplication & numbering

Grouping

ID, class & attributes

Text & implicit tag names

HTML boilerplate

Common HTML abbreviations

CSS abbreviations

CSS values & units

Vendor prefixes

Wrap & editor actions

Σχετικά με το Συνοπτικός οδηγός Emmet

Πώς να χρησιμοποιήσετε το Συνοπτικός οδηγός Emmet

Συχνές ερωτήσεις

Τι καλύπτει το cheat sheet του Emmet;

Λειτουργεί το Emmet στο VS Code;

Πώς λειτουργεί η σύνταξη αρίθμησης;

Μπορώ να αντιγράψω μια συντομογραφία με ένα κλικ;

Είναι δωρεάν η αναφορά Emmet;

Σχετικά Εργαλεία

Δημοφιλείς αναζητήσεις

Ενσωματώστε αυτό το εργαλείο