不明なエメット文法規則

この記事では、HTML 短縮表現 Emmet の文法規則を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Emmet — HTML/CSS の記述は非常に速いです

フロントエンド開発のプロセスで最も時間のかかる作業は、HTML と CSS の記述です。 CSSコード。たくさんのタグ、属性、括弧などがあり、頭痛の種です。ここでは、Emmet の文法ルールをお勧めします。これを使用すると、書くときにとても楽しい気分になります。これにより、コードの作成が大幅に向上します。コードを 1 行入力するだけで、必要な完全な HTML 構造を生成できます。以下にその方法を紹介します。これを使って。

Emmet は、インストールできるエディターで使用できるプラグインです。ほとんどのエディターでこの文法規則を使用できます。通常、Sublime Text、Eclipse、Notepad、VS code、Atom、Dreamweaver などを開発しています。エディターを使用できます。

インストール方法は通常のプラグインのインストールと同じです。このemmetプラグインのインストールを検索してください。エディタごとにインストール方法が異なります。それぞれ試してみてください。

1: html の初期構造

下の図の構造であれば、めんどくさい人でもこれに従うだけです。 => タブ ソリューション。基本構造を素早く生成し、手書き時に特定のコード ブロックを忘れたり、間違ったコードを入力したりすることを防ぎます。

2: id（#）,class（.）

id ​​コマンド:#; クラス コマンド:.

• p#test

<p id="test"></p>

• p.test

<p class="test"></p>

3: 子ノード (>)、兄弟ノード ( )、上位ノード (^)

子ノード コマンド:> ; 兄弟ノード コマンド: ; 上位ノード:^

• p>ul>li>p

<p>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </p>

• p ul p

<p></p>
<ul></ul>
<p></p>

• p>ul>li^p (ここの ^ は li の後に接続されているため、li の 1 レベル上、ul彼らは兄弟になりました、もちろん 2 人 ^^ は上司です)

<p>
   <ul>
     <li></li>
   </ul>
   <p></p>
 </p>

4: 繰り返し (*)

コマンドを繰り返します: *

• p*5 (繰り返される要素の数を示すために * 記号の後に数字を追加します)

   <p></p>
   <p></p>
   <p></p>
   <p></p>
   <p></p>

5: グループ化 (())

グループ化命令: ()

##p>(ul>li>a) p>p
• (括弧内の内容はコード ブロックであり、内側と外側のネストのレベルを示します)括弧 無関係)
  

<p>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <p>
     <p></p>
   </p>
 </p>

説明: ここに括弧がない場合、p と p は a の兄弟であり、li に含まれると考えられます。わかりました、はははは

 <p>
   <ul>
     <li>
       <a href=""></a>
       <p>
         <p></p>
       </p>
     </li>
   </ul

6: 属性 ([attr]) - ID、クラス、どうすれば属性を見逃すことができますか?

Attribute コマンド: []

a[href='
• ' name='xiaoA'] (属性のキーと値のペアの形式を角括弧で囲み、スペースで区切って入力します)

<a href="###" name="xiaoA"></a>

6: 数値 ($)

番号付けコマンド: $

• ul>li.test$*3 ($ は 1 桁を表し、その後の * 数字は以降の増加を表します) 1 から入力された数字まで)

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

注:

• A $ は 1 桁の数字を表し、$$ は 2 桁の数字を表し、以下同様に $( 1 ),$$(01),$$$(001)
• 
  増分元の数値をカスタマイズする場合は、$@ number*number
を使用します。 例: ul>li* 3.test$ @3

 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

7: テキスト ({})

テキスト コマンド: {}

• ul> ;li.test $*3{Test$} ({中に内容を記入してください。$ と組み合わせることができます})

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

8: 暗黙のタグ

this タグには命令がありませんが、タグによってはinputタグを使わずに直接命令を入力することで親タグを特定できるものもあります。

例: .test

<p class="test"></p>

例: ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

例: select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

など。お待ちください...

プライバシー タグは次のとおりです:

• li: ul および ol
• tr: table、tbody、thead で使用されます。および tfoot
td: tr
• option で使用: select および optgroup で使用

推奨される学習: html ビデオ チュートリアル

###

以上が不明なエメット文法規則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。