简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンド開発ツール: Emmet 紹介_html/css_WEB-ITnose

フロントエンド開発ツール: Emmet 紹介_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:50:081246ブラウズ

Emmet はフロントエンド開発の効率を向上させるエディター プラグインで、Sublime、Atom、TextMate、Nodepad++ などの主流のエディターをサポートします。 Emmet はいくつかの略語を定義しています。略語コードを入力して展開キー (デフォルトは Tab キー) を押すと、完全なコードが展開されます。たとえば、HTML ファイルに ul.list>li{$th}*2 と入力し、展開キーを押すと、次のコードに展開されます 

<ul class="list">  <li>第1个</li>  <li>第2个</li></ul>

CSS ファイルに posa と入力しますと展開すると、 

position: absolute;

便利ですね～

Emmet の HTML 略称は、CSS セレクター形式の記述をサポートしています。たとえば、ID が box、クラス名が news-box の div を書きたいとします。div の下に a 要素があり、その href は xxx です。 div#box.news-box>a[href=xxx] と記述するだけです。これは CSS セレクターとまったく同じです。

Emmet が提供する一般的に使用される略語をいくつか示します。

HTML の略語

html:5 は 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title></head><body></body></html>

link:css は 

<link rel="stylesheet" href="style.css">

btn は 

<button></button>
select+ は 

<select name="" id="">  <option value=""></option></select>
ul+ は 

<ul>  <li></li></ul>
ol+ は 

<ol>  <li></li></ol>
dl+ は

table+ は 
<dl>  <dt></dt>  <dd></dd></dl>

tr+ は 
<table>  <tr>    <td></td>  </tr></table>

cc:ie6 は 
<tr>  <td></td></tr>

cc:ie は 
<!--[if lte IE 6]><![endif]-->

cc:noie は 

<!--[if IE]><![endif]-->

CSS 省略形

<!--[if !IE]><!--><!--<![endif]-->
ボックスモデル関連

d に展開されて表示されます: block;

    d:n は、display:none に展開されます。
    • d:f は、display:flex に展開されます。
    • d:i は、display:inline に展開されます。
    • d:ib は、展開されます。表示の場合: inline-block;
    • fl は float: left に展開されます。
    • fl:r は float: right に展開されます。
    • fl:n は float: none に展開されます。
    • pos は、position:relative に展開されます。
    • pos:a は、position:absolute に展開されます。
    • pos:f は、position:fixed に展開されます。
    • mマージンまで展開: ;
    • m:a マージンまで展開: auto;
    • mt margin-top まで展開: ; タイプには mt、mb、mr
    • p が含まれますパディング: ; その他およびマージンのタイプ
    • bxz ボックスサイズに展開: border-box;
  • フォント関連

f フォントに展開: ;

    fz は font-size: ;
    • ff は font-family: ;
    • fs は font-style: italic に展開されます;
  • テキスト関連

va は、vertical-align: top に展開されます。

    va:m は、vertical-align: middle に展開されます。
    • ta は、text に展開されます- align: left;
    • ta:c は text-align: center に展開されます。
    • td:n は text-decoration: none に展開されます。
    • wos は word -spacing に展開されます: ;
    • c はカラーに展開します: #000;
    • c:r はカラーに展開します: rgb(0, 0, 0);
    • c:ra はカラーの場合に展開します: rgba(0, 0, 0, .5);
    • op は不透明度に展開されます: ;
    • op+ は 
  • opacity: ;filter: alpha(opacity=);
    background
    • に展開されます

bg は背景に展開されます: #000;

    bg+ は背景に展開されます: #fff url() 0 0 no-repeat;
    • bgc は背景色に展開されます: # fff;
    • bgi は、background-image に展開されます: url();
    • bgr は、background-repeat に展開されます: ;
    • bgp は、background-position に展開されます: 0 0 ;
    • bgsz は背景サイズに展開します: ;
  • 境界線と輪郭

bd は境界線に展開します: ;

    bd+ 境界線の場合に展開します: 1px ソリッド #000;
    • bd:n はボーダーに展開されます: none;
    • bdl はボーダー左に展開されます: ;
    • bdl+ はボーダー左に展開されます: 1px ソリッド#000;
    • bdrs は border-radius に展開されます: ;
    • bdc:t は border-color: 透明に展開されます;
    • ol はアウトラインに展開されます: ;
  • List

lis は list-style に展開します: ;

    lst は list-style-type に展開します: ;
    • list:n に展開しますlist-style-type:none;
  • その他

! important

    anim に展開します アニメーションに展開します: ;
    • anim- アニメーションに展開します:名前 継続時間 タイミング-関数 遅延 イテレーション数 方向 フィルモード;
    • trf を変換して展開します: ;
    • trf:r 展開して変換します:回転(角度);
    • trf:rx は、transform に展開します:rotateX(angle);
    • trf:sc は、transform に展開します:scale(x, y);
    • trf:t 展開は、transform です:translate(x, y);
    • trf:t3 は、transform:translate3d(tx, ty, tz);
    • trs に展開され、transition:prop time;
    • us は user-select: none に展開されます。
  • @m は

@kf は、上記の省略形の場合 

@media screen {}

に展開されますは展開され、ブラウザーのプレフィックス (ベンダープレフィックス付き) とともに生成されます。

Emmet 的命令

  • 展开缩写 Tab
  • 每按一下，扩大选择范围：选择当前元素及其父级元素 ⌃D / Ctrl+,
  • 每按一下，缩小选择范围：选择当前元素的第一个字元素 ⌃J / Shift+Ctrl+0
  • 光标移动移动至匹配的标签，多次按时在标签内容的结尾和标签的头部位置切换 – ⇧⌃T / Ctrl+Alt+J
  • 用简写来包裹选中内容 — ⌃W / Shift+Ctrl+G
  • 光标到下一个编辑点。编辑点指的是，没有内容元素内部 — Ctrl+Alt+→ 或 Ctrl+Alt+←
  • 选择元素。多次按会在元素，元素属性，元素属性值之间切换 – ⇧⌘. 或 ⇧⌘, / Shift+Ctrl+. 或 Shift+Ctrl+,
  • 删除标签，但不包括其innerHTML的内容 – ⌘' / Shift+Ctrl+;
  • 数学表达式求值。如：3+2 求值 5 — ⇧⌘Y / Shift+Ctrl+Y
  • 重构CSS3带浏览器前缀（vendor-prefixed）的值 – ⇧⌘R / Shift+Ctrl+R
  • 修改标签的名称 – ⇧⌘K / Shift+Ctrl+'

增减数值类别

  • 增加1: Ctrl+↑ 这个与Mac的按键冲突，需要修改快捷键
  • 减少1: Ctrl+↓
  • 增加0.1: Alt+↑
  • 减少0.1: Alt+↓
  • 增加10: ⌥⌘↑ / Shift+Alt+↑
  • 减少10: ⌥⌘↓ / Shift+Alt+↓
  • ⌃W / Shift+Ctrl+G

注：/ 左边是Mac的快捷键，右边是Windows的快捷键

浏览器前缀补全

-浏览器前缀-属性名其中浏览器前缀包括

  • w: webkit
  • m: moz
  • s: ms
  • o: o

例如： 输入 -wm-somepop + Tab 展开为

-webkit-somepop: ;-moz-somepop: ;somepop: ;

渐变（Gradients）

lg(属性)如 bg:lg(to right, #f60,#f00); + Tab 展开为

background:-webkit-linear-gradient(left, #f60, #f00);background:-o-linear-gradient(left, #f60, #f00);background:linear-gradient(to right, #f60, #f00);

附：Mac上图标与按键的对应

  • ⌘ Command 键
  • ⌃ Control 键
  • ⌥ Option 键
  • ⇧ Shift 键
  • ⇪ Caps Lock
  • fn 功能键

想了解更多见 Emmet 文档中心 -> http://docs.emmet.io/ 。所有的快捷键 -> http://docs.emmet.io/cheat-sheet/ 。

本文遵守创作共享CC BY-NC-SA 4.0协议网络平台如需转载必须与本人联系确认。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：超実用的！あまり知られていない HTML 5 設計の 12 のヒント_html/css_WEB-ITnose次の記事：超実用的！あまり知られていない HTML 5 設計の 12 のヒント_html/css_WEB-ITnose

関連記事

続きを見る