<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          前端必知的Emmet實用操作,大致了解了下Emmet這個神器

          時間:?2017-11-20閱讀:?843標簽:?神器

          這是一篇介紹Emmet的文章,Emmet是專為我們前端開發人員設計的一個工具,可以大大提高您的HTML和CSS工開發效率。可以說是前端開發的神器之一


          Emmet簡介

          作為一個前端,你肯知道在前端開發的過程中,一大部分的工作是寫 HTML、CSS 代碼。特別是手動編寫 HTML 代碼的時候,效率會特別低下,因為需要敲打很多尖括號,而且很多標簽都需要閉合標簽等。于是,就有了 Emmet(前身為 Zen Coding)。(當然這是以前的情況,現在作為一個合格的現代編輯器多多少少都集成了代碼自動提示,自動補全等功能)。

          它作為一款強大的插件支持了許多編輯器與IDE,什么vscode,sublime,atom,webstorm等等都支持你可以直接在你的編輯器插件中搜索安裝,一些已自帶集成

          我們先來看看官網的示例

          #page>div.logo+ul#nav>li*5>a{Item $}

          在我們用了emmet后 一個 tap 就會生成下面這一大段。酷不酷炫,炫不炫酷

          <div id="page">
              <div></div>
              <ul id="nav">
                  <li><a href="">Item 1</a></li>
                  <li><a href="">Item 2</a></li>
                  <li><a href="">Item 3</a></li>
                  <li><a href="">Item 4</a></li>
                  <li><a href="">Item 5</a></li>
              </ul>
          </div>

          下面我們直接貼代碼來看每一個語法的使用希望你在看完就會。


          Emmet 語法

          標簽

          div ? <div></div>
          
          foo ? <foo></foo>

          同時Emmet 還采用了css 的元素選擇器

          后代: >

          div>ul>li ? 
          
          <div>
              <ul>
                  <li></li>
              </ul>
          </div>

          兄弟:+

          div+p+bq ? 
          
          <div></div>
          <p></p>
          <blockquote></blockquote>

          上級:^

          div+div>p>span+em^bq ? 
          
          <div></div>
          <div>
              <p><span></span><em></em></p>
              <blockquote></blockquote>
          </div>

          乘法:*

          ul>li*5 ? 
          
          <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>

          分組:()

          div>(header>ul>li*2>a)+footer>p ? 
          
          <div>
              <header>
                  <ul>
                      <li><a href=""></a></li>
                      <li><a href=""></a></li>
                  </ul>
              </header>
              <footer>
                  <p></p>
              </footer>
          </div>

          ID 和 CLASS

          div#header+div.page+div#footer.class1.class2.class3
          ? 
          
          <div id="header"></div>
          <div></div>
          <div id="footer"></div>

          自定義屬性

          td[title="Hello world!" colspan=3] ? 
          
          <td title="Hello world!" colspan="3"></td>

          自增符號:$

          ul>li.item$*5  ? 
          
          <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>

          改變自增基數和方向:@

          ul>li.item$@-*5 ? 
          
          <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>
          ul>li.item$@3*5  ? 
          
          <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>

          文本:{}

          a[#]{Click me} ? 
          
          <a href="#">Click me</a>

          Lorem Ipsum(亂數假文):lorem

          lorem  ? 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure quos itaque, deserunt dolore in consequatur veniam cumque, est voluptatibus minima, velit culpa, reprehenderit aspernatur iste facilis. Rerum!

          哈哈哈,真棒只要五個字母一個tap家可以生成這么大一段站位文字。

          ok,差不多這就Emmet 語法的全部了。除了上面的簡寫形式,Emmet對css也提供有一些簡寫,下面我們就來看看


          Emmet的css支持

          css屬性

          m ? margin: 
          
          fz  ? font-size: 
          ……

          其實這些屬性簡寫都不需要特意去記,你只組要按著你的思路來猜這個屬性的簡寫就好了。

          屬性值

          m10 ? margin: 10px;
          mt10  ?  margin-top: 10px;
          ……

          多個屬性值:對于有多個屬性值的CSS屬性,在編寫時只需在屬性值之間添加-:

          m4-6 ? margin: 4px 6px;

          Emmet默認單位為px,如果你想使用其他單位就繼續看下面吧

          單位

          在Emmet中每一個單位都有其縮寫形式(當然了你記不住也沒關系,直接按全就好)

          • p → %

          • e → em

          • r→ rem

          • x → ex

          w100p  ?  width: 100%
          m10p30e5x   ?  margin: 10% 30em 5ex


          總結

          在這兒,我們大致了解了下Emmet這個神器,學會了基本的使用,關于Emmet的簡寫,不需要刻意去記憶,因為他的簡寫方式都很直觀,你直接猜也能寫對,寫不對也沒關系,去官網看看就好了(建議有時間還是粗略的看一些文檔)emmet能大大提高我們編碼效率,還沒用的趕快用起來吧。


          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/128

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网