Emmet html

Emmet -zestaw narzędzi do skrótowego pisania kodu HTML i CSS – wpisujemy skrót i wciskamy TAB

 

główna strona Emmet

 

HTML

Lorem ipsum generator – określenie ilości znaków, niezależny tekst w osobnych elementach

.myBlock*2>h2{Subtitle}+img+p>lorem8

<div class="myBlock">
  <h2>Subtitle</h2>
  <img src="" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="myBlock">
  <h2>Subtitle</h2>
  <img src="" alt="">
  <p>Sequi nisi ipsam dolor fuga consectetur natus reprehenderit.</p>
</div>

Zagnieżdżanie – Climbing

powrót do elementu po zagnieżdżeniu elementu w nim
.container>h1{main section}+p>lorem8+a{click}^p>lorem5

<div class="container">
  <h1>main section</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <a href="">click</a>
  </p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Grupowanie elementów

ułożenie elementów w grupie
.container>h1{main section}+(p>lorem8+a{click})+p>lorem5

<div class="container">
  <h1>main section</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
    <a href="">click</a>
  </p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Numerowanie elementów

.container>img.thumbnail-$*5

<div class="container">
  <img src="" alt="" class="thumbnail-1">
  <img src="" alt="" class="thumbnail-2">
  <img src="" alt="" class="thumbnail-3">
  <img src="" alt="" class="thumbnail-4">
  <img src="" alt="" class="thumbnail-5">
</div>

z podwójnym numerem przy numerowaniu:
.container>img.thumbnail-$$*5

<div class="container">
  <img src="" alt="" class="thumbnail-01">
  <img src="" alt="" class="thumbnail-02">
  <img src="" alt="" class="thumbnail-03">
  <img src="" alt="" class="thumbnail-04">
  <img src="" alt="" class="thumbnail-05">
</div>

numerowanie od dowolnej liczby:
.container>img.thumbnail-$@5*5

<div class="container">
  <img src="" alt="" class="thumbnail-5">
  <img src="" alt="" class="thumbnail-6">
  <img src="" alt="" class="thumbnail-7">
  <img src="" alt="" class="thumbnail-8">
  <img src="" alt="" class="thumbnail-9">
</div>

odwrócona kolejność numerowania:
.container>img.thumbnail-$@-*5

<div class="container">
  <img src="" alt="" class="thumbnail-5">
  <img src="" alt="" class="thumbnail-4">
  <img src="" alt="" class="thumbnail-3">
  <img src="" alt="" class="thumbnail-2">
  <img src="" alt="" class="thumbnail-1">
</div>

Atrybuty

źródło grafiki:
img[src=”http://placeholder.it/100×100″]

<img src="http://placeholder.it/100x100" alt="">

a[href=”https://google.com”]{Click me}

do sprawdzenia:
– Wrap with Abbreviation