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

zoukankan html css js c++ java

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=""></a>
```
- 1
- 1
- link
```
<link rel="stylesheet" href="" />
```
- 1
- 1
- meta:utf
```
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"  />
```
- 1
- 1
- script:src
```
<script src=""></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=""></option> 
</select>
```
- 1
- 2
- 3
- 1
- 2
- 3
- opt
```
<option value=""></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
查看全文