草庐IT

Emmet快速生成HTML代码的常用语法总结

Apple 2023-03-28 原文

前言

Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作,真的提升开发效率之利器。

所有的操作都是按下tab键即可瞬间完成。

一、相关语法

1. 用.来生成类名

div.aaa

按tab后生成如下:

<div class="aaa"></div>

输入

p.class1.class2.class3

输出

<p class="class1 class2 class3"></p>

2. id用#

div#aaa

按tab

<div id="aaa"></div>

3. 属性用 []

div[title='hello' colspan=3]

生成:

<div title="hello" colspan="3"></div>

4. 用$来实现编号,实际上就是个占位符 (很实用, 写几个$ 默认会有几位的数字)

li.aaa$*3

结果

<li class="aaa1"></li>
<li class="aaa2"></li>
<li class="aaa3"></li>

输入

h$[title=item$]{Header $}*3

生成

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

输入

ul>li.item$$$*5

生成

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

 

5. 用@n来修改起始值(赋值代表数字倒序,仅写 - 代表 -1,其他值 要写出对应的 -1,-2,-3 等,负几无论生成的数量是几,最后一个元素的数字就是几,比如 -3 ,则最后一个元素的 数字是3 )

li.aaa$@3*3

生成:

<li class="aaa3"></li>
<li class="aaa4"></li>
<li class="aaa5"></li>

 3可以用-3,就会变成 5,4,3

输入

li.aaa$@-3*3

生成

<li class="aaa5"></li>
<li class="aaa4"></li>
<li class="aaa3"></li>

 

6. {} 可以添加文本 (这个非常实用!!! 在想要写一些测试demo 写多个元素 分别为1,2,3,4 之类的  可以瞬间生成 !)

输入:

<div class="container">
      <div class="item item1">测试 1</div>
      <div class="item item2">测试 2</div>
      <div class="item item3">测试 3</div>
      <div class="item item4">测试 4</div>
      <div class="item item5">测试 5</div>
      <div class="item item6">测试 6</div>
      <div class="item item7">测试 7</div>
      <div class="item item8">测试 8</div>
</div> 

输入

p>{Click }+a{here}+{ to continue}

生成

<p>Click <a href="">here</a> to continue</p>

7. > 生成子元素

div>ul>li

结果

<div>
     <ul>
         <li></li>
     </ul>
</div>

8. + 生成兄弟元素

输入

div.box-left+div.box-right

生成

<div class="box-left"></div>
<div class="box-right"></div>

9. ^ 向上一级,比如写了> 进入了子级,输入这个 ^ 就可以退出到上一级继续输入

div+div>p>span+em^bq

生成

div.item*5

生成

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

11. () 将元素分组 (主要作用是省去使用 ^ 去到上一层级的符号,括号直接代替)

输入

div>(header>ul>li*2>a)+footer>p

生成

<div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

输入

(div>dl>(dt+dd)*3)+footer>p

生成

<div>
        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

 

二、隐式标签

输入

  .item

生成

<div class="item"></div>

输入

em>.item

生成

<em><span class="item"></span></em>

输入

ul>.item

生成

<ul>
      <li class="item"></li>
</ul>

输入

table>.row>.col

生成

 <table>
      <tr class="row">
        <td class="col"></td>
      </tr>
</table>

三、html标签

所有未知的缩写都会转换成标签,例如,foo → <foo></foo>

四、生成html页面基础结构【非常重要,非常好用】

输入  !  

生成

<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>Document</title>
            </head>
            <body></body>
</html>

 

参考链接:

https://www.jianshu.com/p/9352a0411fcb

http://t.zoukankan.com/haoqirui-p-12257215.html

官方文档

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

 

有关Emmet快速生成HTML代码的常用语法总结的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  5. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中,它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  6. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案? - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  7. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件,并创建一个临时验证的url以发送给同事。(理想情况下,这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针,它似乎不符合这个标准,但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  8. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  10. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

随机推荐