Emmet 简介、语法和速查-CFANZ编程社区

Emmet 简介、语法和速查

1 Emmet简介

Emmet是一个文本编辑器/IDE的插件，使用Emmet通过简短的表达式来快速生成复杂的HTML/CSS代码片段，只要掌握一些常用的语法，可以减少重复编码的工作，帮助我们快速开发。

目前主流的编辑器如 VSCode、WebStorm、Sublime、Atom 都已经集成了Emmet插件，无需要安装或简单配置就能使用。

官网：https://www.emmet.io/

文档：https://docs.emmet.io/

速查：https://docs.emmet.io/cheat-sheet/

PDf：https://docs.emmet.io/cheatsheet-a5.pdf

我用的是 VSCode ，其他编辑器应该也差不多，新建一个HTMl文件，输入div ，可以看到 Emmet Abbreviation 说明这是一个 Emmet 规则：

Emmet 简介、语法和速查_Emmet插件

这时，只要按 TAB键 就可以立即生成代码片段，这里展示的是 div 标签：

Emmet 简介、语法和速查_Emmet语法_02

所有的语法结尾都可以使用 TAB键 来展开，本文从HTML语法和CSS语法两个方面简单介绍一下。

2 HTML基本语法

除了按 TAB键，还可以直接按回车，效果一样。

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

2.2 生成带有id的标签

div#main    // 标签#id名 + tab键

展开后：

<div id="main"></div>

Emmet 简介、语法和速查_Emmet语法_03

当标签为 div ，还可以省略 div 标签，直接输入 #main 效果一样：

Emmet 简介、语法和速查_Emmet插件_04

0 条评论