ホームページ > ウェブフロントエンド > htmlチュートリアル > Sublime Text 2 プラグイン、emmet (元の名前: zencoding)_html/css_WEB-ITnose について話しましょう

Sublime Text 2 プラグイン、emmet (元の名前: zencoding)_html/css_WEB-ITnose について話しましょう

WBOY
リリース: 2016-06-24 11:48:52
オリジナル
1215 人が閲覧しました

工具/原料

  • sublime Text 2

  • 安装emmet插件

  • 方法/步骤

    1. 生成html文档初始结构:

      !

            

             Document

      html:5

            

             Document

       

      html:xs

            

             Document

       

      html:4s

            

             Document

    2. 生成带有id,class的标签:

      Emmet默认标签是div

      #id

          

      p#id

           

      h1#id

          

      span#id

          

       

      .class

          

      p.class

          

      h1.class

         

      span.class

          

      输入多个class 添加两个.class1.class2

      .class1.class2

         

    3. 语法:

      语法:

      >:生成后辈

      div>span>p>h1

            

                   

                          

                   

            

       

      +:生成同辈

      div+span+p+h1

       

      ^:生产叔辈

      div>span>p^h1

            

                   

            

            

      *:生成重复おそらく

      ul>li*3

      ():生成分组

      ul>(li.li_1*3)+(li.li_2*3)

      • < li class = "li_2"></li>

        < li class = "li_2">< li_2">

      [attr]: 生成属性

      a[href=index.html title=index]

      input[type=button]

      input[type=submit name=submit]

      $:生成编号 $ の数は数字の数 @ 指定開始の数字 @?倒順

      ul>li.li_$*3

      ul>li.li_$@0*3,

      ul>li.li_$@-*3

      {}: コンテンツ生成

      p{$}*3

      1

      2< ;/p>

      3

      a[href=index.html]{click}+a[href=test.html]{mouseover}

      < a href="index.html">click

      mouseover

      高级:

      Lorem*: 生成测试文本,*表示0 - 無制限默认30個单词

      p>lorem2

      Lorem ipsum.

      p>lorem4

      p>lorem6

      Lorem ipsum dolor sit amet, consectetur.

      p>lorem

      Loremドール・シット・アメット、エリートのアディピシングを構築します。 Labourum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumendarationone halum quas adipisci Eveniet Temporibus praesentium ducimus!

      套接作用

      • < /li>

      完全選択後、ctrl+shirt+g,输入div.demo1&g t;h1 {test1}+div.test2

      test1

    4. &lt;/div&gt;

      &lt;/div&gt;

      5.博士課程の学生

      すべてを選択した後: Ctrl+shift+g 入力: ul>li*>a

      & lt; a href = "" & gt; 1. 小学生 & lt;/a & gt; & lt;/li & lt; a href = "" "" " & gt; a>

      " " ;/ul>

      すべてのシリアル番号を削除します

      ul>li*>a|t

        a>

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート