25 Mar 2019

Emmet przyspieszamy pisanie HTML

W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj

Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML

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

Inne podstawowe i często używane to:

<!-- link -->
<link rel="stylesheet" href="" />
<!-- link:css -->
<link rel="stylesheet" href="style.css" />
<!-- link:favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- link:rss -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
<!-- style -->
<style></style>
<!-- script -->
<script></script>
<!-- script:src -->
<script src=""></script>

<!-- img -->
<img src="" alt="" />
<!-- a -->
<a href=""></a>
<!-- br -->
<br />
<!-- hr -->
<hr />
<!-- mn -->
<main></main>
<!-- sect -->
<section></section>
<!-- art -->
<article></article>
<!-- hdr -->
<header></header>
<!-- ftr -->
<footer></footer>
<!-- adr -->
<address></address>
<!-- str -->
<strong></strong>
<!-- for -->
<form action=""></form>
<!-- input -->
<input type="text" />
<!-- label -->
<label for=""></label>
<!-- button:s -->
<button type="submit"></button>
<!-- button:r -->
<button type="reset"></button>
<!-- btn -->
<button></button>
<!-- select -->
<select name="" id=""></select>
<!-- tarea lub textarea -->
<textarea name="" id="" cols="30" rows="10"></textarea>

> oraz +

<!-- nav>ul>li -->
<nav>
  <ul>
    <li></li>
  </ul>
</nav>
<!-- div+p+span -->
<div></div>
<p></p>
<span></span>

Teraz pomieszamy lekko 😉

<!-- ul>li>div+p+span -->
<ul>
   <li>
      <div></div>
      <p></p>
      <span></span>
   </li>
</ul>

Każdy tag możemy dodać wiele razy *

<!-- ul>li*3>p -->
<ul>
  <li>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
</ul>

Grupowanie przez użycie ()

<!-- ul>li(p+span)*2 -->
<ul>
  <li></li>
  <p></p>
  <span></span>
  <p></p>
  <span></span>
</ul>

Dodanie class i id

<!-- ul>li>p.text#top -->
<ul>
  <li>
    <p class="text" id="top"></p>
  </li>
</ul>

Można dodać kilka klas

<!-- ul>li>p.text.top#top -->
<ul>
  <li>
    <p class="text top" id="top"></p>
  </li>
</ul>

Dodać można również unikalne class czy id

<!-- ul>li.text*2>p -->
<ul>
  <li class="text">
    <p></p>
  </li>
  <li class="text">
    <p></p>
  </li>
</ul>

Dodanie treści { }

<!-- ul>li>p.text*2>p{Treść} -->
<ul>
  <li>
    <p class="text">
      <p>Treść</p>
    </p>
    <p class="text">
      <p>Treść</p>
    </p>
  </li>
</ul>

Dodanie numerowania za pomocą $

<!-- ul>li>p.text$*2>p{Treść $} -->
<ul>
  <li>
    <p class="text1">
      <p>Treść 1</p>
    </p>
    <p class="text2">
      <p>Treść 2</p>
    </p>
  </li>
</ul>

Można też zacząć od konkretnego numeru @

<!-- ul>li>p.text$@10*2>p{Treść $@3} -->
<ul>
  <li>
    <p class="text10">
      <p>Treść 3</p>
    </p>
    <p class="text11">
      <p>Treść 4</p>
    </p>
  </li>
</ul>

A i najważniejsze do uzupełniania treści a mianowicie lorem ipsum wystarczy wpisać lorem i treść gotowa 🙂