侧边栏壁纸
博主头像
牧之

道阻且长、行则将至

  • 累计撰写 49 篇文章
  • 累计创建 32 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

Emmet入门

牧之
2020-11-21 / 0 评论 / 0 点赞 / 51 阅读 / 508 字
温馨提示:
本文最后更新于 2022-06-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

简介

Emmet — the essential toolkit for web-developers

Emmet is a web-developer’s toolkit for boosting HTML & CSS code writing.

With Emmet, you can type expressions (abbreviations) similar to CSS selectors and convert them into code fragment with a single keystroke.

Emmet(以前名为Zen Coding是一套面向文本编辑器插件,它允许通过内容辅助高速度的编写和编辑HTMLXMLXSL和其他结构化的代码格式。此项目2008年由Vadim Makeev发起,并由Sergey Chikuyonok和其他Emmet用户基于Zen Coding 2.0的概念继续积极开发。这套工具已经被一些高端的文本编辑器采纳,以及存在于Emmet团队开发或其他人独立实现的插件中。不过,Emmet独立于任何文本编辑器,它的引擎可以直接处理文本,而无需与任何特定软件相关。

Emmet以MIT许可证开源。

Emmet使用特定的语法来展开小段代码,它类似CSS选择器,使其成为完整的HTML代码。

简单说一下用法:

假如你需要写这样一段代码:

<ul>    
    <li class="item001"></li>    
    <li class="item002"></li>    
    <li class="item003"></li>    
    <li class="item004"></li>    
    <li class="item005"></li>
</ul>

如果纯手工敲键盘的话你需要从头敲到尾,或许一些老司机会复制li那一行复制一下。但是对于使用Emmet的玩家来说,只需要在键盘上敲出以下几个字符:

ul>li.item$$$*5

敲完之后按一下组合键Ctrl+e(热键可修改),即可得到和上面一样的代码了。

这种字符及其规则,就是Emmet语法,可以参考下面的 github 网址查看文档,下面也提供了一份 Emmet Cheat Sheet 以供学习。

github地址:

https://docs.emmet.io/cheat-sheet/

https://github.com/emmetio

0

评论区