• Emmet 之 HTML 语法


    一、简写语法

    Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性,实现 HTML/XML/CSS 等代码的智能自动补全。

    其通过文件名后缀识别文件类型,从而使用对应的自动补全语法。默认自动补全快捷键为制表符(Tab)。

    下文中的“自动补全”均指“按下快捷键后自动补全”。

    注意:Emmet 语法中的空格表示结束解析,所以书写语句中不能出现空格。

    1、元素

    在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。

    // before
    div
    foo

    // after

    <div></div>
    <foo></foo>

    输入 ! 或者 html:5 可以自动补全为 HTML5 基本结构。想要输出 HTML4 文本类型申明可以输入 html:4s 或者 html:4t 。

    // before
    ! (或html:5)
    
    // after
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    2、嵌套操作

    1)child:使用 “>” 生成子元素

    // before
    div>ul>li
    
    // after
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

    2) Sibling: 使用符号 “+” 生成兄弟元素

    // before
    div+p+bq
    
    // after
    <div></div>
    <p></p>
    <blockquote></blockquote>

    3) Climb-up:使用 “^” 生成父元素,与 “>” 相反

    // before
    div+div>p>span+em^bq
    
    // after
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>

    你甚至可以使用多个 “^”。

    // before
    div+div>p>span+em^^^bq
    
    // after
    <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

    4) Multiplication:使用 “*” 操作符生成多个元素

    // before
    div>ul>li*5
    
    // after
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    5) Grouping:使用 “()” 操作符将元素分组,实现更复杂的简写任务

    // before
    // "+" 后面的元素与括号中的第一个元素属于兄弟关系 div>(header>ul>li*2)+footer>p //after
    <div> <header> <ul> <li></li> <li></li> </ul> </header> <footer> <p></p> </footer> </div>

    3. 属性操作

    在简写时就可以为元素设置属性。

    1) id 与 class

    简写时,元素与 id 属性值之间用 “#” 分隔,与 class 属性值之间用 “.” 分隔。

    // before
    div#header+div.page+div#footer.class1.class2.class3
    
    // after
    <div id="header"></div>
    <div class="page"></div>
    <div id="footer" class="class1 class2 class3"></div>

    2) 其他属性

    使用 [attr] 标记添加其他属性。

    // before
    td[title='hello' colspan=3]
    
    // after
    <td title="hello" colspan="3"></td>

    注意:

    • 方括号中可添加任意数量的属性
    • 不给定属性值,则属性值为""。td[colspan title]将得到 <td colspan="" title=""></td>
    • 属性值可用单引号或双引号,输出统一为双引号
    • 如果属性值中没有空格,则引号可省略

    3) 为条目编号

    使用 “*” 符号生成的多个元素,可用 “$” 操作符实现从1到 N 自动编号。

    // before
    li.item$*3
    
    // after
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>

    可在 “$” 后添加 “@n” 修改编号的起始值为n。

    // before
    li.item$@3*3
    
    // after
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>

    可在 “$” 后添加 “@-” 修改编号的方向。

    // before
    li.item$@-3*3
    
    // after
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>

    4. 添加文本

    使用花括号 “{}” 操作符为元素添加文本节点。

    // before
    a[href=me.htm]{click me}
    
    // after
    <a href="me.htm">click me</a>

    因为文本也是节点,所以 a[href=me.htm]{click me}a[href=me.htm]>{click me} 等价。

    但有多个元素时则要注意。

    // before
    a[href=me.htm]{click me}+p{ok}
    a[href=me.htm]>{click me}+p{ok}
    
    // after
    <a href="me.htm">click me</a>
    <p>ok</p>
    
    <a href="me.htm">click me
        <p>ok</p>
    </a>

    Emmet 的简写方式在 snippets.json 中定义,更多使用方式可通过查看该文件了解。

    对于 visual studio code 编辑器来说,该文件路径为: [安装根目录]Microsoft VS Code esourcesapp ode_modulesemmetlibsnippets.json


    参考:Emmet官方文档

  • 相关阅读:
    去掉谷歌浏览器下input框自动填充的背景色
    ajax请求中动态显示问题
    Array对象的方法有
    请求页面的方法
    IE浏览器checkbox的样式问题
    property、classmethod和staticmethod总结
    面向对象和类
    内置函数补充map、reduce和filter等
    python实现控制台的进度条功能
    python常见内置函数
  • 原文地址:https://www.cnblogs.com/goyeah/p/6161074.html
Copyright © 2020-2023  润新知