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. java代码实现数据源切换(连接池简单粗暴)

    --最佳实践配置(.yml) gs.oracle: #driverClassName: oracle.jdbc.driver.OracleDriver driverClassName: oracle. ...

  2. 高可用性的mongo集群搭建

    mongoDB安装 参照:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 配置yum管理包 在路径/etc/y ...

  3. sqlserver多表联查分页

    select * from(select H_order.Id ,H_order.userID, ROW_NUMBER() over (order by H_order.Id Desc) as row ...

  4. 二评北科团委:“斩首计划”进行时,其用心也毒

    近日,在同学们和热心群众的共同努力下,各高校相继悬崖勒马,北大马会.北语新新青年.人大新光等进步社团均顺利注册.而北科团委倒行逆施,可谓一枝独秀,对于齐民学社的同学们的诉求,不仅不予以回应,反而采取表 ...

  5. golang seelog使用

    golang中自带的有log包,但是功能并不能满足我们.很多人推荐seelog,我们今天一起学习下. 安装 go get github.com/cihub/seelog 快速开始 引用seelog w ...

  6. FPGA模N计数器的实现

    module ModuloN_Cntr(Clock, Clear, Q, QBAR); , UPTO = ;//计数器位数以及模数 input Clock, Clear; :]Q, QBAR; :]C ...

  7. [LC] 122. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  8. [LC] 224. Basic Calculator

    Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...

  9. docker pull很慢解决办法

    经常拉取镜像的时候很慢或者拉不下来,这里可以使用阿里云镜像加速器,然后试试看有没有效果. ##使用阿里云镜像加速器 [root@localhost ~]# mkdir -p /etc/docker [ ...

  10. 【阅读笔记】rocketmq 概念与架构 (一)

    介绍 rocketmq 框架与基本概念 1. 概念 1.1 namesrv(name server) 记录了 broker 集群信息,消息队列的信息以及 key-value 配置,见 RouteInf ...