閱讀(16.5k) 書簽贊(0) 我要糾錯(cuò)

Atom Emmet 實(shí)例教程

2021-12-10 13:41 更新

Emmet 實(shí)例教程

何為 Emmet

簡(jiǎn)言之,Emmet 的前身是大名鼎鼎的 Zen coding;

功能

snippet(代碼片段,不如用專門的片段插件)
abbreviation expand(簡(jiǎn)寫展開(kāi))

目的

只有一個(gè),加快 Web 開(kāi)發(fā)(編碼速度)。

Emmet 基礎(chǔ)

知識(shí)預(yù)備

HTML/CSS 標(biāo)簽熟悉掌握 — 知道是干什么的做什么的
知道選擇器的關(guān)系,比如兄弟,子代,后代等
解析簡(jiǎn)寫代碼可以用 Tab 鍵或者 Ctrl+E 來(lái)調(diào)用

Emmet 特性

簡(jiǎn)寫支持嵌套
簡(jiǎn)寫支持分組
簡(jiǎn)寫支持乘法
簡(jiǎn)寫支持自增和自減,起序,編號(hào)

Emmet 語(yǔ)法

HTML

文檔初始化

html:5 或!：用于 HTML5 文檔類型 —看代碼
html:xt：用于 XHTML 過(guò)渡文檔類型 — 不演示
html:4s：用于 HTML4 嚴(yán)格文檔類型 — 不演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

id # |類.|屬性[]|內(nèi)容{},若是不帶父元素,則默認(rèn)為隱性生成(就近原則)

 <!-簡(jiǎn)寫格式我就放在注釋里面啦啦!!-->
  <!--#test.test-->
  <div id="test" class="test">

  </div>

  <!-- p#test.test  -->
  <p id="test" class="test"></p>

  <!-- a[href="http://www.o2fo.com"]{文本內(nèi)容--我是GEEK} -->
  <a href="http://www.o2fo.com">文本內(nèi)容--我是GEEK</a>

后代> | 兄弟+ | 上級(jí)^

<!-- div>ul>li 后代 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- div>p+p  兄弟-->
<div>
  <p></p>
  <p></p>
</div>

<!-- div>p>ul>li>^span+b  上級(jí)-->
<div>
  <p>
    <ul>
      <li></li>
      <span></span>
      <b></b>
    </ul>
  </p>
</div>

分組()/乘法*/自增$/自減$@-/起序$@數(shù)字

<!-- div>ul>(li>a)*2 -->
<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配數(shù)字,一個(gè)代表1開(kāi)始,兩個(gè)01開(kāi)始,依次001-->
<div>
  <ul>
    <li><a href="">文本01</a></li>
    <li><a href="">文本02</a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$@-})*3 -->
<!-- @-代表啟用自減,降序排列   -->
<div>
  <ul>
    <li><a href="">文本3</a></li>
    <li><a href="">文本2</a></li>
    <li><a href="">文本1</a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$@2})*5 -->
<!-- $@number 代表幾號(hào)開(kāi)始出現(xiàn)數(shù)字  -->
<div>
  <ul>
    <li><a href="">文本2</a></li>
    <li><a href="">文本3</a></li>
    <li><a href="">文本4</a></li>
    <li><a href="">文本5</a></li>
    <li><a href="">文本6</a></li>
  </ul>
</div>

綜合運(yùn)用-靜態(tài)布局

Emmet 簡(jiǎn)寫

(#header>.nav>ul>(li>a{首頁(yè)/美女/關(guān)于/……})*5)+(#container>(#(.left_sidebar>.category>ul>(li>a[herf=”#” title=”這是測(cè)試鏈接啊”]{我是側(cè)邊欄鏈接$$$})*5)+(#right_content>ul>li>a[href=”#”]>(img[alt=”喲吼吼吼” src=” “])+span{這是用來(lái)描述圖片用的}*12)))+#footer>ul>(li>a{關(guān)于/聯(lián)系我們/…..})*4

只是簡(jiǎn)單的排版下添加了下背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>這是一個(gè)測(cè)試DEMO</title>
  <style>
    *{margin:0;padding:0}
    ul{list-style: none}
    #header{height:300px;width:100%;background: #5ecc17;border:2px solid #000;}
    #container{margin:0 auto;height:500px;width:800px;background: #e97726;border:1px solid #000;}
    #footer{height:200px;width:100%;background: #000;border:1px solid #000;}
    .left_sidebar{float:left;background: #02c4bc;height:500px;border:1px solid #000;}
    .right_content{float:right;background: #113a0d;height:500px;border:1px solid #000;}
  </style>
</head>
<body>
        <div id="header">
        <div class="nav">
          <ul>
            <li><a href="">首頁(yè)/美女/關(guān)于/......</a></li>
            <li><a href="">首頁(yè)/美女/關(guān)于/......</a></li>
            <li><a href="">首頁(yè)/美女/關(guān)于/......</a></li>
            <li><a href="">首頁(yè)/美女/關(guān)于/......</a></li>
            <li><a href="">首頁(yè)/美女/關(guān)于/......</a></li>
          </ul>
        </div>
      </div>
      <div id="container">
        <div id="">
          <div class="left_sidebar">
            <div class="category">
              <ul>
                <li><a href="" herf="#" title="這是測(cè)試鏈接啊">我是側(cè)邊欄鏈接001</a></li>
                <li><a href="" herf="#" title="這是測(cè)試鏈接啊">我是側(cè)邊欄鏈接002</a></li>
                <li><a href="" herf="#" title="這是測(cè)試鏈接啊">我是側(cè)邊欄鏈接003</a></li>
                <li><a href="" herf="#" title="這是測(cè)試鏈接啊">我是側(cè)邊欄鏈接004</a></li>
                <li><a href="" herf="#" title="這是測(cè)試鏈接啊">我是側(cè)邊欄鏈接005</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div id="right_content">
          <ul>
            <li><a href="#">
                <img src=" " alt="喲吼吼吼">
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
                <span>這是用來(lái)描述圖片用的</span>
              </a></li>
          </ul>
        </div>
      </div>
      <div id="footer">
        <ul>
          <li><a href="">關(guān)于/聯(lián)系我們/.....</a></li>
          <li><a href="">關(guān)于/聯(lián)系我們/.....</a></li>
          <li><a href="">關(guān)于/聯(lián)系我們/.....</a></li>
          <li><a href="">關(guān)于/聯(lián)系我們/.....</a></li>
        </ul>
      </div>
</body>
</html>

結(jié)語(yǔ)

CSS 的寫法和 HTML 大同小異,emmet 也能寫 IE hack,瀏覽器前綴等。

官網(wǎng)的 Emmet Cheat Sheet :http://docs.emmet.io/cheat-sheet/

以上內(nèi)容是否對(duì)您有幫助：

← Atom config.cson 基礎(chǔ)教程

Atom 分屏操作 →

寫筆記

我要補(bǔ)充