Emmet文档缩写语法

最新推荐文章于 2021-07-11 05:03:11 发布

咸鱼瑟瑟发抖

最新推荐文章于 2021-07-11 05:03:11 发布

阅读量577

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/tqy903/article/details/113270066

版权

工具专栏收录该内容

4 篇文章

订阅专栏

Emmet 使用类似CSS选择器的语法描述元素位置和属性。包括：元素、嵌套运算符（单个元素、子元素、兄弟元素、爬升）、乘法、分组、属性、编号、文本、注释等。例如，使用`div>span+a`生成`<div><span></span><a></a></div>`结构。此外，支持属性定义、编号和文本插入。Emmet的空格作为停止符号，用于区分不同部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缩略语法
Emmet使用类似CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。
元素
可以使用div或p等元素的名称来生成HTML标记。Emmet没有预定义的可用标记名集。可以编写任何单词并将其转换为标记：div、foo等。
嵌套运算符
嵌套运算符用于在生成的树中定位缩写元素：是否应该将其放置在上下元素内部或附近。

1. 单个元素：元素+tab键

<!-- p 按下tab键扩展后得到下面代码 -->
<p></p>

2. 子元素：>

可以使用>操作符将元素嵌套在彼此内部

<!-- div>ul>li -->
<div>
    <ul>
        <li></li>
    </ul>
</div>

3. 兄弟元素：+

使用+运算符将图元彼此靠近放置在同一标高上

<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>

4. 爬升：^

使用>操作符，从生成的树中向下下降，所有同级元素的位置将根据最深的元素进行解析

<!-- div+div>p>span+em -->
<div></div>
<div>
	<p><span></span><em></em></p>
</div>

使用^操作符，可以在树上爬上一层，并更改应显示以下元素的上下文

<!-- div+div>p>span+em^bq -->
<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

使用任意多个^运算符，每个运算符将向上移动一层

<!-- div+div>p>span+em^^^bq -->
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

5. 乘法：*

通过*运算符可以定义元素的输出次数

<!-- ul>li*5 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

6. 分组：( )

分组可以用一个缩写写下一整个页面的标记，但不建议这样写。

使用（）对复杂缩写中的子树进行分组

<!-- 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>

如果使用的是浏览器的DOM，可能会将分组视为文档片段：每个组都包含缩写子树，并且以下所有元素都插入到与组的第一个元素相同的级别。

可以将组嵌套在彼此内部，并且使用 * 运算符将他们组合起来

<!-- (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>

7. 属性：#id、.class、[ ]自定义

属性运算符用于修改输出元素的属性，如在HTML和XML文件中，可以快速的将类属性添加到生成的元素中。

#id 和 .class属性

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

自定义属性[ ]
可以使用[ ]符号，向元素添加自定义属性。

<!-- td[title="Hello world!" colspan=3 color] -->
<td title="Hello world!" colspan="3" color=""></td>

8. 编号：$

使用*可以重复元素，但可以对元素进行编号，将$运算符放在元素名称、属性名称、或属性值内，以输出当前重复元素的数目。

<!-- ul>li.item$*5 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

可以在一行中使用多个$来将数字填充为0

<!-- 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>

9. 更改编号基础和方向：@

使用@修饰符，可以更改编号方向(升序或降序)和基数(初始值)。

更改方向(降序)：$@-

<!-- ul>li.item$@-*5 -->
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

更改计数器基值(初始值)：$@N

<!-- ul>li.item$@3*5 -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

同时修改基数和方向：$@-N

<!-- ul>li.item$@-3*5 -->
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

10. 文本：{ }

可以使用{}向元素添加文本

<!-- a{hello world} -->
<a href="">hello world</a>

注意：
{}作为一个单独的元素使用和解析，但在元素后面时有特殊含义，如 a{click}和a>{click} 将产生相同的输出，但 a{click}+b{here} 和 a>{click}+b{here} 不同。

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

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

区别：在例2中，b元素被放在了a元素中。当{ }在元素之后写入时，它不会更改父上下文。

<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>

<!-- p{Click }+a{here}+{ to continue} -->
<p>Click </p>
<a href="">here</a> to continue

11. 缩写格式注释：在Emmet中空格是停止符号

在emmet中空格是一个停止符号，如果在元素和运算符间使用空格，Emmet会停止缩写解析。

(header > ul.nav > li*5) + footer

元素类型

在HTML和XML文档中，当展开缩写时，所有缩写部分都会及时转换为HTML/XML标记。但是像a、img这样的某些元素被转换成具有预定义属性的元素。
所有Emmet元素定义都以以下格式存储在snippets.json文件中：

{
    "html": {
        "abbreviations": {
            "a": "<a href=\"\">",
            "link": "<link rel=\"stylesheet\" href=\"\" />"
            ...
        },
        "snippets": {
            "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"
            ...
        }
    },

    "css": {
        ...
    }
}

第一级定义了元素的语法名称。
第二级元素定义分为两个部分：片段（snippets）和缩写（abbreviations）。

片段

片段指数普通代码块，就像所有程序员的编辑器一样。可以在那里键入任何内容，它将按原样输出，而不进行任何转换。

缩写

缩写实际上是带有一些数据提示的构建块，由于Emmet主要用于编写HTML和XML标记，缩写定义使用了XML格式来描述元素。

Emmet解析缩写定义并检索以下数据：

元素名称
默认属性
属性顺序
属性的默认值
元素应包含结束标记

可以通过[ ]自定义属性来覆盖默认属性并添加新的属性值：

<!-- link -->
<link rel="stylesheet" href="">

<!-- link[rel=prefetch title="Hello world"] -->
<link rel="prefetch" href="" title="Hello world">

还可以>添加子元素强制Emmet输出结束标记：

<!-- link -->
<link rel="stylesheet" href="">

<!-- link>xsl:apply-templates -->
<link rel="stylesheet" href="">
    <xsl:apply-templates></xsl:apply-templates>
</link>

别名

在代码片段的缩写部分，json还可以定义别名：一种常用的缩写。
别名可以用于定义：

长标记名的短名称
引用常用缩写

在json文件片段代码中，可以找到以下文件：

...
"html": {
    "abbreviations": {
        "bq": "blockquote",
        "ol+": "ol>li"
    }
}

当扩展开bq缩写时，Emmet会查找blockquote缩写的定义。如果它不存在，将指输出blockquote标记对元素。ol缩写实际上输出与ol+li相同。不需要使用+来创建缩写别名。

隐式标记名

每次用隐式名称扩展缩写时，Emmet都会查看父级标记名：

li 代表 ul、ol
tr 代表 table、tbody、thead、tfoot
td 代表 tr
option 代表 select、optgroup

一些具有隐式和显式标记名的缩写等价：

.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>#row$*4>[colspan=2]	em>span.info

Emmet文档官网：https://docs.emmet.io/abbreviations/