Atom Emmet instance tutorial

May 24, 2021 Atom

1. Emmet instance tutorial

2. What is Emmet

3. Emmet Foundation

4. Integrated use - static layout

5. Conclusion

Emmet instance tutorial

What is Emmet

In short, Emmet's predecessor was the famous Zen coding;

Function

snippet (code snippets, better to use specialized snippet plug-ins)
abbreviation expand (short-case expand)

Objective

Only one, speed up web development (encoding speed).

Emmet Foundation

Knowledge preparation

HTML/CSS tags are familiar with mastering - knowing what to do and what to do
Know the relationship of selectors, such as brothers, children, descendants, etc
Parsing short-form code can be called with the tab key or Ctrl-E

Emmet features

Short case support nesting
Short writing supports grouping
Short writing supports multiplication
Short write supports self-addition and self-subtract, starting, numbering

Emmet syntax

Html

The document is initialized

html:5 or!: For HTML5 document types - look at the code
html:xt: For XHTML transition document types - no demos
html:4s: For HTML4 Strict Document Types - No Demos

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

</body>
</html>

id s | class.| The property | content, and defaults to implicit build (near-principle) if it does not have a parent element

 <!-简写格式我就放在注释里面啦啦!!-->
  <!--#test.test-->
  <div id="test" class="test">

  </div>

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

  <!-- a[href="http://www.w3cschool.cn"]{文本内容--我是GEEK} -->
  <a href="http://www.w3cschool.cn">文本内容--我是GEEK</a>

Descendants and | B rother and | The superior

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

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

<!-- div>p>ul>li>^span+b  上级-->
<div>
  <p>
    <ul>
      <li></li>
      <span></span>
      <b></b>
    </ul>
  </p>
</div>

Group ()/multiplication/self-increase/self-decrease$-/start-up$-numbers

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

<!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配数字,一个代表1开始,两个01开始,依次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 代表几号开始出现数字  -->
<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>

Integrated use - static layout

Emmet short

(#header>.nav>ul>(li>a{首页/美女/关于/……})*5)+(#container>(#(.left_sidebar>.category>ul>(li>a[herf=”#” title=”这是测试链接啊”]{我是侧边栏链接$$$})*5)+(#right_content>ul>li>a[href=”#”]>(img[alt=”哟吼吼吼” src=” “])+span{这是用来描述图片用的}*12)))+#footer>ul>(li>a{关于/联系我们/…..})*4

Just add the following background color under simple typography

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>这是一个测试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="">首页/美女/关于/......</a></li>
            <li><a href="">首页/美女/关于/......</a></li>
            <li><a href="">首页/美女/关于/......</a></li>
            <li><a href="">首页/美女/关于/......</a></li>
            <li><a href="">首页/美女/关于/......</a></li>
          </ul>
        </div>
      </div>
      <div id="container">
        <div id="">
          <div class="left_sidebar">
            <div class="category">
              <ul>
                <li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接001</a></li>
                <li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接002</a></li>
                <li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接003</a></li>
                <li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接004</a></li>
                <li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接005</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div id="right_content">
          <ul>
            <li><a href="#">
                <img src=" " alt="哟吼吼吼">
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
                <span>这是用来描述图片用的</span>
              </a></li>
          </ul>
        </div>
      </div>
      <div id="footer">
        <ul>
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
        </ul>
      </div>
</body>
</html>

Conclusion

CSS is written in much the same way as HTML, and emmet can also write IE hacks, browser prefixes, and so on.

Emmet Cheat Sheet on the website: http://docs.emmet.io/cheat-sheet/