Emmet速成-优快云博客

本文链接：https://blog.youkuaiyun.com/hs872238484/article/details/110956348

Emmet HTML+CSS

HTML

!+tab html结构快速生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

* 重复生成多个

<!-- 输入p*5然后按tab -->
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

> 包含

<!-- 输入ul>li然后按tab -->
    <ul>
        <li></li>
    </ul>

+ 兄弟，同一层级

<!-- 输入div+p然后按tab -->
    <div></div>
    <p></p>

#表示id、.表示class，默认生成的是div

<!-- 默认生成的标签是div -->
<!-- 输入.green然后按tab -->
    <div class="green"></div>
<!-- 输入#red然后按tab -->
    <div id="red"></div>



<!-- 采用标签p -->
<!-- 输入p.green然后按tab -->
    <p class="green"></p>
<!-- 输入p#red然后按tab -->
    <p id="red"></p>

$表示自增

<!-- 输入.demo$*5然后按tab -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

{} 填充的内容

<!-- 输入p{只是一个demo$}*5然后按tab   -->
    <p>只是一个demo1</p>
    <p>只是一个demo2</p>
    <p>只是一个demo3</p>
    <p>只是一个demo4</p>
    <p>只是一个demo5</p>

表格处理

<!-- 输入table>tr*2>td*3然后按tab -->
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

CSS

h1 {
            /* w200+tab */
            width: 200px;
            /* h100+tab */
            height: 100px;
            /* tac+tab */
            text-align: center;
            /* tdn+tab */
            text-decoration: none;
        }

Emmet学习

Emmet HTML+CSS

HTML

CSS