emmet的基本写法:

  • .ct 点是class

   <div class="ct"></div>
  • #ct 井号是id

    <div id="ct"></div>
  • .ct>.ct 加号表示两个div并列

   <div class="ct"></div>
<div class="ct"></div>
  • .ct>ct1 ">"表示其子元素

   <div class="ct">
<div class="ct1"></div>
</div>
  • .ct*6 乘号后面加个数表示该元素的展开个数

   <div class="ct"></div>
<div class="ct"></div>
<div class="ct"></div>
<div class="ct"></div>
<div class="ct"></div>
<div class="ct"></div>
  • .ct$*6 $符号表示数字标号

    <div class="ct1"></div>
<div class="ct2"></div>
<div class="ct3"></div>
<div class="ct4"></div>
<div class="ct5"></div>
<div class="ct6"></div>

以上的基本方法排列组合,再用()来决定展开顺序即可;

心得

一直以来emmet使得html标签和css标签的书写速度加快,减少了许多不必要浪费的时间,学会使用emmet是每一个前端开发人员应该具有的基本技能。

emmet快速缩写展开的基本写法与心得的更多相关文章

  1. [转载]Emmet (ZenCoding) 缩写语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  2. Emmet快速开发

    标签元素关系展开 div.wrap>div.content>(div.inner_l+div.inner_r)^div.sider ------缩写展开如下---------------- ...

  3. Emmet快速编写代码

    Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 ​ 给标签指定id选择器 di ...

  4. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  5. 使用Emmet 快速生成HTML代码

    在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...

  6. Emmet插件比较实用常用的写法

    看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...

  7. Emmet 快速编写html代码

    简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...

  8. Emmet快速编写HTML代码

    缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和 ...

  9. emmet css 缩写

    css 缩写 对于CSS语法,Emmet有许多用于属性的预定义代码段.例如,您可以扩展 m 缩写以获取margin: ;代码段. 要获取 margin: 10px;您可以简单地扩展m10缩写. 需要多 ...

随机推荐

  1. 吴裕雄--天生自然python机器学习:使用Logistic回归从疝气病症预测病马的死亡率

    ,除了部分指标主观和难以测量外,该数据还存在一个问题,数据集中有 30%的值是缺失的.下面将首先介绍如何处理数据集中的数据缺失问题,然 后 再 利 用 Logistic回 归 和随机梯度上升算法来预测 ...

  2. jQuery - textarea 自适应内容高度

    <textarea id="textarea"></textarea> <script> function makeExpandingArea( ...

  3. rsync备份(一)

    1.Rsync基本概述 )概念 rsync:remote sync )开源 )备份 )https://rsync.samba.org/ samba服务器:文件共享,cifs,common intern ...

  4. pycharm2018后版本执行Flask app.run()深坑

    在2018年以前的版本,以上配置在app.run()里面的内置方法

  5. youths |government|some

    N-COUNT (新闻用语,尤指惹麻烦的)青年,小伙子Journalists often refer to young men as youths, especially when they are ...

  6. python3下scrapy爬虫(第七卷:编辑器内执行scrapy)

    之前我们都是在终端切入到scrapy的路境内执行爬虫的,你要多敲多少行的字节,所以这次我们谈谈如何在编辑器里执行,这个你可以用在爬虫中,当你使用PYTHONWEB开发时尽量不要在编辑器内启动端口服务那 ...

  7. 蓝桥杯-PREV3-带分数

    有人管蓝桥杯叫暴力杯,现在感觉还是挺贴切的.看到这题首先想到让i从1到n循环,首先判断i中无重复数字,再怎样判断能否用剩下的数构成n - i的假分数.之后看了题解.发现思路错了. 总结两点: 1.蓝桥 ...

  8. OpenCV 离散傅立叶变换

    #include "opencv2/core/core.hpp" #include "opencv2/imgproc/imgproc.hpp" #include ...

  9. SSM 生成mapper中xml文件:未能解析映射资源:“文件嵌套异常

    错误日记我就网上随便找个贴着: 错误一: org.springframework.beans.factory.BeanCreationException: Error creating bean wi ...

  10. [洛谷P4549] [模板] 裴蜀定理

    18.10.03模拟赛T1. 出题人xcj(Mr.Handsome)十分良心,给了一道送分题...... 互测题好久没有出现送分题了.xcj真棒. 题目传送门 幸亏之前看过,否则真的是送分题都拿不到. ...