3、emmet语法

emmet语法小记：

创建HTML5结构
 html:5 + tab   -或者-   ! + tab   




  
  
  
  


  

设置当前文档默认字符集
meta:utf + tab   

创建当前页面缩放
meta:vp + tab   

兼容IE8浏览器
meta:compat + tab   

引用CSS文件
link:css + tab   

引用脚本
script:src + tab   

生成带类样式的标签
div.info + tab

.info + tab   

生成带id的标签
div#red + tab

#red + tab   

a标签
a:link + tab

a:mail + tab

根据标签之间的位置生成同级标签，也叫兄弟标签
h2.header+p.info + tab   

根据标签之间的位置生成后代标签
ul>li + tab   


    

  

ul>li*5 + tab   


    

    

    

    

    

  

生成当前标签的父级标签，也叫上级标签：
h2>span^p.info + tab   

生成标签时，同时创建自定义属性
p[title='这是一段说明文字'] + tab   

生成标签时，同时创建内部文本
a[href='http://www.baidu.com']{百度} + tab   

百度

综合练习：快速生成一个有8个列表的导航
ul.list>li.item*8>a{导航} + tab   


    
导航
    
导航
    
导航
    
导航
    
导航
    
导航
    
导航
    
导航

给标签自动添加序号或者排序，还是以上一例子来举例
ul.list>li.item*8>a{导航$} + tab   


    
导航1
    
导航2
    
导航3
    
导航4
    
导航5
    
导航6
    
导航7
    
导航8
  

上一个例子中如果换成2个$呢？
ul.list>li.item*8>a{导航$$} + tab   

  

    
导航01
    
导航02
    
导航03
    
导航04
    
导航05
    
导航06
    
导航07
    
导航08
  

上一个例子中如果换成倒序呢？
ul.list>li.item*8>a{导航$$@-} + tab   


    
导航08
    
导航07
    
导航06
    
导航05
    
导航04
    
导航03
    
导航02
    
导航01

上一个例子中如果换成指定序号开始呢，例如100？
ul.list>li.item*8>a{导航$$@100} + tab   


    
导航100
    
导航101
    
导航102
    
导航103
    
导航104
    
导航105
    
导航106
    
导航107
  

emmet语法先粗略的介绍到这里，更多语法，可以查看emmet官网。