Emmet構文(一)

19217 ワード

プラグイン先端開発

Emmetは先端開発プラグインであり、htmlコードを迅速に生成し、開発効率を向上させることができる.
1.Sublime Text 3 emmetをインストールする
preference->package control->install package、emmetを入力、インストールすればよい.
2.html構造ドキュメントの迅速な生成
新しいhtmlに入力!またはhtmlでhtml 5構造ドキュメントを生成します.
! またはhtml:5
tabキーを押して生成:

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

 </body>
 </html>

html 4構造ドキュメント
html:tx
tabキーを押して生成:

 <!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>Document</title>
 </head>
 <body>

 </body>
 </html>

3.id付きタグの生成
要素名#id名
次のようになります.

p#name

tabキーを押して生成:

<p id="name"></p>

#name
tabキーを押して生成:

<div id="name"></div>

4.class付きラベルの生成
div.classname
tabキーを押して生成:

<div class="classname"></div>

ブレンド:
div#header+div.body+div#foot.classnam1.classname2.classname3
tabキーを押して生成:

    <div class="classname"></div>
    <div id="header"></div>
    <div class="body"></div>
    <div id="foot" class="classnam1 classname2 classname3"></div>

5.子の生成:>
記号<'で子を生成します.例:
div >ul>li
tabキーを押して生成:

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

6.兄弟の生成:+
「+」を使用して兄弟を生成します.例:
div+p+bq
tabキーを押して生成:

    <div></div>
    <p></p>
    <blockquote></blockquote>

7.親の生成:^
「^」を使用して親ノードを生成します.例:
div>p>h1^h2
tabキーを押して生成:

 <div>
        <p>
            <h1></h1>
        </p>
        <h2></h2>
 </div>

8.繰り返し要素:*
任意の要素に*nを付けると、4つのliを含むulが生成されるなど、n回繰り返されます.
ul>(li.name)*4
tabキーを押して生成:

<ul>
        <li class="name"></li>
        <li class="name"></li>
        <li class="name"></li>
        <li class="name"></li>
</ul>

9.グループ化の生成:()
カッコでグループ化すると、生成する構造、特に階層関係がより明確になります.例1:
(div>dl>(dt+dd)*3)+footer>p
tabキーを押して生成:

   <h2></h2>
    <div>
        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

例2:
div>(header>ul>(li>a)*2)+footer>p
tabキーを押して生成:

    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

10.属性の設定:[]
属性は[]に書き、属性の中には等号で与えられ、複数の属性はスペースで区切る.例
a[href=”http://blog.csdn.net/napoay「title=「姚攀のブログ」
tabキーを押して生成:

 <a href="http://blog.csdn.net/napoay" title="     "></a>

11.生成コンテンツ番号:$
ドル記号$を使用してプロジェクト番号を指定できます.例
ul>li#item$*5
tabキーを押して生成:

   <ul>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
    <li id="item4"></li>
    <li id="item5"></li>
   </ul>

上の例は小さいから大きいまで、大きいから小さいまで$の後に@-:
ul>li#item$@-*5
tabキーを押して生成:


   <ul>
    <li id="item5"></li>
    <li id="item4"></li>
    <li id="item3"></li>
    <li id="item2"></li>
    <li id="item1"></li>
   </ul>

指定されたシーケンス番号Nから:
ul>li.item$@3*5
tabキーを押して生成:

 <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
 </ul>

指定されたシーケンス番号Nから逆順を開始し、Nは最小のシーケンス番号である.
ul>li#item$@-4*5
tabキーを押して生成:

  <ul>
    <li id="item8"></li>
    <li id="item7"></li>
    <li id="item6"></li>
    <li id="item5"></li>
    <li id="item4"></li>
 </ul>

12.テキストコンテンツの生成:{}
生成された要素に内容を挿入するには、{}を使用してテキストの内容を入れればよい.例:
ul#id1>li.classname{テキストコンテンツ生成}*5
tabキーを押して生成:

<ul id="id1">
    <li class="classname">      </li>
    <li class="classname">      </li>
    <li class="classname">      </li>
    <li class="classname">      </li>
    <li class="classname">      </li>
</ul>

まとめ:emmetがhtmlドキュメント構造、クラス、id、属性、テキスト内容、親ノード、兄弟フェーズ、サブノード、シーケンス番号を生成する方法をまとめました.emmetプラグインを正しくインストールし、中国語と英語の切り替えとスペースに注意し、以上のコマンドを熟練することで開発効率を迅速に向上させることができる.

HTML 5 history API実践

SVGランプ学習の――SVG放射性ランプ