Emmet操作指南

HTML篇

生成带有内容的标签

  • 标签名{内容}可以生成带有内容的标签
    div{abc}
    <div>abc</div>

生成带有属性的标签

生成带有class属性的标签

  • .属性值可以直接生成div标签
  • 标签名加上.属性值可以生成带有class属性标签
    .abc
    div[class="abc"] p.abc
    p[class="abc"] a.abc
    a[class="abc"]

生成带有id属性的标签

  • 标签名.属性值可以生成带有id属性的标签
    div#abc
    <div id="abc"></div> p#abc
    <p id='abc'></p>

生成同时具有id属性和class属性的标签

  • 同时使用以上两种方式即可,即:
    div.abc#cde
    <div class="abc" id="cde"></div>

生成带有自定义属性的标签

  • 标签名[属性名=属性值]可以生成具有目标属性的标签
    a[href='xxx']
    <a href='xxx'></a>

结合以上内容,可以得到同时具有多个属性值的标签

a.abc#cde[href='xxx' name='link']
<a href="xxx" class="abc" id="cde" name="link"></a>

生成后代、上级标签

生成后代标签

  • 使用标签>子标签可以生成子标签
    <!-- 生成一级后代标签(子标签) -->
    ul>li
    <ul>
    <li></li>
    </ul> <!-- 生成二级后代标签 -->
    div>ul>li
    <div>
    <ul>
    <li></li>
    </ul>
    </div>

生成上级标签

```html
<!-- 生成一级上级标签 -->
div>ul>li^span
<div> <ul>
<li></li>
</ul> <span></span> </div> <!-- 生成二级上级标签 -->
div>ul>li^^span
<div>
<ul>
<li></li>
</ul>
</div>
<span></span>
```

生成多个标签

生成多个重复标签

  • 在标签后加上*并跟上想要的个数即可生成重复标签
    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>

生成多个重复的标签结构

  • 根据以上两点,就可以生成多个重复的结构
    div>(ul>li)*3
    <div>
    <!-- 1 -->
    <ul>
    <li></li>
    </ul>
    <!-- 2 -->
    <ul>
    <li></li>
    </ul>
    <!-- 3 -->
    <ul>
    <li></li>
    </ul>
    </div>

生成带有编号的标签

  • 使用$符号代替数字可以自增地生成数字并放入标签
    .abc
    <div class="abc"></div> .abc$
    <div class="abc1"></div> .abc$*3
    <div class="abc1"></div>
    <div class="abc2"></div>
    <div class="abc3"></div> ul>li{$}*3
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul> <!-- 把符号放在十位即可在十位进行自增 -->
    ul>li{$5}*3
    <ul>
    <li>15</li>
    <li>25</li>
    <li>35</li>
    </ul>
  • 生成多位数的标签使用多个$即可
    ul>li{$$}*3
    <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    </ul>
  • 排序生成编号
    • 使用$@进行正序排列
      ul>li{$@}*3
      <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      </ul>

      看起来和$没什么区别
      $@后加上数字看看

      ul>li{$@3}*3
      <ul>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      </ul>

      使用$@数字可以生成从指定数字开始生成的正序数列

  • 使用$@-进行到倒序排列
    • 和正序使用方法如出一辙,不过不同的是,$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列
      ul>li{$@-3}*3
      <ul>
      <li>5</li>
      <li>4</li>
      <li>3</li>
      </ul>

正序数列**

  • 使用$@-进行到倒序排列

    • 和正序使用方法如出一辙,不过不同的是,$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列
      ul>li{$@-3}*3
      <ul>
      <li>5</li>
      <li>4</li>
      <li>3</li>
      </ul>

CSS篇

【H5】Emmet 指令 HTML的更多相关文章

  1. vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.

    超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...

  2. 在Eclipse中在线安装Emmet和图文使用教程

    ZenCoding 升级为 Emmet 之后,基于 Eclipse 的插件安装地址也发生了变化, 下面是在基于 Eclipse 的 IDE 中安装和使用 Emmet 的图文示例. 一.打开 Eclip ...

  3. Emmet.vim 教程

    Emmet.vim 教程 May 5, 2012 目录 1 下载 Emmet.vim 2 安装 Emmet.vim 3 使用 Emmet.vim 4 余话 Emmet 项目原先叫 Zen Coding ...

  4. Sublime Text 3 杂记

    Sublime Text 是一个功能强大的代码编辑器(收费,但可无限期试用).由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim.Sublime T ...

  5. VS Code折腾记 - (2) 快捷键大全,没有更全

    前言 VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影..简言之,内置快捷键玩熟了,效率提高不是一点两点. VsCode 快捷键有五种组合方式(科普) Ctrl + Shi ...

  6. Visual Studio Code 常用快捷键

    VsCode 快捷键有五种组合方式(科普) Ctrl + Shift + ? : 这种常规组合按钮 Ctrl + V Ctrl +V : 同时依赖一个按键的组合 Shift + V c : 先组合后单 ...

  7. 【转】【VS Code】配置文件Launch及快捷键

     Ctrl+shift+p,然后输入launch,点击第一个选项即可配置. 之后选择More即可 具体配置可修改为: { "version": "0.2.0", ...

  8. 转 VS Code 快捷键大全,没有更全

    VS Code折腾记 - (2) 快捷键大全,没有更全 前言 VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影..简言之,内置快捷键玩熟了,效率提高不是一点两点. VsCo ...

  9. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  10. emmet常用指令组合

    emmet的应用   1.生成html(需要先将文件命名为.html后缀) !+tab,html:5+tab   2.生成meta utf meta:utf+tab   3.生成meta viewpo ...

随机推荐

  1. arcengine动态显示所需字段值

    需求:实现和GIS桌面端中Identify的类似功能,鼠标滑动的时候可以显示鼠标所在位置的要素的指定字段的值.. 主要操作流程: ①先打开一个对话框,用于选择需要显示的图层和字段名 ②点击确定之后,在 ...

  2. 解决ssh $host jps bash: jps: command not found 问题

    问题描述 使用 ssh $host jps 命令报错,连本机也会有这样的情况,但是分开使用并没有问题,即ssh $host下执行jps命令并不会报错. 原因 因为ssh远程连接到服务器的环境变量中不包 ...

  3. 如何让Macbook Touch Bar 一直显示F1~F12

    原始状态 修改过程 系统偏好设置 > 键盘 将Touch Bar Shous 修改为F1, F2 ,etc. 结果

  4. DVWA-XSS (DOM) DOM型跨站脚本攻击

    XSS(Cross Site Scripting),跨站脚本攻击,能使攻击者在页面嵌入一些脚本代码,用户再访问,被诱导点击时,执行恶意脚本,常见为javascript,也有Flash.VBscript ...

  5. Spring--案例:百度网盘密码数据兼容处理

    案例再度来袭 也就是说,在百度网盘的密码复制时,后面即使有空格也能提取成功(trim方法) 案例的实现: 也就是实现存在空格时,也能输出true: 现在的话: 那么,我们应该如何使得它忽略空格呢? 这 ...

  6. 在CentOS中安装和使用nginx

    概述 本文简单讲述一下,如何快速将一个内网的Web服务通过nginx提供给外网访问,并且启用HTTPS.例如我们部署了一个kubesphere,地址为192.168.202.151:30880,需要通 ...

  7. Python实战项目-10文件存储/支付宝支付/支付成功回调接口

    文件存储 视频文件存储在某个位置,如果放在自己服务器上 放在项目的media文件夹 服务器上线后,用户既要访问接口,又需要看视频,都是使用一个域名和端口 分开:问价你单独放在文件服务器上,文件服务器带 ...

  8. 某大厂面试题:说一说Java、Spring、Dubbo三者SPI机制的原理和区别

    大家好,我是三友~~ 今天来跟大家聊一聊Java.Spring.Dubbo三者SPI机制的原理和区别. 其实我之前写过一篇类似的文章,但是这篇文章主要是剖析dubbo的SPI机制的源码,中间只是简单地 ...

  9. 【数据结构与算法学习】散列表(Hash Table,哈希表)

    实现语言:C++ 1. 散列表 散列表,英文名称为Hash Table,又称哈希表.杂凑表等. 线性表和树表的查找是通过比较关键字的方法,查找的效率取决于关键字的比较次数. 而散列表是根据关键字直接访 ...

  10. 【CS231n assignment 2022】Assignment 2 - Part 2,优化器,批归一化以及层归一化

    前言 博客主页:睡晚不猿序程 首发时间:2022.7.23 最近更新时间:2022.7.23 本文由 睡晚不猿序程 原创 作者是蒻蒟本蒟,如果文章里有任何错误或者表述不清,请 tt 我,万分感谢!or ...