HTMLプラグインエメットをすばやく開発する(知っておく必要があります)

グループの友達の一人が尋ねるのは本当ですか:

教師、教師はどのようにビデオに入力でき  ul>li*6  ますか?出られないの?

外に出られない理由は言わないでください、これは私です...(少しは言いたくありません)

私が伝えたいのは、なぜそれが出てくるのかということです。

通常私たちが開発をしているとき

  • 最も時間のかかる作業は、HTMLおよびCSSコードの記述です。タグ、属性、ブラケットなどの束、頭痛。
  • 私はよくhtmlを繰り返し構造で書きます。重複するコードをすべてコピーして貼り付けると、非常に面倒になります。

また、プログラマーは非常に怠惰であることも知っています。

それで emmet というプラグインがあります、それをインストールしていないと言いたいですか?このツールのほとんどのエディターは組み込みですのでご安心ください。

hbuilderX例:Sublime TextNotepad++VS code、、Dreamweaver とのようにします。

次に、このプラグインのemmetの使用法を見てみましょう!

エディターで新しいhtmlファイルを作成し、基本的なhtml構造コードを作成して、私と一緒にエメット を体験してください 

 

正しい!そうです、1つ目は、私たちがよく使用するhtmlの初期構造です。このhtmlの初期構造は、毎回手を入力したい場合は、それについて考えてください。

vscode 例:直接1つ!次に、Tabキーを押して戦闘を解決します。
hbuilderX 例:HTMLを送信しEnterキーを押し て戦闘を解決します。

文法規則について話し始めます。

最初に発生した問題の解決を開始します

1.子孫の入れ子

あなたが書きたい場合はulul内部ライトaをlili書き込みの内側にspan、することができます

HTMLドキュメントに入力し  ul>li>span、その後、あなたの押しtabキーを、以下のコードが生成されます

2.ブラザー

書きたい場合はh2、以下に従ってくださいp

HTMLドキュメントに入力し  h2+p、その後、あなたの押しtabキーを、以下のコードが生成されます

3.グループの入れ子

合計divを書きたい場合h2p

htmlドキュメントを入力し、  div>(h2+p)タブキーを押すと、次のコードが生成されます。

4.乗算

あなたの問題を解決するために是非!

あなたが書きたい場合はulul内部の書き込みよりli、各li書き込みの内側にはspan、どのようにそれを書くには?

私たちは、HTML文書に入力し ul>li*5>span、その後、あなたの押すtabキーは、以下のコードが生成されます。

これは便利ですか?tableフォームを書くときにも役立ちますか?

役立つヒントはたくさんあります。続けましょう。

5.自動成長

1つ作成したい場合ul、その中に5 liありli、クラス名はまだitem-1このフォームに似ています

HTMLドキュメントに入力し  ul>li.item-$*5、その後、あなたの押しtabキーを、以下のコードが生成されます。

6、IDおよびクラス

div#box

<div id="box"></div>

div.box

<div class="box"></div>

7.テキスト

div{test}

<div>test</div>

上記はemmet一般的な構文です!

おすすめ

転載: blog.csdn.net/GUDUzhongliang/article/details/108580539