Sublime Text 3-共通プラグインEmmet

サマリ
インストールは前のSublime Text-インストールを見てください.sublimeがショートカットキーを持っているのと一緒に使って、htmlを書くのはとても速いです.
以下はよく使われる、完全なemmet公式ドキュメントを整理します.
一、ラベルの生成
1.文書構造の迅速な生成

!またはhtml:5は、HTML 5構造(tabキーを押す必要がある)

を迅速に生成する.

html:xt HTML 4遷移型

を生成する.

html:4s HTML 4厳格型

を生成する.
2.id付き要素の生成
ラベル#ID名、例えば:div#header

3.生成带 class 的元素

标签 . 类名，如：div.title

4.生成后代元素：>

如：nav>ul>li

5.兄弟要素の生成:+
例えば:div+p+div

6.生成上级元素：^

如：p^div

7.重复生成多个元素：*

如：ul>li*5

8.カスタム属性を生成する:[attr]
例えば:div[value=1]

9.生成带文本内容：{}

如：a{Click me}

Click me

10.プラス番号:$

1 1から:

ドル加算
例えば:div.item${$$}*3

01
02
03

逆順:$後に@-

を追加
例えば:div.item$@-{$$@-}*3

03
02
01

指定シーケンス番号:@N

を使用可能
例えば:div.item$@4{$$@4}*3

04
05
06

11.グループ化:()
例えば:(ul>ol)*3

12.来个综合案例

table#tab[value=1].a>tr*3>(td{$$}>span)*3

    

        
01
        
02
        
03
    
    

        
01
        
02
        
03
    
    

        
01
        
02
        
03
    

二、cssを生成する
cssスタイルが多く、略語も自然に多いので、よく使われるものを挙げて3を挙げるといいです.
ここでcssの略語は、ov:h==ov-h==ovh==ohなどのファジイ検索マッチングを用いる.

w10 width: 10px; w10p width: 10%; w10e width: 10em; w10x width: 10xe;

h10 height: 10px;

por position: relative; poa position: absolute;

fll float: left; fr float: right;

dt display: table; db display: block; dib display: inline-block;

ovy overflow-y: hidden;

cb clear: both;

mt margin-top: ; mb margin-bottom: ;

pt padding-top: ; pb padding-bottom: ;

tac text-align: center;

lh line-height:;

tsn text-shadow: none;

tja text-justify: auto;

c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);

op opacity: ;

cnt content: '';

ol outline: ;

bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;

bd2px#333s border: 2px #333 solid;

三、ショートカットキー
機能しない場合は、ショートカットが競合しているかどうかを確認します.

小包ラベルをすばやく生成:Ctrl+Shift+G

テキストのみ構造がない場合は、次のようになります.

テキストを選択してショートカットキーCtrl+Shift+Gを押して、ポップアップします:Enter Wrap Abbreviation(拡張略語入力)にnav>ul>li.item$*>aと入力すると生成されます

元のテキストに番号がついていて、望まない場合は上記に|t、nav>ul>li.item$*>a|tを加えて、上記の結果を生成することができます.

1  
2  
3  

画像サイズの自動追加/更新:ctrl+U(ラベル上の任意の位置にカーソルを移動し、ショートカットキーを押すだけ)

削除ラベル:shift+ctrl+;

前の編集ポイントにナビゲート:ctrl+alt+left

次の編集ポイントにナビゲート:ctrl+alt+right

次を選択:shift+ctrl+.

プラス/マイナス1:ctrl+up/ctrl+down

プラス/マイナス10:shift+alt+up/shift+alt+down

展開略語:ctrl+e(tabキーと同じ)

名前変更ラベル(rename_tag):ctrl+shift+'

交換ラベル(update_as_you_type):ctrl+Shift+U

一致ラベルペア:ctrl+alt+j

四、テストテキストの生成loremを入力してtabを押すとランダムに英語が生成され、デフォルトでは30単語が生成され、lorem5などの数字を加えて単語の数を制御することができます.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!

Lorem ipsum dolor sit amet.

2017.09.18補足内容
以上のようにloremを入力してtabで拡張するコードはすでに設定されており、sublimeはカスタムコードクリップの機能も提供しています.詳細はSublime Text 3-カスタムコードクリップ(Code Snippets)に移行してください.
リファレンス
emmet公式ドキュメント
掘金:Sublime Text 3-常用プラグインEmmet:Sublime Text 3-常用プラグインEmmetブログ園:Sublime Text 3-常用プラグインEmmet