前端开发利器 Emmet 介绍与基础语法教程

时间：2022-12-24 07:53:49

在前端开发的过程中，编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码，效率特别低下，因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写的效率而诞生的，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具：Zen Coding，那个比较老了，而现在的 Emmet 则是 Zen Coding 的升级版，由 Zen Coding 的原作者进行开发等。 Emmet 严格意义上来说，并不是一款软件或者工具，它是一款编辑器插件，必须要基于某个编辑器使用。目前它支持如下编辑器：

Sublime Text 2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Chocolat (可以通过 “Install Mixin” 对话框安装)

Komodo Edit/IDE ( Tools → Add-ons)

Notepad++

PSPad

<textarea>

CodeMirror2/3

Brackets

在上面列表点击你目前使用的编辑器，就可以获得对应的插件文件，安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器，所以本文就以 Sublime text 2 为例，讲解 Emmet 的安装、基础语法。

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入“pci”即可锁定“Package Control：Install Package”这个功能，回车之后就可以看到一个列表，我们继续输入“emmet”即可找到这个插件，回车之后等待一会就安装完成了。

Visual Studio中的 Emmet

在visual studio 中的插件管理中搜索Web Essentials这样一个插件，直接安装就行了。

开始使用 Emmet

Emmet 可以快速的编写 HTML 和 CSS 以及实现其他的功能。它根据当前文件的“语言”来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的方式来解析高亮这个文件，Emmet 也会根据 HTML 的语法把你输入的指令编译成 HTML 结构。如果是在一个 .c 的 C语言 文件中，你根据 Emmet 的语法编写出来的指令，是不会被编译的。

此外，在没有后缀的文件中，你可以摁下“shift + ctrl + p”呼出面板，输入“seth”就可以选择当前文档是使用 HTML 的模式还是其他编程语言的模式来解释。下面就是一条 Emmet 的指令：

#page>div.logo+ul#navigation>li*5>a{Item $}

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中，这时候敲击一下 TAB 键，你就会发现这行指令变成了下面的 HTML 结构：

<div id="page">

    <div class="logo"></div>

    <ul id="navigation">

        <li><a href="">Item 1</a></li>

        <li><a href="">Item 2</a></li>

        <li><a href="">Item 3</a></li>

        <li><a href="">Item 4</a></li>

        <li><a href="">Item 5</a></li>

    </ul>

</div>

怎么样？很神奇吧，仅仅写一行代码，就可以生成这么一个复杂的 HTML 结构，而且还可以声称对应的 class 、id 和内容。这行指令你现在可能还看不懂，下面会详细讲解语法，你现在只需要知道 Emmet 的工作流程：打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成！

Emmet 生成 HTML 结构基础语法

生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可

随机推荐

  1. cv&lowbar;prj2

    Computer Vision Project 2 – Harris Corner Detector 姓名: 王兴路 学号: 3140102282 指导老师: 宋明黎 2016-12-16 19:30 ...

  2. 【技术文档】《算法设计与分析导论》R&period;C&period;T&period;Lee等&&num;183&semi;第4章 分治策略

    分治策略有一种“大事化小,小事化了”的境界,它的思想是将原问题分解成两个子问题,两个子问题的性质和原问题相同,因此这两个子问题可以再用分治策略求解,最终将两个子问题的解合并成原问题的解.有时,我们会有 ...

  3. c&num;程序添加其他网站的webservice引用。

    前言: 有A网站,B网站两个网站独立运行.某一天,需要两个网站进行合作来完成一件事,比如用A网站接收一些数据进行处理,存入中转数据库,B网站定时去取数据进入自己的系统进行处理. 可能我们会先想到在B网 ...

  4. 记一个Java错误 1 -- Unsupported major&period;minor version 52&period;0

    今天打开ADT eclipse 准备调试上周的安卓项目, 发现总是报错 如图: 百度了一下说是 jdk版本过低的问题  (低版本的jre运行高版本project) 于是就修改了一下 window - ...

  5. hdu 5643 BestCoder Round &num;75

    King's Game  Accepts: 249  Submissions: 671  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 6 ...

  6. Python爬虫入门教程 16-100 500px摄影师社区抓取摄影师数据

    写在前面 今天要抓取的网站为 https://500px.me/ ,这是一个摄影社区,在一个摄影社区里面本来应该爬取的是图片信息,可是我发现好像也没啥有意思的,忽然觉得爬取一下这个网站的摄影师更好玩一 ...

  7. tar -P参数含义

    -p(小写) :保留备份数据的原本权限与属性,常用于备份(-c) 重要的配置文件-P(大写) :保留绝对路径,亦即允许备份数据中含有根目录存在之意: 在加上绝对路径出现的那个警告讯息“tar: Rem ...

  8. C&num;接口和泛型类

    1.定义: 定义为一个约束,实现接口的类或者结构必须遵守该约定.借口是类之间交互的一个协议.定义了类之间的交互标准. 接口是类之间相互交互的一个抽象,把类之间需要交互的内容抽象出来定义成接口. 接口只 ...

  9. C&plus;&plus;泛型编程（1）--自己实现C&plus;&plus;迭代器／遍历器 iterator

    1.原理 迭代器又称为遍历器,用于访问容器中的数据,迭代器旨在算法和容器之间搭建访问的桥梁,从而使算法和数据分离,不用关心数据具体的存储细节.具体的原理描述请参考以下两个博客: [1].C++迭代器 ...

  10. ReactNative踩坑日志——使用async&sol;await语法解决网络请求的异步导致的指令执行顺序错乱问题

    转载请注明原文地址: ReactNative的fetch是天然的异步请求,因此,如果你在一个代码块中使用了fetch,那么在执行的时候程序不会等待网络响应结束才执行下一条代码,而是会直接按顺序执行完整 ...

相关文章