首页 > 代码库 > ATOM基础教程一使用前端插件emmet(16)

ATOM基础教程一使用前端插件emmet(16)

emmet简介

 

http://blog.csdn.net/zsl10/article/details/51956791

emmet的前身是Zen coding,从事Web前端开发的工程师对该插件并不陌生,emmet使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。 
emmet的主要功能有:

  • snippet(代码片段)
  • abbreviation expand(简写展开)

emmet的主要特性有:

  • 简写支持嵌套
  • 简写支持分组
  • 简写支持乘法
  • 简写支持自增和自减,起序,编号

使用emmet快速生成HTML标签

1 .快速编写HTML代码

  • html:5 或!:用于HTML5文档类型
  • html:xt:用于XHTML过渡文档类型
  • html:4s:用于HTML4严格文档类型

使用:输入html:5/html:xt/html:4s按下TAB键 
技术分享

2 .添加class、id、文本和属性

  • class: .
  • id: #
  • 属性: []
  • 内容:{}

  • 添加class 
    技术分享

  • 添加id 
    技术分享
  • 添加HTML元素内容 
     技术分享
  • 添加HTML元素属性 
    技术分享 
    3 .嵌套

  • > :子元素符号 
    技术分享

  • +:同级标签符号 
    技术分享
  • ^:使该符号后的标签提升到上一级 
    技术分享 
    4 .定义多个元素

  • *:乘法 
    技术分享

  • $:自增($:从1开始递增,$$:从01开始递增,依次类推) 
    技术分享

技术分享

  • $@-:自减 
    技术分享

  • $@数字:起序 
    技术分享 
    5 .隐式标签 
    声明一个带类的标签,Emmet会根据父标签进行判定要生成的标签,比如在<ul>中输入.item,就会生成<li class="item"></li>

    隐式标签名称:

    • li:用于ul和ol中
    • tr:用于table、tbody、thead和tfoot中
    • td:用于tr中
    • option:用于select和optgroup中

    技术分享

6 .分组 
通过()进行分组,快速生成代码 
技术分享

使用emmet快速生成CSS代码

1 .值 
单位别名:

  • p :%
  • e :em
  • x:ex

技术分享

技术分享

2 .模糊匹配 
有些缩写不太确定的时候,emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

overflow: hidden; 
  • 1
  • 1

技术分享

emmet常用缩写

只列举一部分,其他的可以对比。 
1. HTML

  • a
<a href=http://www.mamicode.com/""></a>
  • 1
  • 1
  • link
<link rel="stylesheet" href=http://www.mamicode.com/"" />
  • 1
  • 1
  • meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"  />
  • 1
  • 1
  • script:src
<script src=http://www.mamicode.com/""></script>
  • 1
  • 1
  • form:post
<form action="" method="post"></form>
  • 1
  • 1
  • inp
<input type="text" name="" id="" />
  • 1
  • 1
  • input:h
<input type="hidden" name="" />
  • 1
  • 1
  • input:p
<input type="password" name="" id="" />
  • 1
  • 1
  • select
<select name="" id=""></select>
  • 1
  • 1
  • select+
<select name="" id="">
    <option value=http://www.mamicode.com/""></option> 
</select>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • opt
<option value=http://www.mamicode.com/""></option>
  • 1
  • 1
  • tarea
<textarea name="" id="" cols="30" rows="10"></textarea>
  • 1
  • 1
  • btn:s
<button type="submit"></button>
  • 1
  • 1

2. CSS

  • pos:a
position:absolute;
  • 1
  • 1
  • t
top:;
  • 1
  • 1
  • r
right:;
  • 1
  • 1
  • fl
float:left;
  • 1
  • 1
  • d:n
display:none;
  • 1
  • 1
  • ov:h
overflow:hidden;
  • 1
  • 1
  • cur:p
cursor:pointer;
  • 1
  • 1
  • mb
margin-bottom:;
  • 1
  • 1
  • pl
padding-left:;
  • 1
  • 1
  • miw
min-width:;
  • 1
  • 1
  • ta:c
text-align:center;
  • 1
  • 1
  • bg
background:#000;
  • 1
  • 2
  • 1
  • 2
  • bg+ 
    background:#fff url() 0 0 no-repeat;
  • bgc
background-color:#fff;
  • 1
  • 1
    • bd+ 
      border:1px solid #000;
    • ac:c 
      align-content:center;

ATOM基础教程一使用前端插件emmet(16)