ホームページ > 記事 > ウェブフロントエンド > Emmet を使用して HTML_html/css_WEB-ITnose を生成するための詳細な構文
Emmet を使用して HTML_html/css_WEB-ITnose を生成するための詳細な構文
- WBOYオリジナル
- 2016-06-21 09:09:071120ブラウズ
HTML ドキュメントの初期構造を生成します
HTML ドキュメントの初期構造には、doctype、html、head、body、meta、およびその他のコンテンツが含まれます。 「!」を入力するだけで、HTML5 標準ドキュメントの初期構造が生成されます。感嘆符 (もちろん英語の記号) を入力して、次の構造になっていることがわかります。生成:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body></body></html>
これは HTML5 の標準構造であり、デフォルトの HTML 構造です。 HTML4 の移行構造を生成したい場合は、コマンド 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 or! HTML5 構造を生成する html:xt HTML4 トランジショナル html:4s を生成するID とクラスを含む HTML タグを生成する
Emmet の構文は CSS 構文に似ています。 ID aaa の div タグを生成するには、次の命令を記述するだけです:
#aaa
Emmet タグ名を指定しない場合、デフォルトで div タグが生成されます。クラス bbb で Span タグを記述する場合、次の命令を記述する必要があります:
span.bbb
その後、対応する構造が生成されます。同様に、ccc の ID と ddd のクラスを持つ ul タグを書きたい場合は、次のように書くことができます:
ul#ccc.ddd
とても簡単ですよね? ID とクラスを手動で記述するよりもはるかに便利です
子孫を生成: >
不等号は、後で生成されるコンテンツが現在のタグの子孫であることを示します。たとえば、順序なしリストを生成する必要があり、それがクラス aaa の div でラップされている場合、次のコマンドを使用できます:
div.aaa>ul>li
次の構造を生成できます:
<div class="aaa"> <ul> <li></li> </ul></div>
兄弟を生成: +
The上記は下位要素を生成するためのものです。水平要素を作成するには、+ 記号を使用する必要があります。たとえば、次のコマンド:
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 に対して水平方向の要素を生成したい場合は、別のレベルに移動して追加の "^" 記号を使用します:
div>ul>li^^span
複数の要素を生成するには繰り返します。コピー: *
特に順序なしリストの場合、ul の下に複数の li が存在する必要があり、通常は多数の 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 属性と、href を「http://blog.wpjam.com」、タイトルを「」とする a タグを生成する場合は、title 属性を付ける必要があります。煮魚が大好きです」という場合は、次のように書くことができます:
a[href="http://blog.wpjam.com" title="我爱水煮鱼"]
他のタグと属性も同様です。
生成されたコンテンツに番号を付けます: $
たとえば、順序なしリストで、クラス属性値 item1 を 5 li に追加し、その後 1 から 5 まで順番に増加させたい場合は、$ 記号を使用する必要があります。
ul>li.item$*5
生成方法は以下の通りです。
$ は 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
生成されるのは、base を使用した逆順です3:
テキスト コンテンツを生成する: { }
上記では HTML タグを生成する方法を説明しましたが、その中のコンテンツはどうなるのでしょうか?もちろん、次のように生成することもできます:
a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼} これにより、I Love Boiled Fish へのハイパーリンクが生成されます。コンテンツを生成するときは、前後のシンボリック関係に特に注意してください。a>{Click me} と a{Click me} によって生成される構造は同じですが、他のコンテンツを追加する場合は必ずしも当てはまりません。
すごいこれにより、まったく異なる構造が生成されます。これらの細かい点に注意してください。
不要有空格
在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：
(header > ul.nav > li*5) + footer
而去掉空格之后，就可以正常执行生成结构了
转自我爱水煮鱼博客