Emmet安装及常用手册

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

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

注：本教程不讲CSS缩写了，此刻当作熟的框架太多了，若是还缩写原生的css,就和10年前手写全数代码的李某某没什么区别了！还有一些针对HTML5的单个标签，因为不才是10年前穿越过来的，学的工具太杂了，所以一时还没跟上时代的节拍，不是出格熟无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验

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

东西/原料

phpstorm/notepad+/emmet

若何安装emmet插件

1
下载和安装EMMET。
安装之前，我想先说下乐趣才是进修最好的教员和动力，起首去测验考试本身手写一页代码，然后再来感触感染emmet的神奇和带来效率晋升的当作就感。
emmet是一条目撑持良多软件的插件，今天我们就分享若何安装到phpstom和no无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
2
百度搜刮流风清音notepad+，里面集当作了很是多的插件，此中就包罗了emmet神器。
无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验

前端开挂之旅--标签缩写

1
此刻我们就起头前端的开挂之旅。我们从单个标签缩写起头，这些都是纯粹的记无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
生当作：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
.
输入 html:5 也可以生当作不异的结果。
近似的版本指令：
html:4t
html:4s
html:xt
html:xs
html:xxs
注重：鼠标指针在指令最后一个字符的后面按快捷键才能生当作代码，在中心或后面有空格都无法生当作代码。
2
页面head常用标签。下面都是很常见的标签代码，但可能只在一个页面顶用到无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
.
输入 link:css
生当作：
<link rel="stylesheet" href="style.css">
输入 link:favicon
生当作：
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
输入 script:src
生当作：
<script src=""></script>
输入 meta:utf
生当作：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
.
输入 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"></p>
4
ul列表常用的乘法：*和自增符号：$。这里相对于死记硬背而言稍微矫捷有点难度，要想快速进修，仍是需要死记硬背，然后内部消化、触类旁通、矫捷应用。
小时辰老是质疑为什么学什么都需要死记硬背，长年夜后才发现本来记忆是快速进修最好的方式。就像张无忌记住张三丰的每个招式今后，然后脑筋里阐发理解消无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
输入 ul>li*5
生当作：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.
输入   ul>li.item$*5
生当作：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</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>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
.
输入   ul>li.item$@-*5
生当作：
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
.
输入   ul>li.item$@3*5
生当作：
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</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
<label for=""></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>
<li></li>
</ul>
</nav>
.
同级：+
输入   div+p+bq
生当作：
<div></div>
<p></p>
<无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
上级：^
输入   div+div>p>span+em^bq
生当作：
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
输入   div+div>p>span+em^^bq
生当作：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
.
分组：()
输入   div>(header>ul>li*2>a)+footer>p
生当作：
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
输入 (div>dl>(dt+dd)*3)+footer>p
生当作：
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验
</div>
<footer>
<p></p>
</footer>
注重：上面各类标签的组合可以良多种，需要你本身矫捷应用，就可以少打良多字符。其实把握不了，也不妨，多打几个字符，马步扎得稳，扫地僧一样可以磨当作年夜神。就像哥这种10年里学了各类绝学神功，因为声音残疾，此刻仍是4k的扫地僧，不和功力有关，仍是和生成的际遇有关吧！
2
标签独一性缩写技巧。
em、ul、table如许的标签里面临应的标签都是固心猿意马的，如许里面的标签可以省略失落。
.
好比输入 em>.class
生当作代码：<em><span class="class"></span></em>
按照规范地输入是em>span.class，这里我们省略了span。
.
输入 ul>.nav
生当作代码：
<ul>
<li class="nav"></li>
</ul>
按照规范地输入是ul>li.nav，这里我们省略了li。
.
输入 table>.row>.col
生当作代码：
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
按照规范地输入是table>tr.row>td.col，这里我们省略了tr、td。
.
输入 ul+
生当作代码：
<ul>
<li></li>
</ul>
.
输入 table+
生当作代码：
<table>
<tr>
<td></td>
</tr>
</table>
.
输入 tr+
生当作代码：
<tr>
<td></td>
</tr>
.
输入 select+
生当作代码：
<select name="" id="">
<option value=""></option>
</select>
3
有时辰无私地帮忙菜鸟当作为年夜神，总会引起一些伪年夜神的仇恨，究竟结果新人的涌入势必威胁他们的经济好处和降低了他们的存在感。
无故删我原创，无故删我原创，请清空我的经验，我需要全数删除经验，退出百度经验、享受过。
所以请要果断地相信本身进修的价值和意义！