ドットインストールEmment HTML編

Emmetチートシート
https://docs.emmet.io/cheat-sheet/

ドットインストールEmmet
https://dotinstall.com/lessons/basic_emmet_v3/50301


1.Emmetを使ってみよう

2.HTMLタグの展開をしてみよう

3.タグの属性を指定しよう

4.複数の要素を展開

5.階層を表現してみよう

6.暗黙的な補完機能を活用しよう

7.formに関するタグを展開してみよう


#01Emmetを使ってみよう

##! または html5
```index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

#02HTMLタグの展開をしてみよう

##div
```
<div></div>
```

##a
```
<a href="リンク先">リンク名</a>
```

#03 タグの属性を指定してみよう

##div#taget

<a id="anchor3"></a>
div にidをつける

```
<div id="target"></div>
```

##div.container
divにclassをつける

```
<div class="container"></div>
```


##div#reset.btn.disabled
divにidとclassをつける

```
<div id="reset" class="btn disabled"></div>

```

##a[title="My Site"]
aにtitleをつける

```
<a href="" title="My Site"></a>
```


##div[date-id="5" title="My Site"]
divにidとtitleをつける

```
<div date-id="5" title="My Site"></div>

```

#04 複数の要素を展開してみよう
##p*3
pタグ3つ

```
<p></p>
<p></p>
<p></p>
```

##div.item*10
divタグ10個

```
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
```

##div.item$*5
連番にしたい場合

```
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>

```

##div.item$$*5
01,02のように0のついた連番にしたい時

```
<div class="item01"></div>
<div class="item02"></div>
<div class="item03"></div>
<div class="item04"></div>
<div class="item05"></div>
```

##div.item$@3*5
中途半端な数字から連番にしたい時

```
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
```


##main>section*3
<main>にsectionが3つ欲しい時

```
<main>
    <section></section>
    <section></section>
    <section></section>
</main>
```


#階層を表現してみよう
##main>section*3+div.btn
同階層の要素を表現したい場合

```
<main>
    <section></section>
    <section></section>
    <section></section>
    <div class="btn"></div>
</main>
```

##main>section*3^footer
１つ上の階層に戻りたい時

```
<main>
    <section></section>
    <section></section>
    <section></section>
</main>
<footer></footer>
```

##ul>li*2

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

##ul*2>li*3 または(ul>li*3)*2
```
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

#06暗黙的な補足機能を活用しよう
##.container

```
<div class="container"></div>
```



##ul>.item*5
```
<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
```


##table>.row*2>.col*4
```
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>
```

#formに関するタグを展開してみよう
##form:post

post


```
<form action="" method="post"></form>
```


##input:t

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


##input:r

radioボタン

```
<input type="radio" name="" id="">
```

##input:c
checkbox

```
<input type="checkbox" name="" id="">
```

##select>[value="items$"]*5
```
<select name="" id="">
    <option value="items1"></option>
    <option value="items2"></option>
    <option value="items3"></option>
    <option value="items4"></option>
    <option value="items5"></option>
</select>
```