ホームページ >ウェブフロントエンド >htmlチュートリアル >括弧内での Emmet_html/css_WEB-ITnose の使用
Brackets に Emmet プラグインをインストールした後、Emmet の構文を使用してフロントエンドの記述を高速化できます。
HTMLについて
● サブリレーションシップ>
div>ul>li
●隣接+
div+p+bq
● 前のレベル^
div+ div>p>span+ em^bq
● リピート*
ul>li*5
● Group()
div>(header>ul>li*2)+footer>p
●クラス
div.demo
● ID
div#demo
● Index$
ul>li.item$*5
ul>li.item$$$*5
ul> ;li.item$@ -*5 逆順に並べ替えます
ul>li.item$@3*5 3 から始まります
● Text
a{click me}
● 親要素で Emmet を使用します
の略称
など、ul, olにliを追加、table, tbody, thead, tfootにtrを追加、trにtdを追加、selectにオプションを追加
● テキスト例
p*4> lorem
css について
● -bdrs、オートコンプリートは:
-webkit-border-radius: ;
-moz-border-radius: ;-ms -border-radius: ;
- o-border-radius: ;border-radius: ;
● -foo、オートコンプリートは:
-webkit-font: ;
-moz-font: ;-ms-font: ;
- o-font: ;font: ;
● -super-foo、オートコンプリートは:
-webkit-super-foo: ;
-moz-super-foo: ;-ms-super-foo : ;
-o-super-foo: ;super-foo: ;
● -wm-trf、次のように自動的に完成:
-moz -transform: ;
transform: ;
● lg(left, #fc0 30%, red)、オートコンプリートは次のとおりです:
background-image: -o -linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(to right, #fc0 30%, red);
● border -image: lg(left, #fc0 30%、赤)、自動補完は次のとおりです:
background-image: border-image: -webkit-linear-gradient(left, #fc0 30%, red);
background-image: border-image: -o- Linear-gradient(left, #fc0 30%, red);background-image: border-image: Linear-gradient(to right, #fc0 30%, red);
● ovh、オートコンプリートは次のとおりです。
overflow: hidden;
関連操作
● 外側選択
ctrl+alt+B
● 内側選択
ctrl+alt+shift+B
● ペアになっている要素タグ間をジャンプします
ctrl+shift+T
● 既存の要素をラップする
既存:
→ 最初の p と >
の間にマウスを置きます→ ctrl+shif+A
→ .wrapper>h1{タイトル}+ .content
& lt; hello world & lt;/p & gt; ;/div & gt;
& lt;/div & lt;/div & gt; + .
● 要素を 1 つずつ選択します
ctrl+shift+,
● コメントを解除
ctrl+/
● タグを削除
ctrl+shi ft+K
● マージ複数行
ctrl+shift+M
●値を変更
ctrl+shif+矢印キー、10単位
ctrl+shift+alt+矢印キー、0.1単位
参考： http:// docs.emmet.io/