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

工具/原料

sublime Text 2

安装emmet插件

方法/步骤

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

   !

         

         

   html:5

         

         

    

   html:xs

         

         

    

   html:4s

         

         

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)

   • ＆lt; li class = "li_2"＆gt;＆lt;/li＆gt;

     ＆lt; li class = "li_2"＆gt;＆lt; 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

＆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>