首頁 > 開發者 > Sublime Text
標籤：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>sublime text 3中emmet常用技巧</title></head><body><!-- 產生html5格式檔案先把檔案儲存成.html格式，然後輸入html:5按下tab鍵 --><!-- 簡寫div start --><!-- div.box --><div class="box"></div><!-- .container 預設產生div標籤--><div class="container"></div><!-- end 簡寫div --><!-- 含糊標籤名稱 --><!-- .wrap>ul.list>.site --><div class="wrap"><ul class="list"><li class="site"></li></ul></div><!-- 使用Emmet來擴充簡單的class名稱產生div的話。這個方式可以協助你省去大量的時間。你只需要記住如下文法：> 子節點：在DOM樹下一層添加建立一個元素+ 同層級：在DOM樹同一層添加建立一個元素^ 向上層：向上一層添加建立建立一個元素。 --> <!-- .outer>.inner>h1+p --> <div class="outer"> <div class="inner"> <h1></h1> <p></p> </div> </div> <!-- .warp>p>a^p 向上一層--> <div class="warp"> <p><a href=""></a></p> <p></p> </div> <!-- .warp>p>span>a^^p 向上多層--> <div class="warp"> <p><span><a href=""></a></span></p> <p></p> </div> <!-- 使用分組來簡化你的代碼結構 的時候你可能會發現使用向上符號比較複雜，這時候可能使用分組更加的合理 --> <!-- (.one>h1)+(.two>h1) --> <div class="one"> <h1></h1> </div> <div class="two"> <h1></h1> </div> <!-- 插入文本和屬性如果你需要產生HTML，內容和屬性也是你常常需要添加的。很多開發人員只是使用Emmet來產生架構，然後再新增內容。其實你可以在產生頁面架構的過程中同時添加屬性和內容。 --> <!-- h1{我是一個h1標籤}+p{我是一個p標籤} --> <h1>我是一個h1標籤</h1> <p>我是一個p標籤</p> <!-- a[href="http://www.baidu.com"]{百度} --> <a href="http://www.baidu.com">百度</a> <!-- 添加多個class到一個元素這個非常簡單，你只需要使用逗號來添加多個class --> <!-- .one.two.three --> <div class="one two three"></div> <!-- 重複添加 --> <!-- ul>li{我是一個li標籤}*4 --> <ul> <li>我是一個li標籤</li> <li>我是一個li標籤</li> <li>我是一個li標籤</li> <li>我是一個li標籤</li> </ul> (section>.wrap)*2 <section> <div class="wrap"></div> </section> <section> <div class="wrap"></div> </section><!-- 自動列表計數 如果你需要按順序產生HTML元素，這個技巧你一定喜歡，使用$符號可以協助你產生一系列數字，支援class，id，屬性，內容等等--><!-- ul>li.item${item $$}*11 --><ul><li class="item1">item 001</li><li class="item2">item 002</li><li class="item3">item 003</li><li class="item4">item 004</li><li class="item5">item 005</li><li class="item6">item 006</li><li class="item7">item 007</li><li class="item8">item 008</li><li class="item9">item 009</li><li class="item10">item 010</li><li class="item11">item 011</li></ul></body></html>
sublime text 3中emmet常用技巧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
