HTMLのEmmetリファレンス

Emmetは、HTMLを非常に高速に作成するのに役立つ非常に優れたツールです。それは魔法のようなものです。 Emmetは新しいものではなく、何年も前から存在しており、すべてのエディター用のプラグインがあります。

Emmetは、HTMLを非常に高速に作成するのに役立つ非常に優れたツールです。

それは魔法のようなものです。

Emmetは新しいものではなく、何年も前から存在しており、すべてのエディター用のプラグインがあります。オンVSコード、Emmetはすぐに統合され、エディターが可能なEmmetコマンドを認識すると、ツールチップが表示されます。

Emmet in VS Code

あなたが書いたものに他の解釈がなく、VS CodeがそれがEmmet式であるに違いないと判断した場合、ツールチップで直接プレビューします。

Emmet preview in VS Code

それでも、私はそれについて研究して書くことに着手するまで、そのすべての複雑さでそれを使用する方法を本当に知りませんでした、それで私はそれを深く使う方法を学ばなければなりませんでした。

日々の仕事で使いたいので、これが学んだことです。

HTMLファイルを最初から作成する

タイプ!そして、基本的なHTMLボイラープレートを使用できます。

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

</body>
</html>

>および+

  • >子供を意味します

  • +兄弟を意味します

    nav>ul>li

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

    <div></div>
<p></p>
<span></span>

これらを組み合わせて、より複雑なマークアップを実行できます。 VS Codeは、Emmetスニペットにプレビューがない場合にプレビューを表示するのに非常に便利です

ul>li>div+p+span

<ul>
<li>
<div></div>
<p></p>
<span></span>
</li>
</ul>

レベルアップ

使用する^いつでもレベルアップできます>子を作成するには：

ul>li>div+p^li>span

<ul>
<li>
<div></div>
<p></p>
</li>
<li><span></span></li>
</ul>

これを複数回使用して、複数回「アップ」することができます。

ul>li>div+p^^p

<ul>
<li>
<div></div>
<p></p>
</li>
</ul>
<p></p>

乗数

を使用して、任意のタグを複数回追加できます*：

ul>li*5>p

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

式をグループ化して読みやすくします

掛け算を組み合わせると、物事は少し複雑になり始めます。 2つのアイテムを乗算したい場合はどうなりますか？それらを括弧でグループ化します( )：

ul>li>(p+span)*2

<ul>
<li>
<p></p>
<span></span>
<p></p>
<span></span>
</li>
</ul>

idそしてclass属性

idそしてclassおそらくHTMLで最も使用される属性です。

CSSのような構文を使用して、それらを含むHTMLスニペットを作成できます。

ul>li>p.text#first

<ul>
<li>
<p class=“text” id=“first”></p>
</li>
</ul>

複数のクラスを追加できます。

ul>li>p.text.paragraph#first

<ul>
<li>
<p class=“text paragraph” id=“first”></p>
</li>
</ul>

一意のクラスまたはIDを追加する

idいつでも、ページ内で一意である必要があります。

class繰り返すこともできますが、要素にインクリメンタルなものが必要な場合があります。

あなたはそれを使用してそれを行うことができます$：

ul>li.item$*2>p

<ul>
<li class=“item1”>
<p></p>
</li>
<li class=“item2”>
<p></p>
</li>
</ul>

その他の属性

クラスとID以外の属性は、を使用して追加する必要があります[]括弧：

ul>li.item$*2>p[style="color: red"]

<ul>
<li class=“item1”>
<p style=“color: red”></p>
</li>
<li class=“item2”>
<p style=“color: red”></p>
</li>
</ul>

一度に複数の属性を追加できます。

ul>li.item$*2>p[style="color: red" title="A color"]

<ul>
<li class=“item1”>
<p style=“color: red” title=“A color”></p>
</li>
<li class=“item2”>
<p style=“color: red” title=“A color”></p>
</li>
</ul>

コンテンツの追加

もちろん、HTMLにコンテンツを入力することもできます。

ul>li.item$*2>p{Text}

<ul>
<li class=“item1”>
<p>Text</p>
</li>
<li class=“item2”>
<p>Text</p>
</li>
</ul>

マークアップに増分数を追加する

テキストに増分番号を追加できます。

ul>li.item$*2>p{Text $}

<ul>
<li class=“item1”>
<p>Text 1</p>
</li>
<li class=“item2”>
<p>Text 2</p>
</li>
</ul>

その番号は通常1から始まりますが、任意の番号から始めることができます。

ul>[email protected]*2>p{Text [email protected]}

<ul>
<li class=“item10”>
<p>Text 3</p>
</li>
<li class=“item11”>
<p>Text 4</p>
</li>
</ul>

ページで使用されているタグのリファレンスhead

略語 レンダリングされたhtml
リンク <link rel="stylesheet" href="" />
リンク：css <link rel="stylesheet" href="style.css" />
リンク：ファビコン <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
リンク：rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta：utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta：vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
スタイル <style></style>
脚本 <script></script>
script：src <script src=""></script>

一般的なタグのリファレンス

略語 レンダリングされたhtml
img <img src="" alt="" />
A <a href=""></a>
br <br />
時間 <hr />
c <!-- -->
tr + <tr><td></td></tr>
ol + <ol>
  		•
    ul + <ul>
  		•

    セマンティックHTMLタグのリファレンス

    略語 レンダリングされたhtml
    mn <main></main>
    宗派 <section></section>
    アート <article></article>
    hdr <header></header>
    ftr <footer></footer>
    adr <address></address>
    str <strong></strong>

    フォーム要素のリファレンス

    略語 レンダリングされたhtml
    形 <form action=""></form>
    form：get <form action="" method="get"></form>
    form：post <form action="" method="post"></form>
    ラベル <label for=""></label>
    入力 <input type="text" />
    inp <input type="text" name="" id="" />
    入力：非表示、入力：h <input type="hidden" name="" />
    入力：テキスト、入力：t <input type="text" name="" id="" />
    入力：検索 <input type="search" name="" id="" />
    入力：メール <input type="email" name="" id="" />
    input：url <input type="url" name="" id="" />
    入力：パスワード、入力：p <input type="password" name="" id="" />
    入力：日時 <input type="datetime" name="" id="" />
    入力：日付 <input type="date" name="" id="" />
    input：datetime-local <input type="datetime-local" name="" id="" />
    入力：月 <input type="month" name="" id="" />
    入力：週 <input type="week" name="" id="" />
    入力：時間 <input type="time" name="" id="" />
    input：tel <input type="tel" name="" id="" />
    入力：数値 <input type="number" name="" id="" />
    入力：色 <input type="color" name="" id="" />
    入力：チェックボックス、入力：c <input type="checkbox" name="" id="" />
    入力：ラジオ、入力：r <input type="radio" name="" id="" />
    入力：範囲 <input type="range" name="" id="" />
    入力：ファイル、入力：f <input type="file" name="" id="" />
    入力：送信、入力：s <input type="submit" value="" />
    入力：画像、入力：i <input type="image" src="" alt="" />
    入力：ボタン、入力：b <input type="button" value="" />
    入力：リセット <input type="reset" value="" />
    button：submit、button：s、btn：s <button type="submit"></button>
    button：reset、button：r、btn：r <button type="reset"></button>
    ボタン：無効、ボタン：d、btn：d <button disabled="disabled"></button>
    btn <button></button>
    fieldset：disabled、fieldset：d、fset：d、fst：d <fieldset disabled="disabled"></fieldset>
    fst、fset <fieldset></fieldset>
    optg <optgroup></optgroup>
    選択する <select name="" id=""></select>
    select：disabled、select：d <select name="" id="" disabled="disabled"></select>
    select + <select name="" id=""><option value=""></option></select>
    オプション、選択 <option value=""></option>
    テーブル+ <table><tr><td></td></tr></table>
    textarea <textarea name="" id="" cols="30" rows="10"></textarea>
    タレア <textarea name="" id="" cols="30" rows="10"></textarea>

    その他のdevtoolsチュートリアル：


    Tech Wiki Online！