200925 HTMLコメントtipの作成

23035 ワード
emmet html TIL テキストリンク
EmmetはVCODEなどの各種エディタで言語を自動的に完成させるツールです.
ここでは、コメント作成(HTMLのみ)のテクニックについてまとめます.
Structuralインジケータオペレータ>を使用してサブエレメントを生成します.
작성 후 엔터(혹은 탭)
body>div>ul>li

결과
<body>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
</body>
+兄弟要素を追加します.
div+div+div

<div></div>
<div></div>
<div></div>
^は、1つのレベルの上に要素を追加します.
body>div>ul>li^p

<body>
    <div>
        <ul>
            <li></li>
        </ul>
        <p></p>
    </div>
</body>
生成要素*を繰り返します.
div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
()の複雑なサムネイルでグループ化することができる.
body>(div>ul>li)+a>p

<body>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <a href="">
        <p></p>
    </a>
</body>
次回も可能です.
div>(a>p)*3+div>(ul>li)*3

<div>
    <a href="">
        <p></p>
    </a>
    <a href="">
        <p></p>
    </a>
    <a href="">
        <p></p>
    </a>
    <div>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
    </div>
</div>
演算子属性演算子の追加
IDとClassを追加できます.idは#、classは.使用します.
div.num>div#num$*4

<div class="num">
    <div id="num1"></div>
    <div id="num2"></div>
    <div id="num3"></div>
    <div id="num4"></div>
</div>
番号付け
$を使用します.$の個数で数字の桁数を決めることもできます.
ul>li#$*3>p#$$*3

<ul>
    <li id="1">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
    <li id="2">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
    <li id="3">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
</ul>
テキストの追加
要素にテキストを追加します.
div>p{Hello}

<div>
    <p>Hello</p>
</div>
[白俊]1728号配列組合せ
Asp.Net新しいウィンドウを開く