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
有時辰無私地幫忙菜鳥當作為年夜神，總會引起一些偽年夜神的仇恨，究竟結果新人的涌入勢必威脅他們的經濟好處和降低了他們的存在感。
無故刪我原創，無故刪我原創，請清空我的經驗，我需要全數刪除經驗，退出百度經驗、享受過。
所以請要果斷地相信本身進修的價值和意義！