Emmetを使用してHTMLを生成する構文の詳細

6363 ワード
HTMLドキュメントの初期構造の生成
HTMLドキュメントの初期構造は、doctype、html、head、body、metaなどが含まれています.「!HTML 5の標準ドキュメントの初期構造を生成することができます.見間違えずに感嘆符(もちろん英語記号)を入力し、TABキーを押すと、次の構造が生成されます.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

これがHTML 5の標準構造であり、デフォルトのHTML構造でもある.HTML 4のトランジション構造を生成したい場合は、命令html:xtを入力すると次の構造が生成されます.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>

</body>
</html>

Emmetは自動的にdoctypeを補完します.どうですか.このような機能はあなたを感動させますか.よく使われるHTML構造命令を簡単にまとめます.
  • html:5か!HTML 5構造
    • の生成
  • html:xt HTML 4遷移型
    • を生成する.
  • html:4s HTML 4厳格型
    • を生成する.
    id、class付きHTMLタグの生成
    Emmetの構文はCSSの構文に似ていて、idがaaaのdivラベルを生成します.次のコマンドを書くだけです.
    #aaa

    Emmetのデフォルトのラベルはdivです.ラベル名を指定しないと、デフォルトでdivラベルが生成されます.classがbbbのspanラベルを記述する場合は、次のコマンドを記述する必要があります.
    span.bbb

    そして対応する構造が生成される.同様に、idがcccのclassがdddのulラベルを書く場合は、次のように書くことができます.
    ul#ccc.ddd

    簡単ですよね?手書きid、classよりずっと便利でしょう
    子孫の生成:>
    大きい記号は、後で生成するコンテンツが現在のラベルの子孫であることを示します.たとえば、無秩序なリストを生成し、classがaaaのdivに包まれる場合は、次のコマンドを使用します.
    div.aaa>ul>li

    次の構造を生成できます.
    <div class="aaa">
    <ul>
        <li></li>
    </ul>
</div>

    兄弟の生成:+
    上は下位要素を生成し、平レベルの要素を生成するには+番号を使用します.たとえば、次のコマンドがあります.
    div+p+bq

    次のようなHTML構造を生成できます.
    $cursor$ 
    <p></p>
<blockquote></blockquote>

    親要素の生成:^
    上(Climb-up)要素はどういう意味ですか?前に下級要素を生成する記号「>」について述べましたが、div>ul>liの命令を使用した後、続けて書くと、後続の内容はli下級になります.ulレベルのspanラベルを書きたい場合は、まず「^」で階層を上げる必要があります.例:
    div>ul>li^span

    次のように構成されます.
    <div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

    divと比較して平準化要素を生成したい場合は、階層を1つ上げて、「^」記号を1つ多く使用します.
    div>ul>li^^span

    重複生成:*
    特に無秩序なリストでは、ulの下のliは1部だけでなく、通常多くのliラベルを生成します.では、liの後ろの*に直接数字をつけることができます.
    ul>li*5

    これにより、5つのプロジェクトの無秩序リストが直接生成されます.他の構造を複数生成する場合は、同様の方法があります.
    グループの生成:()
    カッコでグループ化すると、生成する構造、特に階層関係をより明確にすることができます.たとえば、次のようになります.
    div>(header>ul>li*2>a)+footer>p

    これにより、階層関係と並列関係が明らかになり、次のような構造が生成されます.
    <div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

    さらに、パケットは、前述の「*」記号と組み合わせて、反復構造を容易に生成することができる.
    (div>dl>(dt+dd)*3)+footer>p

    構築構造:
    <div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

    カスタム属性の生成:[attr]
    aラベルには、href属性とtitle属性を付ける必要があります.hrefを生成するにはhttp://blog.wpjam.com」、titleは「私は魚を煮るのが好きです」のaラベルで、このように書くことができます.
    a[href="http://blog.wpjam.com" title="     "]

    他のラベルとプロパティは似ています.
    生成されたコンテンツ番号:$
    たとえば、無秩序なリストでは、5つのliにclass属性値item 1を追加し、1～5から順次増加するには、$記号を使用する必要があります.
    ul>li.item$*5

    これにより、次のような構造が生成されます.

    • $は1桁の数字を表し、1つだけ現れると、1から始まります.複数表示される場合は0から開始します.3桁のシーケンス番号を生成したい場合は、$を3つ書きます.
    ul>li.item$$$*5

    出力:
    <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

    このような単調な生成シーケンス番号しかありませんか?強力なEmmetでは、間違いなくできません.$の後ろに@を追加して、逆順序の配列を実現することもできます.
    ul>li.item$@-*5

    次のように構成されます.
    <ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

    同様に、@Nを使用して開始番号を指定することもできます.
    ul>li.item$@3*5

    これにより、3からソートが開始され、次のコードが生成されます.
    <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

    上の逆順出力に合わせて、次のように書くことができます.
    ul>li.item$@-3*5

    生成されるのは、3をベースにした逆順序です.

    • テキストコンテンツの生成:{}
    HTMLタグを生成する方法について説明しましたが、その内容は?もちろん生成できます.
    a[href="http://blog.wpjam.com"]{           }

    これで私が魚を煮るのが好きなハイパーリンクが生成されました.コンテンツを生成する際には、特に前後の符号関係に注意し、a>{Click me}とa{Click me}が生成する構造は同じですが、他のコンテンツを加えると必ずしもそうではありません.例えば:
    <!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

    これで全く異なる構造が生成され、これらの小さな細部に注意してください.
    スペースなし
    命令を書くときは、コードの可読性のためにスペースなどを使ってレイアウトするかもしれません.これにより、コードが使用できなくなります.たとえば、次のようになります.
    (header > ul.nav > li*5) + footer  

    スペースを削除すると、生成構造が正常に実行されます.
    水煮好きのブログ
    OJ-練習-長方形から継承
    HDU5317