Emmet语法

一、Emmet介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。

二、基本语法

2-1. 后代：>

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

2-2. 兄弟：+

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

2-3. 上级：^

div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

2-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>

2-5. 乘法：*

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
<ul>

2-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>
ul>li.item$$$*5
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

2-7.ID和类属性

#header
<div id="header"></div>
.title
<div class="title"></div>

 

form#search.wide
<form id="search" class="wide"></form>

2-8.自定义属性

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

2-9.文本：{}

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

 三、Html标签语法

3-1.基本的html标签

! 或 html:5
<!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>
</head>
<body>
    
</body>
</html>
meta:utf

meta:vp

form:get

form:post

input:text, input:t

input:password, input:p

 

posted @ 2021-12-21 09:52  塞纳纽斯  阅读(14)  评论(0)    收藏  举报