Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

最新推荐文章于 2022-10-20 17:45:51 发布
最新推荐文章于 2022-10-20 17:45:51 发布
阅读量1.4k 收藏 5
点赞数 1
CC 4.0 BY-SA版权
独学而无友，则孤陋寡闻。q群582951247
本文链接：https://blog.youkuaiyun.com/mp624183768/article/details/83182779
本文详细介绍Emmet这一前端开发利器的安装与使用方法，包括基本语法、HTML标签速记及CSS编写技巧，助您大幅提升HTML与CSS编写效率。

一、Emmet的安装与介绍

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

 

1，使用Emmet的好处

  • 通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
  • 而 Emmet 把片段这个概念提高到了一个新的层次：我们可以设置 CSS 形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

 

2，安装Emmet

Emmet 为大部分流行的编辑器都提供了安装插件，本文演示如何在 Atom 中使用 Emmet 插件。

（1）点击 Atom 的“Preferences”菜单选项（Windows 下是“Settings”菜单选项）

（2）进入到 Install 页面。

（3）搜索“Emmet”包，点击 Install 按钮即可安装。

原文:Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

 

3，简单的使用样例

（1）我们在编辑器中输入如下代码：

1

ul>li*6

（2）接着按下 tab 键，之前的缩写代码就会自动扩展为完整的 html 代码片断。

原文:Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

 

二、基本语法

1，后代：>

缩写：nav>ul>li

1

2

3

4

5

<nav>

    <ul>

        <li></li>

    </ul>

</nav>

 

2，兄弟：+

缩写：div+p+bq

1

2

3

<div></div>

<p></p>

<blockquote></blockquote>

 

3，上级：^

（1）缩写：div+div>p>span+em^bq

1

2

3

4

5

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>


（2）缩写：div+div>p>span+em^^bq

1

2

3

4

5

<div></div>

<div>

    <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

 

4，分组：()

（1）缩写：div>(header>ul>li*2>a)+footer>p

1

2

3

4

5

6

7

8

9

10

11

<div>

    <header>

        <ul>

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

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

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>


（2）缩写：(div>dl>(dt+dd)*3)+footer>p

1

2

3

4

5

6

7

8

9

10

11

12

13

<div>

    <dl>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

    </dl>

</div>

<footer>

    <p></p>

</footer>

 

5，乘法：*

缩写：ul>li*5

1

2

3

4

5

6

7

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

 

6，自增符号：$

（1）缩写：ul>li.item$*5

1

2

3

4

5

6

7

<ul>

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

</ul>


（2）缩写：h$[title=item$]{Header $}*3

1

2

3

<h1 title="item1">Header 1</h1>

<h2 title="item2">Header 2</h2>

<h3 title="item3">Header 3</h3>


（3）缩写：ul>li.item$$$*5

1

2

3

4

5

6

7

<ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

</ul>


（4）缩写：ul>li.item$@-*5

1

2

3

4

5

6

7

<ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li>

</ul>


（5）缩写：ul>li.item$@3*5

1

2

3

4

5

6

7

<ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

</ul>


7，ID和类属性

（1）缩写：#header

1

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


（2）缩写：.title

1

<div class="title"></div>


（3）缩写：form#search.wide

1

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


（4）缩写：p.class1.class2.class3

1

<p class="class1 class2 class3"></p>

 

8，自定义属性

（1）缩写：p[title="Hello world"]

1

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


（2）缩写：td[rowspan=2 colspan=3 title]

1

<td rowspan="2" colspan="3" title=""></td>


（3）缩写：[a='value1' b="value2"]

1

<div a="value1" b="value2"></div>


9，文本：{}

（1）缩写：a{Click me}

1

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


（2）缩写：p>{Click }+a{here}+{ to continue}

1

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

 

10，隐式标签

（1）缩写：.class

1

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


（2）缩写：em>.class

1

<em><span class="class"></span></em>

（3）缩写：ul>.class

1

2

3

<ul>

    <li class="class"></li>

</ul>


（4）缩写：table>.row>.col

1

2

3

4

5

<table>

    <tr class="row">

        <td class="col"></td>

    </tr>

</table>

 

三、HTML标签语法

1，所有未知的缩写都会转换成标签

缩写：hangge

1

<hangge></hangge>

 

2，基本html标签

（1）缩写：!

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

   

</body>

</html>


（2）缩写：a

1

<a href=""></a>


（3）缩写：a:link

1

<a href="http://"></a>


（4）缩写：a:mail

1

<a href="mailto:"></a>


（5）缩写：abbr

1

<abbr title=""></abbr>


（6）缩写：acronym

1

<acronym title=""></acronym>


（7）缩写：base

1

<base href="" />


（8）缩写：basefont

1

<basefont />


（9）缩写：br

1

<br />


（10）缩写：frame

1

<frame />


（11）缩写：hr

1

<hr />


（12）缩写：bdo

1

<bdo dir=""></bdo>


（13）缩写：bdo:r

1

<bdo dir="rtl"></bdo>


（14）缩写：bdo:l

1

<bdo dir="ltr"></bdo>


（15）缩写：col

1

<col />


（16）缩写：link

1

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


（17）缩写：link:css

1

<link rel="stylesheet" href="style.css" />


（18）缩写：link:print

1

<link rel="stylesheet" href="print.css" media="print" />


（19）缩写：link:favicon

1

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />


（20）缩写：link:touch

1

<link rel="apple-touch-icon" href="favicon.png" />


（21）缩写：link:rss

1

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />


（22）缩写：link:atom

1

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />


（23）缩写：meta

1

<meta />


（24）缩写：meta:utf

1

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />


（25）缩写：meta:win

1

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />


（26）缩写：meta:vp

1

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />


（27）缩写：meta:compat

1

<meta http-equiv="X-UA-Compatible" content="IE=7" />


（28）缩写：style

1

<style></style>


（29）缩写：script

1

<script></script>


（30）缩写：script:src

1

<script src=""></script>


（31）缩写：img

1

<img src="" alt="" />


（32）缩写：iframe

1

<iframe src="" frameborder="0"></iframe>


（33）缩写：embed

1

<embed src="" type="" />


（34）缩写：object

1

<object data="" type=""></object>


（35）缩写：param

1

<param name="" value="" />


（36）缩写：map

1

<map name=""></map>


（37）缩写：area

1

<area shape="" coords="" href="" alt="" />


（38）缩写：area:d

1

<area shape="default" href="" alt="" />


（39）缩写：area:c

1

<area shape="circle" coords="" href="" alt="" />


（40）缩写：area:r

1

<area shape="rect" coords="" href="" alt="" />


（41）缩写：area:p

1

<area shape="poly" coords="" href="" alt="" />


（42）缩写：form

1

<form action=""></form>


（43）缩写：form:get

1

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


（44）缩写：form:post

1

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


（45）缩写：label

1

<label for=""></label>


（46）缩写：input

1

<input type="text" />


（47）缩写：inp

1

<input type="text" name="" id="" />


（48）缩写：input:hidden 别名：input[type=hidden name]

1

<input type="hidden" name="" />


（49）缩写：input:h 别名：input:hidden

1

<input type="hidden" name="" />


（50）缩写：input:text, input:t 别名：inp

1

<input type="text" name="" id="" />


（50）缩写：input:search 别名：inp[type=search]

1

<input type="search" name="" id="" />


（51）缩写：input:email 别名：inp[type=email]

1

<input type="email" name="" id="" />


（52）缩写：input:url 别名：inp[type=url]

1

<input type="url" name="" id="" />


（53）缩写：input:password 别名：inp[type=password]

1

<input type="password" name="" id="" />


（54）缩写：input:p 别名：input:password

1

<input type="password" name="" id="" />


（55）缩写：input:datetime 别名：inp[type=datetime]

1

<input type="datetime" name="" id="" />


（56）缩写：input:date 别名：inp[type=date]

1

<input type="date" name="" id="" />


（57）缩写：input:datetime-local 别名：inp[type=datetime-local]

1

<input type="datetime-local" name="" id="" />


（58）缩写：input:month 别名：inp[type=month]

1

<input type="month" name="" id="" />


（59）缩写：input:week 别名：inp[type=week]

1

<input type="week" name="" id="" />


（60）缩写：input:time 别名：inp[type=time]

1

<input type="time" name="" id="" />


（61）缩写：input:number 别名：inp[type=number]

1

<input type="number" name="" id="" />


（62）缩写：input:color 别名：inp[type=color]

1

<input type="color" name="" id="" />


（63）缩写：input:checkbox 别名：inp[type=checkbox]

1

<input type="checkbox" name="" id="" />


（64）缩写：input:c 别名：input:checkbox

1

<input type="checkbox" name="" id="" />


（65）缩写：input:radio 别名：inp[type=radio]

1

<input type="radio" name="" id="" />


（66）缩写：input:r 别名：input:radio

1

<input type="radio" name="" id="" />


（67）缩写：input:range 别名：inp[type=range]

1

<input type="range" name="" id="" />


（68）缩写：input:file 别名：inp[type=file]

1

<input type="file" name="" id="" />


（69）缩写：input:f 别名：input:file

1

<input type="file" name="" id="" />


（70）缩写：input:submit

1

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


（71）缩写：input:s 别名：input:submit

1

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


（72）缩写：input:image

1

<input type="image" src="" alt="" />


（73）缩写：input:i 别名：input:image

1

<input type="image" src="" alt="" />


（74）缩写：input:button

1

<input type="button" value="" />


（75）缩写：input:b 别名：input:button

1

<input type="button" value="" />


（76）缩写：isindex

1

<isindex />


（77）缩写：input:reset 别名：input:button[type=reset]

1

<input type="reset" value="" />


（78）缩写：select

1

<select name="" id=""></select>


（79）缩写：option

1

<option value=""></option>


（80）缩写：textarea

1

<textarea name="" id="" cols="30" rows="10"></textarea>


（81）缩写：menu:context 别名：menu[type=context]> 

1

<menu type="context"></menu>


（82）缩写：menu:c 别名：menu:context

1

<menu type="context"></menu>


（83）缩写：menu:toolbar 别名：menu[type=toolbar]> 

1

<menu type="toolbar"></menu>


（84）缩写：menu:t 别名：menu:toolbar

1

<menu type="toolbar"></menu>


（85）缩写：video

1

<video src=""></video>


（86）缩写：audio

1

<audio src=""></audio>


（87）缩写：html:xml

1

<html xmlns="http://www.w3.org/1999/xhtml"></html>


（88）缩写：keygen

1

<keygen />


（89）缩写：command

1

<command />


（90）缩写：bq 别名：blockquote

1

<blockquote></blockquote>


（91）缩写：acr 别名：acronym

1

<acronym title=""></acronym>


（92）缩写：fig 别名：figure

1

<figure></figure>


（93）缩写：figc 别名：figcaption

1

<figcaption></figcaption>


（94）缩写：ifr 别名：iframe

1

<iframe src="" frameborder="0"></iframe>


（95）缩写：emb 别名：embed

1

<embed src="" type="" />


（96）缩写：obj 别名：object

1

<object data="" type=""></object>


（97）缩写：src 别名：source

1

<source></source>


（98）缩写：cap 别名：caption

1

<caption></caption>


（99）缩写：colg 别名：colgroup

1

<colgroup></colgroup>


（100）缩写：fst, fset 别名：fieldset

1

<fieldset></fieldset>


（101）缩写：btn 别名：button

1

<button></button>


（102）缩写：btn:b 别名：button[type=button]

1

<button type="button"></button>


（103）缩写：btn:r 别名：button[type=reset]

1

<button type="reset"></button>


（104）缩写：btn:s 别名：button[type=submit]

1

<button type="submit"></button>

 

四、CSS语法

更多的语法缩写（比如 CSS、XSL），可以查看官方的API文档：http://docs.emmet.io/cheat-sheet/

 

【好物推荐】Emmet LiveStyle：实时高效的CSS编辑器 Chrome插件
本本本添哥
08-19 53
摘要： Emmet LiveStyle是高效的Chrome插件，专为前端开发优化，实现CSS双向实时编辑，支持主流编辑器（VS Code/Sublime等）。核心功能包括零刷新同步、多文件管理及智能冲突处理，适用于响应式调试、主题定制等场景。安装简便，通过DevTools连接编辑器后即可实现修改自动同步，显著提升开发效率，节省30%-50%样式调试时间，兼容现代前端框架与传统CMS系统。
React Native开发之ATOM开发实用技巧
xiangzhihong8的专栏
05-02 3861
前面对React Native开发工具Atom做了一个详细的介绍，详见RN开发IDE详解。 Atom作为一款前端开发利器，有很多的插件供我们选择，这里罗列常见的可以提高我们开发效率的插件给大家介绍一下。ATOM常用插件1、simplified-chinese-menuAtom的简体中文语言包，完整汉化，兼容所有已发布的版本Atom。2、tree-view-finder左边菜单栏显示方式，类似Mac
editPlus的css和html代码补全
05-24
editPlus编写html和css代码时，按tab间可以自动补全，比如打div按tab之后出现完整的<div></div>等
HTML5 jQuery 表单输入自动完成 autocomplete-suggestions插件.rar
07-10
html5-autocomplete-suggestions插件实例包，是一个由HTML5与jQuery共同实现的表单输入自动完成的例子，当用户输入的时候，随着字符的输入，会自动匹配输入结果，以下拉的方式显示出匹配项，与百度搜索框的下拉提示十分相似，这一款由HTML5技术实现，可方便移植到移动设备客户端使用，移动开发、pc前端设计都可以借鉴。
atom html自动补全插件,[工具资源] Atom 语法高亮插件编写指南_html/css_WEB-ITnose
weixin_31523833的博客
06-05 324
Atom想必无需多作介绍了，是一款除了启动运行慢之外，其它部分都挺优秀的编辑器。由于我在写一个解析渲染 ASS 字幕的 JavaScript 库—— ASS.js，经常要查看 .ass文件。然而面对一大片白花花的代码很不舒服，Atom 上又没有现成的 ASS 语法高亮插件，于是决定自己写一个。目录结构那么语法高亮插件该怎么写呢？ 官方文档有讲到如何创建一个普通的插件，而对于语法高亮插件，最快的熟悉...
html 自动补全插件,jquery自动补全插件autocomplete.js
weixin_31138555的博客
06-02 542
插件描述：autocomplete.js 是 jQuery 插件，高度自定义，可以改进搜索功能，搜索框输入时，可以智能补全搜索内容。autocomplete.js使用方法Html:Ajax 查找$('#autocomplete').autocomplete({serviceUrl:'/autocomplete/countries',onSelect:function(suggestion)...
前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
~
03-31 2143
前端html、CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，而且作为一款插件能够大部分的代码编辑器，文章后面列出了支持的代码编辑器类型。请看下面演示： Zen coding下的编码演示 ...
在更广范围搜索emmet语法，梳理解析emmet语法大全，尽量拆分多种用法，针对不同的语法使用不同案例讲解。
最新发布
08-15
3. 自动扩展为完整HTML代码 ### 3. 核心语法详解与案例 #### 3.1 元素生成 **基础标签** 输入标签名按`Tab`生成双标签： ```emmet div → <div></div> p → <p></p> ``` **单标签**（空元素） 支持自闭合标签： ...
适合 JS 新手学习的开源项目——在 GitHub 学编程
热门推荐
HelloGitHub 的博客
12-04 2万+
作者：HelloGitHub-小鱼干 这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇，系列文章： C++ 篇 Python 篇 Go 篇 Java 篇 JavaScript 篇 Java 篇中老荀说到当今互联网份额最大的编程语言是 Java，作为后辈我对此话是没有异议的。但，要说到国内互联网最火、最热闹的编程语言是什么？应该没人对 JavaScript 当选有异议吧。相对 C++、Java 这些老前辈，JS 可谓门槛之低，连 Python 都自叹不如。那作为一个.
atom自动补全html代码,Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）
weixin_30000407的博客
05-31 1148
一、Emmet的安装与介绍Emmet(前身为Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现HTML、CSS的快速编写。官网地址：http://emmet.io/官方文档：http://docs.emmet.io/cheat-sheet/Atom的emmet介绍页面：https://atom.io/packages/emmet1，使用Emmet的好处通常大多数的文本编...
VScode Vue项目使用html代码自动补全插件
marsur的博客
10-20 9655
打开文件方式：在VScode中同时按住Ctrl+Shift+P，搜索配置文件。（3）父子标签：输入父标签>子标签，按下tab键。（2）多个相同标签：输入标签名*5，按下tab键。（4）兄弟标签:输入兄标签+弟标签，按下tab键。（1）单个标签：输入标签名称，按下tab键。
vim html,java,javascript自动补全插件推荐
可克技术
12-11 1万+
前面已经介绍过Linux下常用的编辑器，其中就有个人非常热衷的Vim,现在来给大家介绍下Vim 自动补全的插件。主要包括,java,html,css,xml,python,javascript 下载插件 $ wget http://www.vim.org/scripts/download_script.php?src_id=6738 解压 $ unzip -x javacomplete.z
html编码自动补全软件,vscode常用插件以及html&vue标签自动补全配置
weixin_34138673的博客
06-01 235
个人常用的18个vscode插件，具体功能自行百度。html&vue标签自动补全配置ps:找了好久找到这个玩意，蛋疼ing。。。1-先安装HTML Snippets插件2-点击 文件-首选项-设置，然后根据以下操作3-然后在setting.json中加入以下代码4-{"workbench.iconTheme": "vscode-icons",// vscode-icons 文件图标主题"f...
atom html插件推荐,Atom 编辑器设置、快捷键与必备插件
weixin_36179394的博客
06-04 327
Atom 编辑器界面比 sublime text 更好看，随着不断的升级优化，卡顿情况也大有改善，喜欢折腾的你快来试一试吧！打造好用的 Atom 编辑器，让你的 Atom 更好用，一些必要的设置、好用的插件、以及记住常用快捷键是必须的。Atom 设置推荐几个设置选项：显示空格、换行等符号： 选中 Show Invisibles鼠标滚轮滚屏太小：设置 Scroll Sensitivity 参数，如 ...
atom DIY atom-html-preview插件
Lance的专栏
10-17 1771
说明 atom-html-preview每次保存，或者按键时，都会刷新预览面板，从而导致预览页奔溃 分析 （1）atom用CoffeeScript+Less开发； （2）按键时会导致奔溃，那么只要关掉“按键”事件，只保留“save”事件即可。 过程 （1）File->Settings->Packages; （2）找到atom-html-preview插件，点“VI
sublime安装html头部补全插件安装
qq_34210183的博客
10-27 965
sublime text如何在新建文件中快速补全头补信息。
atom ui html,几个受欢迎的Atom插件
weixin_35112865的博客
06-11 273
几个受欢迎的Atom插件下面是几个针对开发人员和程序员的受欢迎的Atom编辑器插件。以下插件都可以在Atom设置中进行install安装，通过输入这些插件的名称，搜索Packages或Themes便可找到该插件。Atom模板: seti或MonokaiAtom theme模板推荐SETI-UI和Monokai包，因为它们使得Atom看上去非常漂亮。安装命令:apm install seti-ui...
HTML插件说
qq_20901663的博客
05-29 573
插件说        由于感慨自己最近编程也有些时间但是目前的工作效率还是是太低了，于是乎就想用一些奇技淫巧，上网各种搜，刚开始我是想在notepad++上使用zenconding的 但是不管我做了多少，还是没有安装不上zennconding 插件很无奈，慢慢的我去考虑在sublime上安装zencodng但是好像也不行，后来emmet出现在我的视野中，是ZD的升级，好开心（这种开心只有我们懂！！...
Brackets-emmet插件：让HTML/CSS开发飞速前进
Emmet（以前称为Zen Coding）是一种流行的文本编辑器插件，它能够通过简写语法快速生成HTML结构和CSS代码。Emmet的核心功能包括： - **简写语法（Abbreviations）**: 用户通过输入一些简短的缩写，然后使用快捷键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值