zencoding

emmet

.item，     ： <div class="item"></div>
h1{foo}     :  <h1>foo</h1>
h1[ref=id]  :  <h1 ref="id"></h1>
img^a       ： <img src=""><a href="" alt=""></a>
           
td.item*6
td.item$*6

div#color+div#sharp
table#list>tr*3>td.item$*6
div>p#foo$*3>a

1.html:5<c_y>,
2.div>p#foo$*3>a<c-y>,
3.封装：
	test1
	test2
	test3  
  可视模式选中<c-y>,
  在命令行：ul>li*      table>tr>td*

  则生成如下：
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
4.在标签中<c_y>d,则选中整个table
	<table></table>

区别：
td.item*6
td.item$*6

div#color+div#sharp
table#list>tr*3>td.item$*6
div>p#foo$*3>a

1.html:5<c_y>,
2.div>p#foo$*3>a<c-y>,
3.封装：
	test1
	test2
	test3  
  可视模式选中<c-y>,
  在命令行：ul>li*      table>tr>td*

  则生成如下：
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
4.在标签中<c_y>d,则选中整个table
	<table></table>
5.<c_y>D 选中下一层标签
(6.合并行：可视模式选取多行，<c_y>m)
(7.去掉标签：)
  <div class="foo">
  	<a>cursor is here</a>
  </div>
  ---------------------
  Type '<c-y>k' in insert mode.
  ---------------------
  <div class="foo">

  </div>
  ---------------------
  And type '<c-y>k' in there again.
8.拆分和合并标签
  Move the cursor inside block
  ---------------------
  <div class="foo">
  	cursor is here
  </div>
  ---------------------
  Type '<c-y>j' in insert mode.
  ---------------------
  <div class="foo"/>
  ---------------------

  And then type '<c-y>j' in there again.
  ---------------------
  <div class="foo">
  </div>
  ---------------------
9.增加或删除注释
  Move cursor inside the block
  ---------------------
  <div>
  	hello world
  </div>
  ---------------------
  Type '<c-y>/' in insert mode.
  ---------------------
  <!-- <div>
  	hello world
  </div> -->
  ---------------------
  Type '<c-y>/' in there again.
  ---------------------
  <div>
  	hello world
  </div>
  ---------------------
14. Code Pretty
    *emmet-code-pretty* *<C-Y>c*
int main() {
  puts("hello world!");
}
(10.设置URL)
  Move cursor to URL
  ---------------------
  http://www.google.com/
  ---------------------
  Type '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------
(5. Go to Next Edit Point)
  |emmet-goto-next-point| |<C-Y>n|
  
(6. Go to Previous Edit Point)
  |emmet-goto-previous-point|