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. Cf D. Nauuo and Circle

    https://codeforces.com/contest/1173/problem/D 题意: 给出你一个包含 n 个点的树,这 n 个点编号为 1~n: 给出一个圆,圆上放置 n 个位置,第 i ...

  2. day18-5个内置方法

    # 1. __str__方法: 必须return class Goods: def __str__(self): return 'apple' g = Goods() print(g) #apple, ...

  3. springboot支付项目之springboot集成jpa

    springboot集成spring-jpa 本文主要内容: 1:spring boot怎么集成spring-jpa以及第一个jpa查询示例 如jpa几个常用注解.lombok注解使用 2:怎么设置i ...

  4. 02-Java开发环境的配置

    在本章节中我们将为大家介绍如何搭建Java开发环境. Windows 上安装开发环境 window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www ...

  5. Spring-security整理

    出于某些原因,需要学习一下spring的安全框架.(研究半天,如果单单说用户认证和授权这块儿,我感觉还是shiro好用.) spring security介绍可以参考一下以下文档: (满满的羡慕啊)我 ...

  6. iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码

    iOS精选源码 以tableview的section为整体添加阴影效果/ta'b'le'vi'e'w顶部悬浮.... 一个可以轻松应用自定义过滤器的视频捕获框架. 基于UITableView的组件,旨 ...

  7. python数据类型:字典Dictionary

    python数据类型:字典Dictionary 字典是一种可变容器模型,可以存储任意类型对象 键是唯一的,但是值不需要唯一 值可以取任何数据类型,但是键必须是不可变的,如字符串,数字,元组 创建字典: ...

  8. dtree加载菜单基本使用方法

    步骤1:官网下载dtree.zip包,官网地址:http://destroydrop.com/javascripts/tree/,文件包括dtree.css,dtree.js和api.html和例子: ...

  9. mysql数据库常用命令入门

    查询所有数据库 show databases; 创建数据库 create database mytest001 default character set utf8; 查看数据库的默认字符集 show ...

  10. SQL update 关联更改,内部需要引用表名

    select A.Id,A.Email,( select C.Email from [nopCommerce].[dbo].[Customer] C left join [nopCommerce].[ ...