Emmetの書き方をまとめてみた(HTML編その2)

よく使いそうなEmmetのHTMLの書き方をまとめてみた。

EmmetのHTMLの書き方その1はこちら

EmmetのCSSの書き方についてはこちら

さらに詳しく知りたい方はEmmetの公式サイトチートサイトをご覧ください。

aタグ

a

<a href=""></a>

a:link

<a href="http://"></a>

a[href=”https://dabohaze.site/”]

<a href="https://dabohaze.site/"></a>

a[href=”https://dabohaze.site/” target=”_blank” rel=”noopener noreferrer”]

<a href="https://dabohaze.site/" target="_blank" rel="noopener noreferrer"></a>

a[href=”https://dabohaze.site/” target=”_blank” rel=”noopener noreferrer”]{ダボハゼのブログ}

<a href="https://dabohaze.site/" target="_blank" rel="noopener noreferrer">ダボハゼのブログ</a>

linkタグ

link

<link rel="stylesheet" href="">

link[href=”style.css”]

<link rel="stylesheet" href="style.css">

scriptタグ

script

<script></script>

script:src

<script src=""></script>

script[src=”script.js”]

<script src="script.js"></script>

imgタグ

img

<img src="" alt="">

pictureタグ

picture

<picture></picture>

pic+

<picture>
  <source srcset="">
  <img src="" alt="">
</picture>

formタグ

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="get"></form>

inputタグ

input:h、input:hidden

<input type="hidden" name="">

input:t、input:text

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

input:email

<input type="email" name="" id="">

input:p、input:password

<input type="password" name="" id="">

input:tel

<input type="tel" name="" id="">

input:number

<input type="number" name="" id="">

input:c、input:checkbox

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

input:c*3、input:checkbox*3

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

input:c*3、input:checkbox*3

<input type="checkbox" name="" id="" value="1">
<input type="checkbox" name="" id="" value="2">
<input type="checkbox" name="" id="" value="3">

input:r、input:radio

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

input:r*3、input:radio*3

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

input:r*3、input:radio*3

<input type="radio" name="" id="" value="1">
<input type="radio" name="" id="" value="2">
<input type="radio" name="" id="" value="3">

input:s、input:submit

<input type="submit" value="">

input:f、input:file

<input type="file" name="" id="">

select

<select name="" id=""></select>

select+

<select name="" id="">
  <option value=""></option>
</select>

select>opt*3、select>option*3

<select name="" id="">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>

textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

tableタグ

table

<table></table>

table+

<table>
  <tr>
    <td></td>
  </tr>
</table>

table>tr*3>td*5

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

ulタグ

ul

<ul></ul>

ul+

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

ul>li*3

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

olタグ

ol

<ol></ol>

ol+

<ol>
  <li></li>
</ol>

ol>li*3

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>