HTML Emmet略語を復習する

デイトラ復習中で、HTMLの略語を改めて学習し、新たな発見もあったのでメモ。

デイトラ
https://daily-trial.com/

まずは要素

index.html

div
→<div></div>

p
→<p></p>

h1
→<h1></h1>

ここでは、divを打つだけで予測変換が出てきて、tabキーやEnterキーを押すことで、上記のように表示される。以下同様。

classやid

index.html

.
→<div class=""></div>

.menu
→<div class="menu"></div>

#menu
→<div id="menu"></div>

入れ子

index.html

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

nav>ul>li>a>small
↓
<nav>
    <ul>
        <li><a href=""><small></small></a></li>
    </ul>
</nav>

nav>ul.item>li.item-list
↓
<nav>
    <ul class="item">
        <li class="item-list"></li>
    </ul>
</nav>

隣接(初めて知った)

index.html

header+main+footer
↓
<header></header>
<main></main>
<footer></footer>

dl+dt+dd
↓
<dl></dl>
<dt></dt>
<dd></dd>

繰り返し

index.html

ul>li*3
↓
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

.card*3>.card_text
↓
<div class="card">
    <div class="card_text"></div>
</div>
<div class="card">
    <div class="card_text"></div>
</div>
<div class="card">
    <div class="card_text"></div>
</div>