Emmet语法

作者: readilen | 来源:发表于2018-06-23 12:19 被阅读6次

是不是你已经厌烦了输入减括号等html语法,给你推荐一个速录的插件,这个插件支持的编辑器非常广泛,语法很简单
输入缩写,按tab即可生成相应代码。

嵌套操作

>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul<li*5,将生成如下结果
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
(): 分组,如 (header>ul>li*2)+footer>p,结果如下
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>

属性操作

ID和Class,如div#header.class1.class2.class3, 结果如下:

<div id="footer" class="class1 class2 class3"></div>

也可以自定义属性,如td[title="hello" colspan=3],属性可以不用引号,结果如下:

<td title="Hello world!" colspan="3"></td>

序列

结合之前的嵌套操作和属性操作, 通过和$可以输出数字序列, 如ul>li.item$3,结果如下:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

通过@, 可以改变数字序列的顺序以及基数,如ul>li$@2-*3

<ul>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
</ul>

文字

{}: 通过大括号(curly braces)在元素中插入文字, 如a{Click me}:

<a href="">Click me</a>

注意 a{click}+b{here} 和 a>{click}+b{here} 的区别:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

相关文章

  • Emmet语法

    Emmet:一款强大的编辑器插件 Emmet的常用语法 点击这里查看链接 Emmet全部语法 链接图片

  • 前端入门03 -- Emmet,复合选择器,显示模式,背景

    Emmet语法 Emmet语法可提高html/css的编写速度,VSCode内部已经集成了该语法; 快速生成Htm...

  • html5和css3进阶----01

    emmet语法 vscode内置emmet语法结构,点击!+Tab可以生成。想生成什么标签直接输入名字。 父子关系...

  • Emmet语法

    使用Emmet语法可快速生成html框架和标签,以及css代码 ps~本人使用的vscode编辑器 Emmet语法...

  • Emmet语法

    1.Emmet语法 Emmet语法的前身是Zen coding,它使用缩写,来提高html/CSS的编写速度,Vs...

  • 前端Emmet语法文档

    Emmet语法 https://www.w3cplus.com/tools/emmet-cheat-sheet.h...

  • Emmet语法

    是不是你已经厌烦了输入减括号等html语法,给你推荐一个速录的插件,这个插件支持的编辑器非常广泛,语法很简单输入缩...

  • emmet语法

    实例 ul>li>span+p^li>span#id1.class1[titile="title1" colspa...

  • Emmet 语法

    孩子节点 > 兄弟节点 + 上级节点 ^ 倍增 * ID属性 # CLASS属性 . 自定义属性 文本 {} 组 ...

  • emmet语法

    原文:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 语...

网友评论

    本文标题:Emmet语法

    本文链接:https://www.haomeiwen.com/subject/zjmryftx.html