说一个Sublime Text 2插件、emmet(原名:zen Coding)

be096b63a92b

工具/原料

  • sublime Text 2

  • 安装emmet插件

方法/步骤

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

    !<tab>

    <!doctype html>

    <html lang="en">

    <head>

           <meta charset="UTF-8">

           <title>Document</title>

    </head>

    <body></body>

    </html>

    html:5<tab>

    <!doctype html>

    <html lang="en">

    <head>

           <meta charset="UTF-8">

           <title>Document</title>

    </head>

    <body></body>

    </html>

     

    html:xs<tab>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

           <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

           <title>Document</title>

    </head>

    <body></body>

    </html>

     

    html:4s<tab>

    <html>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">

    <head>

           <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

           <title>Document</title>

    </head>

    <body></body>

    </html>

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

    Emmet默认标签是div

    #id<tab>

         <div id="id"></div>

    p#id<tab>

          <p id="id"></p>

    h1#id<tab>

         <h1 id="id"></h1>

    span#id<tab>

         <span id="id"></span>

     

    .class<tab>

         <div class="class"></div>

    p.class<tab>

         <p class="class"></p>

    h1.class<tab>

        <h1 class="class"></h1>

    span.class<tab>

         <span class="class"></span>

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

    .class1.class2<tab>

        <div class="class1 class2"></div>

  3. 语法:

    语法:

    >:生成后辈

    div>span>p>h1 <tab>

    <div>

           <span>

                  <p>

                         <h1></h1>

                  </p>

           </span>

    </div>

     

    +:生成同辈

    div+span+p+h1 <tab>

    <div></div>

    <span></span>

    <p></p>

    <h1></h1>

     

    ^:生产叔辈

    div>span>p^h1<tab>

    <div>

           <span>

                  <p></p>

           </span>

           <h1></h1>

    </div>

     

    *:生成重复多分

    ul>li*3 <tab>

    <ul>

           <li></li>

           <li></li>

           <li></li>

    </ul>

     

    ():生成分组

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

    <ul>

           <li class="li_1"></li>

           <li class="li_1"></li>

           <li class="li_1"></li>

         

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

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

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

    </ul>

     

    [attr]:生成属性

    a[href=index.html title=index]<tab>

    <a href="index.html" title="index"></a>input[type=button]

    input[type=submit name=submit]<tab>

    <input type="submit" name="submit">

     

    $:生成编号 $的个数就是数字的个数 @指定开始的数字 @–倒序

    ul>li.li_$*3<tab>

    <ul>

           <li class="li_1"></li>

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

           <li class="li_3"></li>

    </ul>

    ul>li.li_$@0*3,

    <ul>

           <li class="li_0"></li>

           <li class="li_1"></li>

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

    </ul>

     

    ul>li.li_$@-*3

    <ul>

           <li class="li_3"></li>

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

           <li class="li_1"></li>

    </ul>

     

    {}:生成内容

    p{$}*3<tab>

    <p>1</p>

    <p>2</p>

    <p>3</p>

     

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

    <a href="index.html">click</a>

    <a href="test.html">mouseover</a>

    高级:

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

    p>lorem2<tab>

    <p>Lorem ipsum.</p>

    p>lorem4<tab>

    <p>Lorem ipsum dolor sit.</p>

    p>lorem6<tab>

    <p>Lorem ipsum dolor sit amet, consectetur.</p>

    p>lorem<tab>

    <p>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!</p>

     

    套接作用

    <ul>

           <li></li>

           <li></li>

           <li></li>

    </ul>

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

    <div class="demo1">

           <h1>test1</h1>

           <div class="test2">

                  <ul>

                         <li></li>

                         <li></li>

                         <li></li>

                  </ul>

           </div>

    </div>

     

    文本转换成html标签          

    1.小学生

    2.中学生

    3.大学生

    4.研究生

    5.博士生

    全选后:Ctrl+shift+g 输入:ul>li*>a<tab>

    <ul>

           <li><a href="">1.小学生</a></li>

           <li><a href="">2.中学生</a></li>

           <li><a href="">3.大学生</a></li>

           <li><a href="">4.研究生</a></li>

           <li><a href="">5.博士生</a></li>

    </ul>

    去除所有序号     

    ul>li*>a|t<tab>

    <ul>

           <li><a href="">小学生</a></li>

           <li><a href="">中学生</a></li>

           <li><a href="">大学生</a></li>

           <li><a href="">研究生</a></li>

           <li><a href="">博士生</a></li>

    </ul>


你可能感兴趣的:(Sublime Text)