Emmet 常用用法指南

文章目录

- [HTML 快速生成](#HTML 快速生成)
- - [1. 基础结构](#1. 基础结构)
  - [2. 元素生成](#2. 元素生成)
  - [3. 类选择器](#3. 类选择器)
  - [4. ID 选择器](#4. ID 选择器)
  - [5. 子元素](#5. 子元素)
  - [6. 兄弟元素](#6. 兄弟元素)
  - [7. 乘法（重复元素）](#7. 乘法（重复元素）)
  - [8. 分组](#8. 分组)
  - [9. 属性](#9. 属性)
  - [10. 文本内容](#10. 文本内容)
  - [11. 序号](#11. 序号)
  - [12. 反向序号](#12. 反向序号)
  - [13. 隐式标签](#13. 隐式标签)
- [CSS 快速生成](#CSS 快速生成)
- - [1. 常用属性](#1. 常用属性)
  - [2. 单位缩写](#2. 单位缩写)
  - [3. 值提示](#3. 值提示)
  - [4. !important](#4. !important)
- 实用示例
- - 快速导航栏
  - [Bootstrap 网格](#Bootstrap 网格)
  - 表单

Emmet 是一个强大的代码缩写工具，可以快速生成 HTML、CSS 等代码。使用提示：输入缩写后按 Tab 或 Ctrl+E（取决于编辑器）展开代码。

以下是常用用法：

HTML 快速生成

1. 基础结构

html 复制代码

! 或 html:5

生成：

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>

2. 元素生成

html 复制代码

div
p
span
a

生成相应标签。

3. 类选择器

html 复制代码

.container
div.container
.box.red.large

生成：

html 复制代码

<div class="container"></div>
<div class="box red large"></div>

4. ID 选择器

html 复制代码

#header
div#main
#nav.bg-dark

生成：

html 复制代码

<div id="header"></div>
<div id="main"></div>
<div id="nav" class="bg-dark"></div>

5. 子元素

html 复制代码

ul>li
nav>ul>li
div>p>span

生成：

html 复制代码

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

6. 兄弟元素

html 复制代码

div+p+span
header+main+footer

生成：

html 复制代码

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

7. 乘法（重复元素）

html 复制代码

ul>li*5
div.box*3

生成：

html 复制代码

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

8. 分组

html 复制代码

(.header>h1)+(.content>p)*2

生成：

html 复制代码

<div class="header">
    <h1></h1>
</div>
<div class="content">
    <p></p>
</div>
<div class="content">
    <p></p>
</div>

9. 属性

html 复制代码

a[href="#"]
input[type="text" placeholder="请输入"]
img[src="image.jpg" alt="图片"]

生成：

html 复制代码

<a href="#"></a>
<input type="text" placeholder="请输入">
<img src="image.jpg" alt="图片">

10. 文本内容

html 复制代码

p{这是一段文本}
a{点击这里}
h1{标题}+p{段落}

生成：

html 复制代码

<p>这是一段文本</p>
<a href="">点击这里</a>
<h1>标题</h1>
<p>段落</p>

11. 序号

html 复制代码

ul>li.item$*5
div.box$$*3
h${标题$}*3

生成：

html 复制代码

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

12. 反向序号

html 复制代码

ul>li.item$@-*5

生成：

html 复制代码

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

13. 隐式标签

html 复制代码

.row>.col*3
em>.highlight

生成：

html 复制代码

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<em>
    <span class="highlight"></span>
</em>

CSS 快速生成

1. 常用属性

css 复制代码

m10        → margin: 10px;
p20        → padding: 20px;
w100       → width: 100px;
h50p       → height: 50%;
fz16       → font-size: 16px;
c#f00      → color: #ff0000;
bgc#333    → background-color: #333;
dib        → display: inline-block;
posa       → position: absolute;
t0         → top: 0;

2. 单位缩写

css 复制代码

10      → 10px
10p     → 10%
10e     → 10em
10r     → 10rem

3. 值提示

css 复制代码

m10-20   → margin: 10px 20px;
p10-20-30 → padding: 10px 20px 30px;

4. !important

css 复制代码

m10!     → margin: 10px !important;
c#f00!   → color: #ff0000 !important;

实用示例

快速导航栏

html 复制代码

nav.navbar>ul.nav>li.nav-item*4>a.nav-link[href="#"]{菜单$}

生成：

html 复制代码

<nav class="navbar">
    <ul class="nav">
        <li class="nav-item"><a href="#" class="nav-link">菜单1</a></li>
        <li class="nav-item"><a href="#" class="nav-link">菜单2</a></li>
        <li class="nav-item"><a href="#" class="nav-link">菜单3</a></li>
        <li class="nav-item"><a href="#" class="nav-link">菜单4</a></li>
    </ul>
</nav>

Bootstrap 网格

html 复制代码

.container>.row>.col-sm-6.col-md-4*3>p

生成：

html 复制代码

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4"><p></p></div>
        <div class="col-sm-6 col-md-4"><p></p></div>
        <div class="col-sm-6 col-md-4"><p></p></div>
    </div>
</div>

表单

html 复制代码

form>div.form-group*3>label+input[type="text"].form-control

生成：

html 复制代码

<form action="">
    <div class="form-group">
        <label for=""></label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for=""></label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for=""></label>
        <input type="text" class="form-control">
    </div>
</form>