Emment学习

最新推荐文章于 2024-03-16 08:05:41 发布

正在崛起的小菜菜

最新推荐文章于 2024-03-16 08:05:41 发布

阅读量642

点赞数 1

分类专栏： Emment 文章标签： Emment

本文链接：https://blog.csdn.net/u010073893/article/details/51333399

版权

Emment 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Emment 简介

简单语法整理：

简洁语法，按下拓展键（默认为tab）

<!--后代>-->
div>span
<div><span></span></div>

<!--兄弟+-->
div+p
<div></div>
<p></p>

<!--上级^-->
div+div>p+span.name+em^span^^div
<div></div>
<div>
    <p><span class="name"></span><em></em></p>
    <span></span>
</div>
<div></div>

<!--分组()-->
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>

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


<!--自增符号$-->
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>

ul>li.item$$$@-*5
<ul>
    <li class="item005"></li>
    <li class="item004"></li>
    <li class="item003"></li>
    <li class="item002"></li>
    <li class="item001"></li>
</ul>

<!--ID和类属性-->
.header
<div class="header"></div>

#header
<div id="header"></div>

ul>li.item$$@-*5
<ul>
    <li class="item05"></li>
    <li class="item04"></li>
    <li class="item03"></li>
    <li class="item02"></li>
    <li class="item01"></li>
</ul>

<!--自定义属性-->
p[title="Hello world"]
<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>

<!--文本{}-->
a{Click me}
<a href="">Click me</a>

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

<!--隐式标签-->
ul.class
<ul>
    <li class="class"></li>
</ul>

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

<!--缩写：!-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

br
<br>

摘自：http://www.w3cplus.com/tools/emmet-cheat-sheet.html

正在崛起的小菜菜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Emment学习

Emment 简介简单语法整理：简洁语法，按下拓展键（默认为tab）-->.header#headerul>li.item$$@-*5 p[title="Hello world"]td[rowspan=2 colspan=3 title]a{Cli
复制链接

扫一扫