Emmet 学习笔记

2017-10-27 本文已影响0人智慧与力量的贤者

Emmet 基本使用

默认快捷键 Tab

1. 子代：>

缩写：nav>ul>li

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

2. 兄弟：+

缩写：div+p+div

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

3. 上级：^

缩写：div+div>p>h1+a^img

    <div></div>
    <div>
        <p>
            <h1></h1>
            <a href=""></a>
        </p>
        <img src="" alt="">
    </div>

上两级：^^

4. 分组：()

缩写：div>(header>p>h1+img)+footer>p

    <div>
        <header>
            <p>
                <h1></h1>
                <img src="" alt="">
            </p>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

5. 乘法：*

缩写：li*4

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

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 属性的值：#id 值

eg：div#header

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

8. 设置 class 属性的值： .class 值

eg1：div.header

<!--设置一个 class-->
<div class="header"></div>

eg2：div.class.a.b.c

<!--设置多个 class>
<div class="header a b c"></div>

9. 自定义属性值：[]

eg1：p[title="hello world"]

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

eg2：p[title]

<p title=""></p>

eg3：input[type="text" placeholder="please input"]

<input type="text" placeholder="please input">

10. 文本：{}

eg1：a{click me}

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

eg2：p>{click}+a{here}+{to continue}

<p>click<a href="">here</a>to continue</p>

11. 更多缩写

缩写：!
生成 HTML 模板

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

缩写：link

<link rel="stylesheet" href="">

缩写：script

<script></script>

缩写：script:src

<script src=""></script>

缩写：form:post

<form action="" method="post"></form>

缩写：input:submit

<input type="submit" value="">

注：

所有未知缩写都会转为标签，如：poo*4

    <poo></poo>
    <poo></poo>
    <poo></poo>
    <poo></poo>

内容待添加