常用的 Emmet 语法

最新推荐文章于 2024-04-26 01:26:41 发布

「已注销」

最新推荐文章于 2024-04-26 01:26:41 发布

阅读量560

点赞数

分类专栏： WEB开发

本文链接：https://blog.csdn.net/gulang03/article/details/86527758

版权

WEB开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Emmet 是一个快速书写 HTML 代码的工具，被很多流行的 IDE 设置为默认的插件，无需再手动配置。

具体参考官方文档：https://docs.emmet.io/

常用语法展示：

    <!-- div -->
    <div></div>

    <!-- div#name -->
    <div id="name"></div>

    <!-- div.name -->
    <div class="name"></div>

    <!-- div[height=100px] -->
    <div height="100px"></div>

    <!-- div{hello word!} -->
    <div>hello word</div>

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

    <!-- p+p -->
    <p></p>
    <p></p>

    <!-- 自动编号 div#item$.class$$*3 -->
    <div id="item1" class="class01"></div>
    <div id="item2" class="class02"></div>

    <!-- table>(thead>tr>th*2)(tbody>tr>td*2) -->
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

    <!-- nav>ul>(li>a[href=#]{Link})*2 -->
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>