Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具,Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。
所有的快捷键都是 代码简写键+tab键 完成;
1 html:
1.1 html的初始化:
html:5 或者!
在空白的html页中会生成html5的标签文档 html:5 或! 用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型 1.2 meta标签
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
1.3 link标签
link
<link rel="stylesheet" href="">
    link:css
<link rel="stylesheet" href="style.css">
    link:favicon:浏览器显示图标
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
1.4 a链接
a
<a href=""></a>
    a:link
<a href="http://"></a>
    a[href='www.quyangyu.com']
<a href="www.quyangyu.com"></a>
1.5 input
input
<input type="text">
    inp
<input type="text" name="" id="">
1.6 初级语法1:
1.6.1 标签+tab
1.6.2 类名,id
header.head
<header class="head"></header>
        header#head
<header id="head"></header>
    1.6.3 元素的嵌套:>后代元素
article>section>aside
       <article>
<section>
<aside></aside>
</section>
</article>
    1.6.4 同级元素:+
span+p+div
        <span></span>
<p></p>
<div></div>
    1.6.5 上一级元素:^
div>div*3^p
        <div>
<div></div>
<div></div>
<div></div>
</div>
<p></p>
        div>div>div*3^^p 上上一级元素
        <div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<p></p>
    1.6.6 元素的分组:()
article>(section>aside*3+section>aside)^footer>(nav>aside*3)
        <article>
<section>
<aside></aside>
<aside></aside>
<aside></aside>
<section>
<aside></aside>
</section>
</section>
</article>
<footer>
<nav>
<aside></aside>
<aside></aside>
<aside></aside>
</nav>
</footer>
    1.6.7 元素的乘法:*
aside*5
        <aside></aside>
<aside></aside>
<aside></aside>
<aside></aside>
<aside></aside>
    1.6.8 标签属性:[]
a[href="www.quyangyu.com"]
<a href="www.quyangyu.com"></a>
        inp[type='number']
<input type="number" name="" id="">
    1.6.9 元素的内容:{}
div{哈哈哈哈}
<div>哈哈哈哈</div>
    1.6.10 元素的自增: $
div.item$*4
        <div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
        div.item${哈哈哈$}*4  //注意内容要写到个数的前面
        <div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
        @指定顺序
@-指定逆序
div.item$@-*4
        <div class="item4"></div>
<div class="item3"></div>
<div class="item2"></div>
<div class="item1"></div>
        @数值 指定开始基数
div.item$@4*4
        <div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
  1.7 隐式简写
.header
<div class="header"></div>
        #header
<div id="header"></div>
2 css:
2.1 值:
p 表示%
e 表示 em
r 表示 rem
x 表示 ex
h100
height: 100px;
        h100p
 height: 100%;
        h100e
 height: 100em;
        h100r
height: 100rem;
        h100x
height: 100ex;
    2.2 @f
        @font-face {
font-family: ;
src: url();
}
        @f+
        @font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
    2.3 ov:h、ov-h、ovh和oh
overflow: hidden;

Emmet学习教程的更多相关文章

  1. Deep Learning 19_深度学习UFLDL教程:Convolutional Neural Network_Exercise(斯坦福大学深度学习教程)

    理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...

  2. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  3. MyBatis入门学习教程-使用MyBatis对表执行CRUD操作

    上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...

  4. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

  5. 子类重载父类的方法“parent::方法名”转于 恩聪PHP学习教程

    在PHP中不能定义重名的函数,也包括不能再同一个类中定义重名的方法,所以也就没有方法重载.单在子类中可以定义和父类重名的方法,因为父类的方法已经在子类中存在,这样在子类中就可以把从父类中继承过来的方法 ...

  6. LaTeX学习教程

    本来我对LaTeX不是看好的,毕竟都是命令格式的.觉得有word就足够啦word可视化操作方便快捷. 但是由于要写论文等,在导师要求下潜心学习一下,不知不觉间被LaTeX的强大功能所吸引.现在很多出版 ...

  7. Deep Learning 13_深度学习UFLDL教程:Independent Component Analysis_Exercise(斯坦福大学深度学习教程)

    前言 理论知识:UFLDL教程.Deep learning:三十三(ICA模型).Deep learning:三十九(ICA模型练习) 实验环境:win7, matlab2015b,16G内存,2T机 ...

  8. Deep Learning 12_深度学习UFLDL教程:Sparse Coding_exercise(斯坦福大学深度学习教程)

    前言 理论知识:UFLDL教程.Deep learning:二十六(Sparse coding简单理解).Deep learning:二十七(Sparse coding中关于矩阵的范数求导).Deep ...

  9. Deep Learning 11_深度学习UFLDL教程:数据预处理(斯坦福大学深度学习教程)

    理论知识:UFLDL数据预处理和http://www.cnblogs.com/tornadomeet/archive/2013/04/20/3033149.html 数据预处理是深度学习中非常重要的一 ...

随机推荐

  1. oracle 10g/11g RAC 启停归档模式

     oracle 10g rac 启停归档模式    假设Oracle数据库执行在归档模式,当进行数据库维护时,可能须要暂停数据库的归档,在完毕维护后,再又一次启动归档模式. 通过下面步骤能够从归档 ...

  2. Spark修炼之道(高级篇)——Spark源代码阅读:第十二节 Spark SQL 处理流程分析

    作者:周志湖 以下的代码演示了通过Case Class进行表Schema定义的样例: // sc is an existing SparkContext. val sqlContext = new o ...

  3. Simditor用法

    一不小心接触到Simditor,瞬间被它优美极简的界面所吸引.Simditor是Tower开源的所见即所得的在线富文本编辑器. Simditor的理念是保持简单,避免过度的功能,每个特性都追求极致的用 ...

  4. Cordic 算法入门

    三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常是通过从已知值(比如sin(π/2)= ...

  5. centos7 安装好python3 yum报错

    解决方法: 修改两个地方 vi /usr/bin/yum 将最前面的改为#! /usr/bin/python2 vi /usr/libexec/urlgrabber-ext-down #! /usr/ ...

  6. .net 项目分层及规范

       1.解决方案命名:公司简称+产品名称.如ABCSOft.BBS 2.解决方案文件夹:以数字排序例如:01.Web表示页面层:02.IBusinessLogic表示业务逻辑接口:03.Bussin ...

  7. Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”)

    Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”) 延长支持版本(Extended Support Releas ...

  8. BFC 和 haslayout

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

  9. Springboot源码——应用程序上下文分析

    前两篇(Spring MVC源码——Root WebApplicationContext 和 Spring MVC源码——Servlet WebApplicationContext)讲述了spring ...

  10. LINQ to SQL活学活用(1):这要打破旧观念

    程序架构 如今比較经典的架构,看看以下图片. 怎样实现 在一个N层应用程序中我们怎样使用LINQ to SQL呢?这给刚刚入门的朋友的确是个难题,使用LINQ to SQL就是ORM技术,能够非常轻松 ...