Emmet安装及常用手册

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

所以工欲善其事必先利其器。对于前端人员而言，Emmet就是必备神器。几个字符就可以生成一大段代码，极大地提升了工作效率。Emmet功能非常强大和全面，但是官方的文档太繁多细致，让一些初学者望而却步。所以今天我就分享一些前端过程中最常用最频繁的指令，总结一些规律和经验，供大家参考！希望大家多练习，把下面的指令全部掌握好。掌握好emmet，就像游戏里的新人菜鸟一下子披上了一身土豪神装。配无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

注：本教程不讲CSS缩写了，现在成熟的框架太多了，如果还缩写原生的css,就和10年前手写全部代码的李某某没什么区别了！还有一些针对HTML5的单个标签，因为鄙人是10年前穿越过来的，学的东西太杂了，所以一时还没跟上时代的节奏，不是特别熟无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

下载和安装EMMET。

安装之前，我想先说下兴趣才是学习最好的老师和动力，首先去尝试自己手写一页代码，然后再来感受emmet的神奇和带来效率提升的成就感。

emmet是一款支持很多软件的插件，今天我们就分享如何安装到phpstom和no无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

百度搜索流风清音notepad+，里面集成了非常多的插件，其中就包括了emmet神器。

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

现在我们就开始前端的开挂之旅。我们从单个标签缩写开始，这些都是纯粹的记无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

生成：

.

输入html:5 也可以生成相同的效果。

类似的版本指令：

html:4t

html:4s

html:xt

html:xs

html:xxs

注意：鼠标指针在指令最后一个字符的后面按快捷键才能生成代码，在中间或后面有空格都无法生成代码。

页面head常用标签。下面都是很常见的标签代码，但可能只在一个页面中用到无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

.

输入 link:css

生成：

输入 link:favicon

生成：

输入 script:src

生成：

输入 meta:utf

生成：

.

输入 style

生成：

输入script

生成：

.

注释部分：

输入 c

生成：

输入 cc:ie6

生成：

输入 cc:ie

生成：

输入 cc:noie

生成：

DIV+CSS常用ID和类。为什么前端经常被误称DIV+CSS,说明这部分非常重要，无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验学不会，请在你父母面对磕三个响头。

输入 .

生成：

输入.banner

生成：

输入 .class1.class2.class3

生成：

.

输入 #

生成代码：

输入 #banner

生成：

输入 #banner.font

生成：

.

输入 form#search.height

生成：

输入 p.class1.class2.class3

生成：

ul列表常用的乘法：*和自增符号：$。这里相对于死记硬背而言稍微灵活有点难度，要想快速学习，还是需要死记硬背，然后内部消化、举一反三、灵活应用。

小时候总是质疑为什么学什么都需要死记硬背，长大后才发现原来记忆是快速学习最好的方法。就像张无忌记住张三丰的每个招式以后，然后头脑里分析理解消无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

输入 ul>li*5

生成：

.

输入 ul>li.item$*5

生成：

.

输入 h$[title=item$]{Header $}*3

生成：

Header 1

Header 2

Header 3

.

（备注：记住上面的就足够用了，后面实在记不住也没必要强求自己，本来是好玩的事情，何必那么较真呢?）

输入 ul>li.item$$$*5

生成：

.

输入 ul>li.item$@-*5

生成：

.

输入 ul>li.item$@3*5

生成：

页面body常用标签。都是常用的单个标签，记住标签就可以完全掌握了，不过还是需要多练习。

输入a

生成：

输入a:link

生成：

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

注意：这个在notepad++对中文支持不好，上面按tab无法显示，英文可以。在phpstorm中可以完美显示，后面有中文输入的标签同样。

输入br

生成：

输入hr

生成：

输入str

生成：

.

输入img

生成：

输入video

生成：

输入audio

生成：

输入iframe

生成：

.

输入 menu:c

生成：

输入 menu:t

生成：

.

输入 hdr

生成：

输入 ftr

生成：

页面from常用标签。

表单是进阶过程中都会用到的，有时候觉得它们很繁琐，其实它们真的很简单和神奇，一个简单的代码就可以实现一个交互的效果，成为用户与网站沟通的桥梁。请死记硬背住下面的标签就OK了，每天睡觉之前回想下今天看的教程标签！

如果你能每天睡觉之前，回顾下今天发生的事情，就像曾国藩每晚静坐反思一天无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

生成：

输入 form:post

生成：

.

表单包含的内容标签：

label

输入 input

生成：

输入 input:h

生成：

输入 input:t

生成：

输入 input:p

生成：

输入 input:c

生成：

输入 input:r

生成：

输入 input:f

生成：

输入 input:s

生成：

输入 input:i

生成：

输入 input:b

生成：

输入 input:reset

生成：

.

选择选项：

输入 select

生成：

输入 opt

生成：

输入 tarea

生成：

.

输入 input:search

生成：

输入 input:email

生成：

输入 input:url

生成：

输入 input:datetime

生成：

输入 input:date

生成：

输入 input:time

生成：

输入 input:number

生成：

.

按钮选项：

输入 btn:b

生成：

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验mit">

如果你掌握好标签缩写，组合其实可以不学，只是多写几次。但是你想进一步提高效率，登峰成为大神，在菜鸟面前吹牛逼，那么标签组合你就不得不熟练掌握。

.

下级：>

输入 nav>ul>li

生成：

.

同级：+

输入 div+p+bq

生成：

<无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验

上级：^

输入 div+div>p>span+em^bq

生成：

输入 div+div>p>span+em^^bq

生成：

.

分组：()

输入 div>(header>ul>li*2>a)+footer>p

生成：

输入 (div>dl>(dt+dd)*3)+footer>p

生成：

注意：上面各种标签的组合可以很多种，需要你自己灵活应用，就可以少打很多字符。实在掌握不了，也没关系，多打几个字符，马步扎得稳，扫地僧一样可以磨成大神。就像哥这种10年里学了各种绝学神功，因为声音残疾，现在还是4k的扫地僧，不和功力有关，还是和天生的际遇有关吧！

标签唯一性缩写技巧。

em、ul、table这样的标签里面对应的标签都是固定的，这样里面的标签可以省略掉。

.

比如输入 em>.class

生成代码：

按照规范地输入是em>span.class，这里我们省略了span。

.

输入 ul>.nav

生成代码：

按照规范地输入是ul>li.nav，这里我们省略了li。

.

输入 table>.row>.col

生成代码：

按照规范地输入是table>tr.row>td.col，这里我们省略了tr、td。

.

输入 ul+

生成代码：

.

输入 table+

生成代码：

.

输入 tr+

生成代码：

.

输入 select+

生成代码：

有时候无私地帮助菜鸟成为大神，总会引起一些伪大神的愤恨，毕竟新人的涌入势必威胁他们的经济利益和降低了他们的存在感。

无故删我原创，无故删我原创，请清空我的经验，我需要全部删除经验，退出百度经验、享受过。

所以请要坚定地相信自己学习的价值和意义！