资讯专栏INFORMATION COLUMN

“一键”生成HTML——Emmet插件常用语法

wangtdgoodluck / 1570人阅读

摘要:是一款文本编辑器的插件,用来快速生成复杂的代码,只要掌握一些常用的语法类似于选择器,就可以减少重复编码的工作主要是懒。我个人惯用的是,因此下文介绍的语法仅在测试通过,不过其它平台应该也不会有什么出入。快捷键使用和作为自动生成代码的触发器。

Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒)。
我个人惯用的是sublime,因此下文介绍的语法仅在sublime测试通过,不过其它平台应该也不会有什么出入。

使用Emmet前提:设置当前为HTML语法模式

在sublime中启用Emmet,必须把当前代码的语法模式改为HTML,如果本来就是.html文件那就没问题;如果是新建的文件还没有保存过的,则需要手动先设置为HTML:

在sublime右下角点击Plain Text,弹出菜单,选择HTML

按下Ctrl + Shift + P,打开命令控制台,输入“HTML”,选择Set Syntax:HTML即可。

快捷键

Emmet使用TabCtrl + e作为自动生成HTML代码的触发器。

如上图所示,输入完生成HTML的语句后,按下TabCtrl + e,即可生成对应的HTML代码:

Emmet常用语法

Emmet的语法有很多,还为了进一步提高效率而为比较长的标签都设置了缩写,我个人认为记住常用的语法即可,缩写什么的真的是学习成本太高了。

生成HTML结构:!

输入!按下Tab,即可生成标准的HTML5结构:

实际上也是可以生成HTML4的结构的,但毕竟已经过时了,这里按下不表。

后代:>

div>ul>li

兄弟:+

div>label+input

分组:()

当我们需要写一些比较复杂的HTML结构时,有两种方式能实现,其一是上级^,但是我觉得有点逆推的意味,思路上比较绕,不好用;另外一种就是分组()了,这是程序员普遍具有的分治思想的体现。
div>(ul>li)+(ol>li)

重复多个:*

div>ul>li*5

ID:#,类:.

ID和类可以同时使用也可以分别独立使用:

div#article.container

div#article

div.container

属性:[attr="val"]

label[for="passwd"]

文本内容:{}

div>a{点这里跳转}

唯一比较常用的缩写:input:type

里,type属性是必定要填的(你忽略type="text"我就鄙视你),而且各个type都还满常用的,因此这个缩写可以记一下:input:type等价于input[type="type"]
因为type属性可以取的值太多了,这里仅列出几个常用的作为示例:

input:text

input:radio

input:checkbox

参考资料

Emmet官方文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49705.html

相关文章

  • 插件分享大会[不定期更新]

    摘要:最近老是在重装系统,每次重装就要重新配置环境,安装软件,安装插件。因为基本只有这个插件,才可以设置一个文件夹下三个项目能分别传到不同的服务器中。在全球最大的同性交友网站中,只要鼠标悬停到一个项目上时,就会在一个弹窗显示该项目的信息。 最近老是在重装系统,每次重装就要重新配置环境,安装软件,安装插件。每次重装的时候,都不知道自己以前到底用过什么软件插件。所以,还是写一篇文章记录下来,顺便...

    CastlePeaK 评论0 收藏0
  • 插件分享大会[不定期更新]

    摘要:最近老是在重装系统,每次重装就要重新配置环境,安装软件,安装插件。因为基本只有这个插件,才可以设置一个文件夹下三个项目能分别传到不同的服务器中。在全球最大的同性交友网站中,只要鼠标悬停到一个项目上时,就会在一个弹窗显示该项目的信息。 最近老是在重装系统,每次重装就要重新配置环境,安装软件,安装插件。每次重装的时候,都不知道自己以前到底用过什么软件插件。所以,还是写一篇文章记录下来,顺便...

    darkbug 评论0 收藏0
  • 超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

    摘要:分享一些超好用插件,打造一个不一样的浏览器编辑器。一谷歌浏览器插件谷歌访问助手强烈推荐一键安装,无需其他配置,即可访问谷歌。谷歌浏览器是很耗内存的,该插件会自动挂起长时间未使用的网页,来释放系统资源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件,打造一个不一样的 GitHub、浏览器、...

    Rango 评论0 收藏0
  • sublime Text3 前端常用插件

    摘要:前端常用插件文件切换提供了一个非常快速的方式来打开新的文件。继续,在包控制中安装插件。使用快捷键功能检测并一键去除代码中多余的空格使用安装插件并重启,即可自动提示多余空格。 sublime Text3 前端常用插件 - File Switching (文件切换) --- Sublime Text提供了一个非常快速的方式来打开新的文件。只要按下Ctrl+ P并开始输入你想要打开的文件的...

    xcc3641 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<