快捷创建html标签

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

https://files.cnblogs.com/files/tangge/EmmetCheatSheet.pdf

何为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.baidu.com"]{文本内容--我是百度} -->

  <a href="http://www.baidu.com">文本内容--我是百度</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（Sublime编辑）的更多相关文章

  1. XSS Filter Evasion Cheat Sheet 中文版

    前言 译者注: 翻译本文的最初原因是当我自己看到这篇文章后,觉得它是非常有价值.但是这么著名的一个备忘录却一直没有人把它翻译成中文版.很多人仅仅是简单的把文中的 各种代码复制下来,然后看起来很刁的发在 ...

  2. 转：PostgreSQL Cheat Sheet

    PostgreSQL Cheat Sheet CREATE DATABASE CREATE DATABASE dbName; CREATE TABLE (with auto numbering int ...

  3. Git Cheat Sheet

    Merge Undo git merge with conflicts $ git merge --abort Archive $ git archive --format zip --output ...

  4. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  5. XSS (Cross Site Scripting) Prevention Cheat Sheet(XSS防护检查单)

    本文是 XSS防御检查单的翻译版本 https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sh ...

  6. IOS Application Security Testing Cheat Sheet

    IOS Application Security Testing Cheat Sheet    [hide]  1 DRAFT CHEAT SHEET - WORK IN PROGRESS 2 Int ...

  7. HTML5 Cheat sheet PNG帮助手册（标签、事件、兼容）

    HTML5 Cheat sheet PNG帮助手册(标签.事件.兼容) 1.HTML5标签 2.HTML5事件 3.HTML5兼容 最新HTML5手册资料请参考:http://www.inmotion ...

  8. [转]Swift Cheat Sheet

    原文:http://kpbp.github.io/swiftcheatsheet/ A quick cheat sheet and reference guide for Apple's Swift ...

  9. The iOS Design Cheat Sheet 界面设计速参

    http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ With the release of iOS 7, app designers ...

随机推荐

  1. JAVA记录-SpringMVC scope属性的两种模式

    singleton作用域:当把一个Bean定义设置为singleton作用域是,Spring IoC容器中只会存在一个共享的Bean实例,并且所有对Bean的请求,只要id与该Bean定义相匹配,则只 ...

  2. Linux 命令详解（三）./configure、make、make install 命令

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤 一.基本信息 1../configure 是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不 ...

  3. Mybatis 学习总结

    1 Mybatis入门 1.1 单独使用jdbc编程问题总结 1.1.1 jdbc程序 public static void main(String[] args) { Connection conn ...

  4. Vue.js入门系列教程（二）

    过滤器:filter 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. 四、移植 JZ2440 开发板

    4.1 移植第一步 前面已经分析过了 .config 的过程,可以知道移植需要用到的文件: .config 文件 arch/arm/cpu 下的文件 board 目录  .config 文件是根据后面 ...

  6. u-boot移植（十三）---代码修改---支持文件系统及补丁制作

    一.烧写文件系统 1.1 jffs2烧写 1.下载文件系统:tftp 30000000 fs_mini_mdev.jffs2 2.擦除文件的块:nand erase.part rootfs 3.烧入文 ...

  7. Asp.net MVC Session过期异常的处理

    一.使用MVC中的Filter来对Session进行验证 (1)方法1: public class MyAuthorizeAttribute : FilterAttribute, IAuthoriza ...

  8. Mac下配置多个SSH KEY访问远程Git服务

    第一步 生成对应的ssh key 1 后面输入你的用户名 或者 邮箱 2 输入一个独立的ssh key名字 区别之前的名字 第二步  编辑 config文件 在.ssh/目录下面 在config文件配 ...

  9. 出现fonts/fontawesome-webfont.woff?v=4.5.0 net::ERR_ABORTED

    虽然网页正常显示和运行,但是有2个字体文件出现404错误. 原因:服务器没有配置MIME类型而已. 1. 在IIS网站中,找打网站对应的MIME类型,双击. 2.能看到此网站对应的MIME类型,点击右 ...

  10. 如何成为软件测试职场“头号玩家”，月入10k+

    最近看了一部电影,叫<头号玩家>,电影挺不错的,延伸到自己的测试职业生涯,其实在我们的测试职场,也是存在头号玩家的,但并不是真的在玩,而是在努力工作. 不管是什么游戏,如果要玩通关升级,那 ...