Zen Coding

1.zending：  一种快速编写HTML/CSS代码的方法,现在改名为Emmet

优点：减少我们的代码书写，提高开发效率

2.如何快速写出下面的结构:      

使用zencoding:           div#wrap>div#header+div#content+div#footer

使用 上面这一行代码之后，按一次tab键，即可生成上面的结构。

4.webstorm快捷键，不需要使用ctr+ s,自动保存

ctr  + d        复制上一行代码

ctr +shift + /           块注释:

ctr +/                   单行注释

ctr +f             查找

ctr +r            查找并且替换

ctr +z          退回上一部

ctr  1 -        折叠

ctr1   +     打开

tab自动补全

按住ctr键，悬浮到选择器或者文件上，可以找到该文件或者该选择器

5.webstorm样式:

File/ Settings/ Editor / Color & Fonts /Font  

6. zencoding详解

6.1

给元素添加子元素,使用  >         div#wrap>div#header

给元素添加兄弟元素，使用 +         div#header+div#content

返回上一级元素，使用 ^                 #wrap>.header>a^p.cc  

注意： 使用+或者>，依然可以指定id或者class

6.2

生成多个元素，使用*号

<1>生成5个li          div#content>ul.nav>li*5  

<2>生成5个li且内部有a          div#content>ul.nav>li*5>a.item     

6.3

使用$ 代表一个索引值，从1开始，多个$代表多位数

分别制定不同的class,item1....item5

ul.nav>li.item$$*5

6.4

分组： 使用括号可以分组，看作一个整体

<1>单个元素重复多次:      .header>p.text*5

<2>整体重复多次：     (.header>p.text)*5

<3>大分组             (.header>p.text)+(.content>ul>li)

6.5

内部文本： 使用 {}可以添加元素内部的文本     ul.nav>li.item{第$$  块金牌}*5

指定不同的class，且内容也不同             ul>li.item${金牌$$}*5

zencoding详解1

zencoding详解1

zencoding详解1