Emmet安装及常用手册

2025-10-29 00:04:11

1、下载和安装EMMET。

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

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

Emmet安装及常用手册

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

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

Emmet安装及常用手册

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

生成：

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

类似的版本指令：

html:4t

html:4s

html:xt

html:xs

html:xxs

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

Emmet安装及常用手册

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

输入 link:css

生成：

输入 link:favicon

生成：

输入 script:src

生成：

输入 meta:utf

生成：

输入 style

生成：<style></style>

输入 script

生成：<script></script>

注释部分：

输入 c

生成：

输入 cc:ie6

生成：

输入 cc:ie

生成：

输入 cc:noie

生成：

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

输入 .

生成：<div class=""></div>

输入.banner

生成：<div class="banner"></div>

输入 .class1.class2.class3

生成： <div class="class1 class2 class3"></div>

输入 #

生成代码：<div id=""></div>

输入 #banner

生成：<div id="banner"></div>

输入 #banner.font

生成：<div id="banner" class="font"></div>

输入 form#search.height

生成：<form id="search" class="height"></form>

输入 p.class1.class2.class3

生成： <p class="class1 class2 class3">

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

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

输入 ul>li*5

生成：

<ul>

</ul>

输入 ul>li.item$*5

生成：

<ul>

</ul>

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

生成：

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

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

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

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

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

生成：

<ul>

</ul>

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

生成：

<ul>

</ul>

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

生成：

<ul>

</ul>

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

输入 a

生成：<a href=""></a>

输入 a:link

生成：<a href="http://"></a>

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

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

输入 br

生成：<br>

输入 hr

生成：<hr>

输入 str

生成：<strong></strong>

输入 img

生成：<img src="" alt="">

输入 video

生成：<video src=""></video>

输入 audio

生成：<audio src=""></audio>

输入 iframe

生成：<iframe src="" frameborder="0"></iframe>

输入 menu:c

生成：<menu type="context"></menu>

输入 menu:t

生成：<menu type="toolbar"></menu>

输入 hdr

生成：<header></header>

输入 ftr

生成：<footer></footer>

6、页面from常用标签。

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

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

生成：<form action="" method="get"></form>

输入 form:post

生成：<form action="" method="post"></form>

表单包含的内容标签：

label

输入 input

生成：<input type="text">

输入 input:h

生成：<input type="hidden" name="">

输入 input:t

生成：<input type="text" name="" id="">

输入 input:p

生成：<input type="password" name="" id="">

输入 input:c

生成：<input type="checkbox" name="" id="">

输入 input:r

生成：<input type="radio" name="" id="">

输入 input:f

生成：<input type="file" name="" id="">

输入 input:s

生成：<input type="submit" value="">

输入 input:i

生成：<input type="image" src="" alt="">

输入 input:b

生成：<input type="button" value="">

输入 input:reset

生成：<input type="reset" value="">

选择选项：

输入 select

生成：<select name="" id=""></select>

输入 opt

生成：<option value=""></option>

输入 tarea

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

输入 input:search

生成：<input type="search" name="" id="">

输入 input:email

生成：<input type="email" name="" id="">

输入 input:url

生成：<input type="url" name="" id="">

输入 input:datetime

生成：<input type="datetime" name="" id="">

输入 input:date

生成：<input type="date" name="" id="">

输入 input:time

生成：<input type="time" name="" id="">

输入 input:number

生成：<input type="number" name="" id="">

按钮选项：

输入 btn:b

生成：<button type="button"></button>

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

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

下级：>

输入 nav>ul>li

生成：

<nav>

<ul>

</ul>

</nav>

同级：+

输入 div+p+bq

生成：

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

上级：^

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

生成：

<div>

</div>

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

生成：

<div>

</div>

分组：()

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

生成：

<div>

<ul>

</ul>

</header>

</footer>

</div>

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

生成：

<div>

<dl>

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

</div>

</footer>

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

2、标签唯一性缩写技巧。

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

比如输入 em>.class

生成代码：<em><span class="class"></span></em>

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

输入 ul>.nav

生成代码：

<ul>

</ul>

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

输入 table>.row>.col

生成代码：

<table>

</tr>

</table>

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

输入 ul+

生成代码：

<ul>

</ul>

输入 table+

生成代码：

<table>

<tr>

</tr>

</table>

输入 tr+

生成代码：

<tr>

</tr>

输入 select+

生成代码：

</select>

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

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

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

Emmet安装及常用手册

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。