前述した「超高速フロントエンド開発ツールEmmet」では、Emmetおよびエディタでのインストールについて簡単に説明しましたが、今日はEmmetでHTMLコードを超高速で作成する方法を見てみましょう.
略語はEmmetツールの核心であり、これらの特殊な表現はEmmetによって解析され、構造化されたコードブロックに変換されるが、文法はCSSセレクタ、HTMLラベル、いくつかのEmmet特定のコードで生成されるため、どのフロントエンド開発者にも簡単に把握し、使用することができる.ラベル名をdiv、pなどとして使用してHTMLラベルを生成できます.Emmetには事前に定義されたタグ名のセットがありません.単語を作成してラベルに変換できます.たとえば、次のようになります.div → , footer →
Emmetコードには特定のラベルはありませんが、作成には一定のルールとテクニックがあります.
HTMLファイルを生成する初期構造:以前はソフトウェアで直接HTMLドキュメントを作成していましたが、初期構造は生成されましたが、一部のエディタではこの機能を持たず、手動で入力するのは苦痛で、Emmetがあればすべてがこんなに簡単になります.HTML 4(遷移)構造の初期文書を生成するには「html:4 t」、HTML 4(厳密)構造の初期文書には「html:4 s」と入力するだけで、標準的なHTML 4(厳格)標準構造を生成します.

HTML 5は簡単で手間が省けます.HTML 4の入力形式「html:5」のように、HTML 5は「!」を入力するだけで、HTML 5ドキュメントの初期構造を生成することができます.

1.親子関係:>、使用>オペレータによって内部にネストされたラベル:div>ul>li
生成されます.

2.兄弟関係:+、+オペレータを使用してラベルを同じレベルにします.div+p+footer
生成されます.

生成兄弟关系时，像ul dl这样的列表标签，使用+操作符将生成一个标准的列表结构：

ul+

将生成：

dl+
生成されます.

3.親関係:オペレータを使用して、ラベルを前のラベルの親と同じレベルにします.div+div>p>span+em^bq
生成されます.

2^オペレータを使用すると、前のラベルのおじいさんレベルと同じレベルになります.div+div>p>span+em^^bq
生成されます.

4. 乘法：，使用操作符可以输出多个标签：**

div>ul>li*5

将生成：

5.グループ化:()、()オペレータでグループ化し、作成されたコード構造をより明確にし、明瞭にし、ラベルのセットは1つの要素に相当する.div>(header>ul>li*2>a)+footer>p
生成されます.

複数の()を使用し、乗算*オペレータを使用できます.(div>dl>(dt+dd)*3)+footer>p
生成されます.

CSSセレクタ、ラベルにidとclassセレクタを指定し、ラベルの後ろに直接追加するだけですが、.または#で始まる必要があります.div#header+div.page+div#footer.class1.class2.class3
生成されます.

Emmet默认的标签是div，所以我们在写带有CSS选择器的div标签时，可以省去div，你可以试试。
自定义属性：[]（英文下的中括号），使用[]操作符给标签添加自定义属性：

td[title="Hello world!" colspan=3]  


   ：


  

好きな属性の一部を[]に配置できます.属性値を指定しないと、コードは属性値を持たないHTMLデフォルトラベルを生成します.
td[colspan title]
生成されます.
属性値には、単一引用符または二重引用符を使用する必要があります.そうしないと、考えられる効果が得られます.
6.項目番号:ラベルに順序リストを生成させ、数値を出力する.ul>li.item$*5
生成されます.

無秩序リストの生成に加えて、他のラベルも同じです.h$[title=item$]{Header $}*3
生成されます.

Header 1
  
Header 2
  
Header 3
  

複数の$オペレータを使用して0(ゼロ)で数値を入力することもできます.ul>li.item$$$*5
生成されます.

7.リストの開始番号と順序を変更するには、次のコードを見ると一目瞭然です.数字の逆順は、前に@-:*を追加するだけです.ul>li.item$@-*5
生成されます.

開始番号、前に@開始番号を追加:*ul>li.item$@3*5
生成されます.

また、先頭の数字が3のリストから逆順になると、上のEmmetコードitemの後ろの数字を@-3*5と書くだけです.
8.テキスト:{}で、カッコを使用してテキスト要素を追加します.a{Click me}
生成されます.Click me
注意:{}を個別のオペレータとして使用すると、a{click}とa>{click}は同じラベルを生成しますが、複数のオペレータを使用する場合、または他のオペレータを使用する場合、異なるラベルが生成されます.

  
clickhere  

  
clickhere  

要素が+で接続されている場合、テキスト{}が正しく記述されている場合、ラベルの階層関係は変更できません.p>{Click }+a{here}+{ to continue}
生成されます. Click here to continue
a、img、link、inputなどの特殊なラベルタイプについては、Emmetプラグインを作成する際に基本的な構造を作成しています.たとえばaラベルは、編集にaを入力すると、基本的なaラベルに解析されます.
aラベルにはいくつかの属性値があり、Emmetコードの作成時にこれらの値を追加してデフォルトの属性値を上書きすることができます.a[href="http://salonglong.com" title=" " class="logo"]{ }
生成されます. くの
属性値は省略できないので、属性値を記述するのは似ているように見えます.多くの場合、ラベル名とEmmetコードの入力をスキップして、次の例のようなHTMLコードを得ることができます.

  
    .item   
  

.item  

  
    .item   
  

生成されます.

上記の例から、プラグインはidまたはclassが存在する親ラベルに基づいて対応するラベルを生成します.この書き方もHTMLの作成規則に従っており、次のコードでより理解できます..wrap>.content div.wrap>div.content em>.info em>span.info ul>.item*3 ul>li.item*3 table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2] ：

CSSセレクタのブロックレベル要素のデフォルトのHTMLラベルはdivであり、インラインレベル要素のspanであり、HTMLのいくつかの特殊なラベル:ul li、table tr tdに対して、対応する内部ラベルが生成されることを理解する必要があります.この記事では、HTMLの基本ラベルがEmmetの下にある書き方を紹介しています.サロンロンはそれを学習ノートとして、いつでも見ることができます.あなたに役に立つならもっといいです.Emmetがコードを記述するフォーマットで最も重要なのは、スペースがないことです.スペースがあるとHTMLコードが完全に解析され、生成されません.Emmetの最も核心的なのは略語で、それも1つの言語に属していないで、書く時も強い可読性を必要としないで、最も重要なのは高速にHTMLコードを生成することができます.もっと練習して、公式の英語のドキュメントをたくさん見て、すぐにEmmetの作成方法をマスターして、同時にあなたの先端の開発速度を大幅に向上させます.
テキストリンク