前端开发必备！Emmet常用语法

最新推荐文章于 2025-05-19 00:47:51 发布

Jsonkim

最新推荐文章于 2025-05-19 00:47:51 发布

阅读量448

点赞数

CC 4.0 BY-SA版权

分类专栏： /root/WEB前端文章标签：前端开发

本文链接：https://blog.youkuaiyun.com/u013987661/article/details/78810712

/root/WEB前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种HTML速记语法，通过使用简单的符号和结构来快速生成常见的HTML元素组合。涵盖了后代选择器、兄弟节点、上级节点、分组、乘法、自增符号等用法，并展示了如何设置ID、类及自定义属性。

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

1.后代：nav>ul>li

<div class="nav">
    <ul>
        <li></li>
    </ul>
</div>

2.兄弟：div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

3.上级：div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

4.分组：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>

5.乘法：ul>li*5

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

6.自增符号：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>

7.id和class：ul#id233>span.span233

<ul id="id233"><span class="span233"></span></ul>

8.自定义属性：p[title=”Hello world”]

<p title="Hello world"></p>

9.文本内容：a{Click me}

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

10.html模板：!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>