Let's talk about a Sublime Text 2 plug-in, emmet (original name: zen Coding)_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)

         

         

         

        

         

         

         

    

   [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

   3

    

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

   click

   mouseover

   高级：

   Lorem*:  生成测试文本，*表示0-无限个 默认30个单词

   p>lorem2

   Lorem ipsum.

   p>lorem4

   Lorem ipsum dolor sit.

   p>lorem6

   Lorem ipsum dolor sit amet, consectetur.

   p>lorem

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumenda ratione harum quas adipisci eveniet temporibus praesentium ducimus!

    

   套接作用

         

         

         

   全选后，ctrl shirt g,输入div.demo1>h1{test1} div.test2

         

   test1

         

                

                       

                                                                                         gt;

    

   >3.College students

   4.Graduate students

   5.Ph.D. students

   After selecting all: Ctrl shift g input: ul>li*>a

    

   • 1.Primary school students

     

   • 2.Middle school students

     

   • 3.College students< ;/li>

      

   • 4.Graduate students

    

   •   

     • Primary school student

                                                                                                                            a>

      

     • Graduate student

      href="">PhD student