Emmet プラグインはより実用的で一般的に使用される記述方法です

Emmet プラグインの作成方法についていくつかのドキュメントを読みましたが、どうしてこんなに長いのでしょうか?実は、いくつかの一般的なポイントを知って練習すれば、基本的に手書きで書き始めることができます

雑言

以前の記事 [今日の新しい世界の発見: haml と Emmet] は、実際、最初のアイデアは自分のために書くことでした。

私のブログやコメントを読んでくださる方もいますが、決して多くはありませんが、私のような初心者にとってはとても嬉しいことです。あまりの嬉しそうな表情のせいで、男性ファンからはよくバカと言われます…ㄟ(⊙ω⊙ㄟ)

さて、道に迷ってしまいました。つまり、これからは、自分のために何かを書いても、他人のために何かを書いても、それは良いことなのです。シェアの精神を大切に、丁寧に丁寧に書きましょう(~Q~)

エメットについて Emmet プラグインの前身は、フロントエンド開発の効率を大幅に向上させるツールである Zen コーディングです。これは、jade (高性能テンプレート エンジン) に似ていると言う人もいます。Haml の影響を深く受けています。 JavaScript で実装されており、Node を使用して使用できます。公用語での公式ツイッターについては詳しく書きませんが、Baidu で直接見つけることができます。

Emmet がサポートするエディター:

崇高なテキスト 2

• TextMate 1.x
• エクリプス/アプタナ
• Coda 1.6 および 2.x
• エスプレッソ
• ショコラ (「Install Mixin」ダイアログで追加)
• Komodo Edit/IDE ([ツール] → [アドオン]メニューから追加)
• メモ帳++
• PSPad
• <テキストエリア>
• コードミラー2/3
• ブラケット

サードパーティのプラグインのサポート 以下のエディター プラグインはサードパーティ開発者によって提供されているため、Emmet のすべての機能をサポートしているわけではない可能性があります。

シンライト

• ウェブストーム
• PhpStorm
• ヴィム
• HTMLキット
• カバ編集
• CodeLobster PHP 版
• タイニーMCE

Emmetのインストール方法（Sublime text 3にemmetプラグインをインストールする方法：http://blog.csdn.net/mengke1124/article/details/41696779）

私は Sublime text 3 を使用しているため、必要に応じて他のエディターのインストール方法をオンラインで検索する必要がある場合があります

Emmetプラグインの実用的で一般的な方法

（http://www.w3cplus.com/tools/emmet-cheat-sheet.html）

このドキュメントは非常にわかりやすく書かれており、プラグインをインストールする方法も記載されています。ただし、紹介した方法が多すぎて少し長く感じますが、個人的により実践的で一般的に使用されていると思われる方法をいくつかまとめました。

短縮版:

div>(header>ul>li*2>a)+footer>p(+記号は次の兄弟要素を接続します)
(div& gt;dl>( dt+dd)*3)+footer>p(カッコ内のグループ)
ul>li$[title=item$]{hh $}*5(li$、liの意味+1 ずつ増加)
h.item${haha $}*5({}括弧は表示テキストです)
ul>li.item$$$*5 ($は自己インクリメント、3つの$は3桁を意味します)
ul>li.item$@3*5(@は3から始まり自己インクリメント+1)
ul>li .item$@-*5(@-, 自動減少)
ul>li.item$@-3*5(@-3, 自動減少の最小数は 3 です) )
form#search.wide(#はID、.はクラス)
p[title='hello word'](カスタム属性)

(暗黙のタグ)

.class
em>.class
ul>.class
table>.row>.col
!(ページhtml開始コードの省略形)
(省略形)
a
a:link
hr
link
link。 css
meta:utf
script:src
img

詳細版:

div+div>p>span+em^bq (^は上位要素)

リーリー

div+div>p>span+em^^bq

リーリー

ul>li*5 (>は子孫の略、*は何人いるかを示します)

リーリー

div>(header>ul>li*2>a)+footer>p(+ 記号は次の兄弟要素を接続します)

リーリー

(div>dl>(dt+dd)*3)+footer>p(括弧はグループです)

リーリー

ul>li$[title=item$]{hh $}*5(li$、liが+1増加することを意味します)

リーリー

h.item${haha $}*5 ({}括弧は表示テキストです)

リーリー

ul>li.item$$$*5 ($は自己インクリメントを意味し、3つの$は3桁を意味します)

リーリー

ul>li.item$@3*5(@3から+1ずつ増加)

リーリー

ul>li.item$@-*5(@-,デクリメント)

リーリー

ul>li.item$@-3*5(@-3、デクリメントする最小数は 3)

リーリー

form#search.wide (#はID、.はクラス)

リーリー

p[title='hello word'](カスタム属性)

リーリー

(暗黙のタグ)
.class

リーリー

em>.class

リーリー

ul>.class

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="class"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

table>.row>.col

<span style="color: #0000ff;"><</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

!(页面html开始代码缩写)

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

(缩写)
a

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

a:link

<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

hr

<span style="color: #0000ff;"><</span><span style="color: #800000;">hr</span><span style="color: #0000ff;">></span>

link

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>

link.css

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="css"</span><span style="color: #0000ff;">></span>

meta:utf

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=UTF-8"</span><span style="color: #0000ff;">></span>

script:src

<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>

img

<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>

 

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

 

(●-●) 真心讨厌弄文本格式，感觉好浪费时间……