首頁 > 開發者 > Sublime Text

說一個Sublime Text 2外掛程式、emmet（原名：zen Coding)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

工具/原料

  • 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>[email protected]*3，

    <ul>

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

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

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

    </ul>

     

    ul>[email protected]*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 2外掛程式、emmet（原名：zen Coding)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More