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. 20)PHP,数组的遍历

    然后开始使用这2个函数和while循环结构来实现数组遍历: 形式: reset($arr1); while ( list ($key, $value ) = each( $arr1) ) //从数组$ ...

  2. 47)PHP,数据库多表连接

    https://www.w3cschool.cn/mysql/56ik1sqv.html

  3. 吴裕雄--天生自然python学习笔记:python 用pygame模块检测键盘事件和鼠标事件

    用户可通过键盘输入来操控游戏中角色的运动,取得键盘事件的方法有以下两种 : 常用的按键与键盘常数对应表 : 按下右箭头键,蓝色小球会 向 右移动:按住右箭头键不放 , 球体会快速 向 右移 动, 若到 ...

  4. nginx+php+扩展件安装实践版

    一.安装各种软件包 yum -y install wget git vim lrzsz unzip zip gcc make gd-devel bzip2 bzip2-devel libcurl li ...

  5. 59)PHP,管理员表中所存在的项

    用户ID 用户名 用户密码 用户权限(就是他的角色等级,比如是1级  2级,  三级等等) 上次登录的IP 上次登录的时间

  6. Android7.0 USBCamera设备/dev/video0无读权限

    Android7.0的系统,具备root权限,执行 # adb shell # su # chmod 777 /dev/video0 在5.0的系统中可以预览图像,7.0返回无读权限 File fil ...

  7. vivado操作基本问题

    1.zynq开发板的构造以及推崇的设计理念 设计推崇的理念是设计有知识产权的可重用的IP模块. 2.操作过程中遇到的问题以及解决方法 (1)综合速度慢解决方案: 我们都知道Vivado编译起来相当的慢 ...

  8. Qt OpenCV::Mat与Qt::QImage相互转换

    Mat转QImage QImage mat2qim(Mat & mat) { cvtColor(mat, mat, COLOR_BGR2RGB); QImage qim((const unsi ...

  9. IP地址结构分类(包括主机号和网络好计算)

    IP地址:互联网上的每个接口的唯一标识. 长度:32bit. 五类不同的互联网地址格式: 各类IP地址范围: 点分十进制:32位的地址通常写成四个十进制数,其中每个整数对应一个字节. 主机号和网络的计 ...

  10. ./config\make\make install命令详解

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