コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル Emmet プラグイン: HTML/CSS コードの簡単な記述 artifact_html/css_WEB-ITnose

Emmet プラグイン: HTML/CSS コードの簡単な記述 artifact_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:47 AM

 

 

Emmet插件的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： 

该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。 


一、快速编写HTML代码 

1.  初始化 

HTML文档需要包含一些固定的标签，比如、、等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： 



  • html:5 或!：用于HTML5文档类型
  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型

    • 2.  轻松添加类、id、文本和属性 

    连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： 



    连续输入类和id，比如p.bar#foo，会自动生成： 

    Html代码 

    1.   


    下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： 

    Html代码 

    1. foo

        
    2.   

     



    3.  嵌套 

    现在你只需要1行代码就可以实现标签的嵌套。 

  • >：子元素符号，表示嵌套的元素
  • +：同级标签符号
  • ^：可以使该符号前的标签提升一行

    • 效果如下图所示： 



    4.  分组 

    你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码： 

    Html代码 

    1.   
    2.   

        
      
  •   
  •   

      
  •   

     



    5.  隐式标签 

    声明一个带类的标签，只需输入div.item，就会生成

    。 

    在过去版本中，可以省略掉div，即输入.item即可生成
    。 .item のみを入力すると、Emmet は親タグに基づいて判断します。たとえば、
      に .item と入力すると、
    • が生成されます。



      以下はすべて暗黙のタグ名です:

    • li: ul および ol で使用されます
    • tr: table、tbody、thead、および tfoot で使用されます
    • td: tr Medium で使用されます
    • オプション: select および optgroup で使用されます

      • 6. 複数の要素を定義します

      複数の要素を定義するには、* 記号を使用できます。たとえば、ul>li*3 は次のコードを生成できます。 t; li> 属性を持つ複数の要素を定義する

      ul>li.item $*3 と入力すると、次のコードが生成されます:

          • & lt;li class="item1">
          • li class= "item2">
        ;
        3. // もちろん、これを ul>li#item $*3 に変更することも可能で、結果は次のようになります



      • & lt;/ul & gt;生成



        CSS コード


        width: 100px;

        1. px に加えて、次のような他の単位も生成できます。 h10p+m5e と入力すると、結果は次のようになります。以下:
          5. CSS コード

        高さ: 10%;

        マージン: 5em; ユニットエイリアスリスト:




        p は %
        を意味します

        e は em

        x を意味します単位を追加しない ex

        px または px を意味します // Kerita は



        を追加しました 2. 追加の属性
        以下を生成できる @f などの略語をすでにご存知かもしれません:



        CSS コード

        @font-face {

        font-family:;

        src:url()
        1. }

        他の属性 (background-image、border-radius、font、@font など) - 顔、テキストアウトライン、テキストシャドウなどの追加オプションは、「+」記号を使用して生成できます。たとえば、@f+ と入力すると、




        CSS コード

        @font が生成されます。 -face {

        フォントファミリー: 'フォント名';

          src: url('FileName.eot');
          2. src: url('FileName.eot?#iefix') format('embedded-opentype'),
          3. url(' FileName.woff') format('woff'),

        url('FileName.ttf') format('truetype'),


        url('FileName.svg#FontName') format('svg ');

        フォント スタイル: 標準;

        }



      • 3. あいまい一致

        一部の略語がわからない場合、Emmet は入力 ov:h、ov-h、ovh、生成されたコードなどの入力内容に基づいて最も近い構文を照合します。同じです:

        CSS コード

        1. overflow: hidden;


        4. W3C 標準以外の CSS 属性を入力すると、Emmet は自動的にtrs を入力するなどのベンダー プレフィックスは次を生成します:


        Css コード

        -webkit-transform: ;

        -ms-transform: ;

        -o-変換: ;

          変換: ;たとえば、「-super-foo:
          4. CSS コード
        -moz-super-foo: ;」と入力します。

        -o-super-foo:;

        super-foo:


        -webkit-transform: ;


        接頭辞の省略形は次のとおりです:

        w は -webkit-
          を意味します
        1. m は -moz-
          2. を意味します
        2. s は -ms-
          3. を意味します
        3. o は -o-
          4. を意味します
          5. 5. グラデーション
        lg(left, #) を入力します。 fff 50%, #000)、次のコードが生成されます:




        CSS コード

        background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5) , #fff), to(#000));

          background-image: -webkit-linear-gradient(left, #fff 50%, #000);
          2. background-image: -moz-linear-gradient(left) , #fff 50%, #000);
          3. background-image: -o -linear-gradient(left, #fff 50%, #000);
          4. background-image: linear-gradient(left, #fff 50%) , #000);




      • 3 つの追加機能
      • Lorem ipsum テキストを生成

        Lorem ipsum は、タイプの分野で一般的に使用されるラテン語の記事を指します主な目的は設定デザインです。さまざまなフォントやレイアウトで記事やテキストの効果をテストします。 Emmet を使用すると、lorem または lipsum と入力するだけでこれらの単語を生成できます。 lorem10 のように、単語の数を指定することもできます。これにより、次のようになります:



        Quote

        Lorem ipsum dolor sit amet, consectetur adipisicing elit

        you Emmet プラグインをカスタマイズすることもできます。

        1. 新しい略語を追加するか、既存の略語を更新し、snippets.json ファイルを変更します
        2. Emmet フィルタと操作の動作を変更し、preferences.json ファイルを変更します
        3. HTML または XML コードの生成方法を定義し、構文プロファイルを変更できます.json ファイル
        5. 5. さまざまなエディター用のプラグイン

        Emmet でサポートされているエディターは次のとおりです (リンクはこのエディターの Emmet プラグインです):

        Sublime Text 2


        TextMate 1.x
        Eclipse/Aptana
        Coda 1.6 および 2.x
        Espresso
        Chocolat (「Install Mixin」ダイアログボックスから追加)

        Komodo Edit/IDE (ツール → アドオンメニューから追加)

        Notepad++

        PSPad