举个栗子:Sublime Text3中使用Emmet语法补全代码

2017-11-16 0 1,459 百度已收录

Sublime Text3是一款非常好用的文本编辑工具,拥有非常多的插件可以提高编码效率。其中Emmet的插件被称为前端神器,由于Emmet插件非常强大的代码提示功能,该插件可以做到尽量少写代码。至于Emmet插件的安装,小编之前也有讲过,不了解的朋友可以参考下文。

10Sublime插件Emmet的安装及Tab补全代码问题解决

工具/原料

  • Sublime Text3

方法/步骤

  1. 1

    首先将一下快速生成html文件结构的快捷键,我们常用的是html:5+Tab键,现在还可以使用!+Tab键,如下图所示。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  2. 2

    下面我们看一下如何快速生成标签,并给标签设置class值。我们在body标签中输入标签名.类名+Tab键便可生成,如div.father+Tab。如下还想给这个标签设置id值,则输入标签名.类名#id名+Tab键,如下图所示。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  3. 3

    如果设置的div标签,则还有一种特殊的写法,即可以省去前面的标签名,直接使用.类名#id名+Tab键,便可以生成div标签并设置class和id的值,如下图所示。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  4. 4

    接着我们讲解设置同级标签,如果想同时生成p标签和div标签,则使用标签名+标签名+Tab键,当然class和id的设置也包括在标签名中,如p.father#one+.don#two便可以同时生成p标签和div标签,div标签可以省掉前面的标签名,如下图所示。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  5. 5

    有时候标签中会嵌套标签,生成子类标签的Emmet语法是标签名>子标签名*个数>子标签名> 子标签名+Tab,如下图所示。我们要给下图中的a标签设置href属性,则将该属性设置在[]中即可。如想要给a标签设置内容则使用{文本$},$符表示数量为递增的。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  6. 6

     如果我们想要生成与子标签同级标,则使用标签名>子标签名*个数>子标签名^^子标签名+tab,如下图所示,ul标签中有4个li标签,并且生成了与ul标签同级的p标签。

    举个栗子:Sublime Text3中使用Emmet语法补全代码

  7. 7

    除了上述的html代码可以使用Emmet语法来简化开发以外,还可以在css代码中使用Emmet语法,例如输入w100+Tab键便可以生成width:100px的代码。Emmet语法代码的简写非常多,此处便不一一列举了,可以参考下图。

    举个栗子:Sublime Text3中使用Emmet语法补全代码END

注意事项

  • 使用Emmet语法前需要安装Emmet插件。
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

栗子博客 网站 举个栗子:Sublime Text3中使用Emmet语法补全代码 https://www.lizi.tw/web/1490.html

建筑工地上施工员,闲暇时弄个博客打发时间,

常见问题
  • 1、杰齐1.7仅适用于PHP5.2 2、需Zend支持 3、尽量使用宝塔面板 4、尽量使用Windows 系统,关关对Linux支持不太友好。
查看详情

相关文章

评论
暂无评论
举个栗子:Sublime Text3中使用Emmet语法补全代码-海报

分享本文封面