Emmet

Stella981
• 阅读 664

http://jingyan.baidu.com/article/92255446a87900851648f4d6.html

Emmet(Zen Coding)是前端开发快速输入代码的一种方式。
作为文本编辑器的插件存在,可以快速帮助编写HTML和CSS代码。
官网: http://emmet.io/

HTML代码

1. 初始化文档
HTML文档需要包含一些固定的标签,比如,,等,现在使用Emmet可以很快输入这些标签。比如输入 “!”或 "html:5",然后按Tab键或ctrl+e:
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型

2. 轻松添加类、id、文本和属性
连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#foo,会自动生成:


连续输入类和id,比如p.bar#foo,会自动生成:


定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成:

foo

 

3. 嵌套
现在可以使用1行代码就可以实现标签的嵌套
>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行
h1+h2: 

p>span:

p>span^p:

4. 分组
可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2)会自动生成:

 

 

5. 隐式标签
声明一个带类的标签,只需输入div.item,就会生成


在过去版本中,可以省略掉div,即输入.item即可生成

现在如果只输入.item,则Emmet会根据父标签进行判定。比如在
    中输入.item,就会生成

  • 下面是所有的隐式标签名称:
    li:用于ul和ol中
    tr:用于table、tbody、thead和tfoot中
    td:用于tr中
    option:用于select和optgroup中

    6. 定义多个元素
    要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

       
    •  
    •  

    7. 定义多个带属性的元素
    如输入 ul>li.item$*3,将会生成如下代码:

       
    •  
    •  
    Emmet中如果需要指定反向编号,可以使用"$@-"符号
       
    •  
    •  
    如果要从指定的数字开始编号,可以使用ul>li.item$@3\*5
       
    •  
    •  
    •  
    •  

    CSS缩写

    1. 值
    比如要定义元素的高度,只需输入w100,即可生成: width: 100px;
    除了px,也可以生成其他单位,比如输入:h10p+m5e就生成:
        height: 10%;
        margin: 5em;
    单位别名列表:
     p表示%
    e表示em
    x表示ex

    2. 附加属性
    缩写,比如@f,可以生成
    @font-face {
        font-family:;
        src:url();
      }
    一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成
    @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;
      }

    3. 模糊匹配
    如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:overflow: hidden;

    4. 供应商前缀
    如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:
      -webkit-transition: prop time;
      -o-transition: prop time;
      transition: prop time;
    可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:
        -webkit-super-foo: ;
        -moz-super-foo: ;
        -ms-super-foo: ;
        -o-super-foo: ;
        super-foo: ;
    如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
    前缀缩写如下:
    w 表示 -webkit-
    m 表示 -moz-
    s 表示 -ms-
    o 表示 -o-
    -wm-trf自动生成:
       -webkit-transform: ;
        -moz-transform: ;
        transform: ;

    5. 渐变输入
    lg(left, #fff 50%, #000),会生成如下代码:
        background-image: -webkit-linear-gradient(left, #fff 50%, #000);
        background-image: -o-linear-gradient(left, #fff 50%, #000);
        background-image: linear-gradient(to right, #fff 50%, #000);

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这