sublime text 3中emmet插件使用

  • A+
所属分类:未分类

emmet(原名zen coding):是文本编辑器的一款辅助输入HTML和CSS代码的插件。现在可支持以下的文本编辑器:
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
CodeMirror2/3
Brackets
在上面列表点击你目前使用的编辑器,就可以获得对应的插件文件,安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器,所以本文就以 Sublime text 2文档编辑器中使用为例,讲解基础语法。

1,初始化文档

当我们开始编写一个html文档时,有些固定的标签是可以快速生成的。在sublime text2中新建文件,另存为html格式。输入:
!或者html:5 , 然后tab键或者Ctrl+e 快速加载HTML5文档。他类型的文档:
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型

2,单个DOM元素

在html文档中输入以下格式,然后按下tab键可以快速补全新建的元素,并赋值相应的属性:
2.1,div#myDiv 按Tab键

  • 1

2.2,“.”号表示class 名

div.myDiv

  • 1

2.3,“#”号表示Id

div#testId.testName

  • 1

2.4,大括号{}内添加的是内容

div{thisismydiv}

  • 1

2.5,方括号[]可赋值属性。

scrip[src=”/local/my/.js”]

  • 1

3,DOM元素嵌套

emmet的补全功能很强大,一行代码就可以实现DOM元素的嵌套,我们首先熟悉下元素关系符号:

:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号后的标签提升一级

下面给出了例子, 输入以下格式,然后按下Tab键,快速产生嵌套元素:

3.1,div>span

  • 1

3.2,div#parDiv>div.childnode
然后Tab

  • 1
  • 2
  • 3

3.3,div+div+div

  • 1
  • 2
  • 3

3.4,div^p

  • 1
  • 2

3.5,span>div^div#sss

  • 1
  • 2
  • 3
  • 4

注意与: span>div+div#sss 的区别:

  • 1
  • 2
  • 3
  • 4

4,嵌套结合括号

嵌套加上使用括号(),可快速生产一些代码块:

div#block1>span)+(div#block2>ul>li)+(.block3>h1) 接着按下Tab键

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

注意:以上id为block3的标签还使用了隐式标签。输入“.item”即可生成

  • 1

现在,emmet还会根据上下文判断隐式标签给出div还是其他,如:

ul>.myitem

  • 1
  • 2
  • 3

这里有素有隐式标签名称:
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

5,定义多个元素

这个是个很有用的功能。使用*定义多个元素,下面在例子中学习,同样的,输入公式后按Tab键,就不一一标注了:

5.1, ul>li*3

  • 1
  • 2
  • 3
  • 4
  • 5

5.2,结合属性使用:div#outer>div#childDiv*3

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

5.3 使用$来依次编号各元素:div>ul>li.item$*5

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.4 使用”$@-“符号号,来反向编号:div>ul>li.item$@-*5

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.5 使用“$@数字”从指定的数字开始编号,例如“$@3”从3开始标号:
div>ul>li#itme$@3*6

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

记住以上公式,能够大大提高写代码的效率。

weinxin
我的微信
这是我的微信扫一扫

发表评论

您必须登录才能发表评论!