阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Atom Emmet 实例教程

      Emmet 是什么

      简言之,Emmet 的前身是大名鼎鼎的 Zen coding;

      功能

      • snippet(代码片段,不如用专门的片段插件)
      • abbreviation expand(简写展开)

      目的

      只有一个,加快 Web 开发(编码速度)。

      Emmet 基础

      知识预备

      • HTML/CSS 标签熟悉掌握 — 知道是干什么的做什么的
      • 知道选择器的关系,比如兄弟,子代,后代等
      • 解析简写代码可以用 Tab 键或者 Ctrl+E 来调用

      Emmet 特性

      • 简写支持嵌套
      • 简写支持分组
      • 简写支持乘法
      • 简写支持自增和自减,起序,编号

      Emmet 语法

      HTML

      文档初始化

      • html:5 或!:用于 HTML5 文档类型 —看代码
      • html:xt:用于 XHTML 过渡文档类型 — 不演示
      • html:4s:用于 HTML4 严格文档类型 — 不演示

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

      id # |类。|属性 []|内容{}, 若是不带父元素,则默认为隐性生成(就近原则)

       <!-简写格式我就放在注释里面啦啦!!-->
        <!--#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>
      

      后代》 | 兄弟 + | 上级 ^

      <!-- 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>
      

      分组 ()/ 乘法*/ 自增 $/ 自减 $@-/ 起序 $@数字

      <!-- 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>
      

      综合运用 - 静态布局

      Emmet 简写

      (#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
      

      只是简单的排版下添加了下背景颜色

      <!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>
      

      结语

      CSS 的写法和 HTML 大同小异,emmet 也能写 IE hack, 浏览器前缀等。

      官网的 Emmet Cheat Sheet : https://docs.emmet.io/cheat-sheet/

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录