emmet快速生成HTML结构语法+ CSS样式

emmet快速生成HTML结构语法+ CSS样式

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            /* tac */
            text-align: center;
            /* ti */
            /* 2em表示首行缩进2个大小 */
            text-indent: 2em;
            /* ti2em */
            text-indent: 2em;
            /* w */
            width: 200px;
            /* td  */
            /* a标签没有下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    
    <!-- form>input -->
    <form action="">
        <input type="test" value="此地无银三百两">

    </form>
    <!-- .dimo -->
    <div class="dimo">

    </div>
    <!-- p.demo -->
    <p class="demo">

    </p>
    <!-- p#deim -->
    <p id="deim">

    </p>
    <!-- div*5 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> 
    
  
    <!--父子级 ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- 兄弟级 div+p -->
    <div></div>
    <p></p>
    <!-- 父子级  p>a -->
    <p><a href=""></a></p>
    <!-- ul>li#heam -->
    <ul>
        <li id="heam"></li>
    </ul>
    <!-- div+p -->
    <div></div>
    <p></p>

    <!-- p.one -->
    <p class="one"></p>
    <!-- p#one -->
    <p id="one"></p>
    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- p#demo$*5 -->
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <p id="demo4"></p>
    <p id="demo5"></p>
    <!-- div{}*5 -->
    <!-- div{我家狗吭个声}*5 -->
    <div>我家狗吭个声</div>
    <div>我家狗吭个声</div>
    <div>我家狗吭个声</div>
    <div>我家狗吭个声</div>
    <div>我家狗吭个声</div>
     <!-- div{$}*5 -->
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>

</body>
</html>
上一篇:学习sublime text3笔记


下一篇:前端开发效率——Emmet手册