【Emmet 的使用手冊（知識點超全版本）】

不穿鎧甲的穿山甲發表於2021-01-04

Emmet 使用手冊目錄

Emmet 簡介

1.外掛：Emmet ['ɛmɪt] 是一個外掛。可以快速的編寫 HTML、CSS 以及實現其他的功能。很多文字編輯器都支援。
- Emmet 外掛下載
2.開發者：Emmet 是 Zen Coding 的升級版，由 Zen Coding 的原作者進行開發。
3.解析模式：當前檔案的字尾為 .html 那 Sublime text 3 就會用 HTML 的解析模式來解析這個檔案
- 在沒有字尾的檔案中
  - 你可以按下“shift + ctrl + p”撥出皮膚，輸入“seth”就可以設定當前檔案的解析模式為 HTML
4.Emmet 使用仿 CSS 選擇器的語法來快速開發 HTML 和 CSS ——由俄國人Sergey Chikuyonok 開發，開發者的linkedin，開發者的Github。
5.Zen Coding 由兩個核心元件組成：
- 縮寫擴充套件器
  - (縮寫為像 CSS 一樣的選擇器)
- 上下文無關的 HTML 標籤對匹配器。
6.展開縮寫：所有縮寫，預設按下tab按鍵來擴充縮寫
工欲善其事，必先利其器，掌握 emmet 縮寫語法就是磨好了一把利劍。
- 本文除了舉例子之外，還有自己的一些理解和更詳細一點的說明。
★ Emmet 縮寫語法官網速查表
- 官網下載不了的話，點選速查表百度雲下載
★ Emmet 官網說明文件
Emmet 的 HTML 標籤縮寫介紹

1. Emmet 生成 HTML 的縮寫語法

1.1 HTML 文件型別和結構初始化

html:5 或!：用於 HTML5文件型別
html:xt：用於 XHTML 過渡文件型別
html:4s：用於 HTML4 嚴格文件型別

<!-- ! -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

<!-- html:5 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

<!-- html:xt -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

<!-- html:4s -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Document</title>
	</head>
	<body>
		
	</body>
</html>

1.2 註釋

快速註釋：ctrl+ /

<!-- 快速註釋：ctrl+/ -->

1.3 HTML 標籤

使用 元素的名稱 (如 div 或 p ) 來生成 HTML標籤。
Emmet 中沒有一組預定義的標籤名稱,可以編寫任何單詞 並將其轉換為一個標籤
- 單詞都可以轉換成標籤（所以要注意標籤名不要拼寫錯誤）
- :div→< div > < / div >, foo→< foo > < / foo >等等。
- ▶ 有的編輯器，只解析正規的HTML標籤名，比如 Sublime Text 3 中文版
  - 打 cat 、dog之類的，是不會展開成標籤樣式的
- 更多 Emmet 的 HTML 標籤縮寫介紹

	<!-- div -->
	<div></div>
    <!-- cat 不是真正的html標籤-->
	<cat></cat>
	<!-- dog 不是真正的html標籤-->
	<dog></dog>

1.4 巢狀

⑴ 後代-下一級

後代：>

<!-- 後代：> div>ul>li*3  -->
<div>
   <ul>
   	<li></li>
   	<li></li>
   	<li></li>
   </ul>
</div>

⑵ 兄弟-同一等級

兄弟： +，相鄰標籤

	<!-- 兄弟：+ ，div+div+ul+p -->
   <div></div>
   <div></div>
   <ul></ul>
   <p></p>

⑶ 父親-上級

上級：^ ,父親的相鄰標籤，一個^,可以上升一級
- ▼ 注意點：^可以連續使用，如 ^^,父親的父親的相鄰標籤

  <!-- 上級：^ ,div+div>p+ul^p-->
  <div></div>
  <div>
  	<p></p>
  	<ul></ul>
  </div>
  <p></p>
 <!-- div>div>p>ul>li*3^^p -->
  <div>
  	<div>
  		<p>
  			<ul>
  				<li></li>
  				<li></li>
  				<li></li>
  			</ul>
  		</p>
  		<p></p>
  	</div>
  </div>

1.5 分組

分組：()

	<!-- 分組：() ,div>(div1>p*2)+div2>ul>li*3-->
	<div>
		<div1>
			<p></p>
			<p></p>
		</div1>
		<div2>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div2>
	</div>

1.6 乘法-數量

乘法：*,數量幾個，重複幾次

 <!-- 乘法：* 數量幾個，div>ul>li*3 ，標籤數量一次性定義-->
  <div>
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>

1.7 分組和乘法結合

分組和乘法：
- 分組()和乘法 * 可以一起使用，同樣的分組有幾個
- 分組可以再巢狀分組

	  <!-- (div>dl>(dt+dd)*3)+footer>p -->
	  <div>
	  	<dl>
	  		<dt></dt>
	  		<dd></dd>
	  		<dt></dt>
	  		<dd></dd>
	  		<dt></dt>
	  		<dd></dd>
	  	</dl>

1.8 自增符號-給專案編號

自增符號：$，給元素編號
注意點：自增和乘法一起使用，$*4,序號 1~4
多加幾個$,就是在序號前加幾個0
指定階段使用@ ，$@n*m ,即m個序號，範圍是n~（n+m-1），-1 是去掉起始數字本身
△ 知識點總結，思維導圖

	  <!-- 自增符號：$,ul>li.item$*4，類名自增 -->
	  <ul>
	  	<li class="item1"></li>
	  	<li class="item2"></li>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  </ul>

	  <!-- h$*3 ，標籤自增-->
	  <h1></h1>
	  <h2></h2>
	  <h3></h3>
	  
	  <!-- h$[title=item$]*3 ，標籤名和屬性值一起自增-->
	  <h1 title="item1"></h1>
	  <h2 title="item2"></h2>
	  <h3 title="item3"></h3>
	  
	  <!-- h$[title=item$]{little boy$}*3 ，
	  標籤名和屬性值，標籤內容一起自增-->
	  <h1 title="item1">little boy1</h1>
	  <h2 title="item2">little boy2</h2>
	  <h3 title="item3">little boy3</h3>

	  <!-- ul>li.item$$*3 ，自增從0開始，
	  再加一個$,$$*3-->
	  <ul>
	  	<li class="item01"></li>
	  	<li class="item02"></li>
	  	<li class="item03"></li>
	  </ul>
	  <!-- ul>li.item$$$*3 ,自增從00開始，
	  再加兩個$$,$$$*3-->
	  <ul>
	  	<li class="item001"></li>
	  	<li class="item002"></li>
	  	<li class="item003"></li>
	  </ul>
  	<!-- ul>li.item$@-*3 ,自增順序倒著來，
  	後面加@- ，$@-*3 -->
	  <ul>
	  	<li class="item3"></li>
	  	<li class="item2"></li>
	  	<li class="item1"></li>
	  </ul>

 	 <!-- ul>li.item$@3*6 ,自增順序，按照指定階段來顯示，
 	 後面加上@數字*數字，$@3*6，從3開始 共6個序號，包含起始數字本身，序號範圍：就是3-（3+6-1）3~8 -->

	  <ul>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  	<li class="item5"></li>
	  	<li class="item6"></li>
	  	<li class="item7"></li>
	  	<li class="item8"></li>
	  </ul>
	  
	   <!-- ul>li.item$@3*3 3~5-->
	  <ul>
	  	<li class="item3"></li>
	  	<li class="item4"></li>
	  	<li class="item5"></li>
	  </ul>

1.9 ID

定義ID名稱：#

	  <!-- 定義ID,# ,div#header -->
	  <div id="header"></div>

1.10 類

定義類名稱，使用 .

	<!-- 定義類名稱，使用. div.title -->
	  <div class="title"></div>

同時定義 ID名和類的名稱

	  <!-- form#search.red -->
	  <form action="" id="search" class="red"></form>

給一個標籤 一次性定義多個類名：連續使用 .

	  <!-- div.class1.class2.class.3 ,給一個標籤 
	  一次性定義多個類名,連續使用.符號即可-->
	  <div class="class1 class2 class 3"></div>

1.11 屬性和屬性值

定義屬性和屬性值：[ ], 中括號，屬性值用 =
注意點：
- 可以同時定義多個屬性和屬性值
- 屬性個數不限制
  - 多個屬性之間，用空格分隔
- 可以不指定屬性值，只寫屬性名字，不寫= 即可，會自動給空值
- 關於屬性值需不需要使用引號：
  - 屬性值不含空格，不需要使用空格
  - 屬性值含空格，需要使用引號，單引號和雙引號都可以

	  <!-- 錯誤示例： p[title=hello world] 屬性值中間 有空格時，
	  要加雙引號-->
	  <p title="hello" world=""></p>
	  <!-- 正確示例： p[title="hello world"] -->
	  <p title="hello world"></p>
	  
	  <!-- td[rowspan=2 colspan=3 title] -->
	  <td rowspan="2" colspan="3" title=""></td>

	  <!-- div[title="hello world" ] 屬性值帶空格，使用雙引號-->
	  <div title="hello world"></div>
	  <!-- div[title='hello world' ] 屬性值帶空格，使用單引號-->
	  <div title="hello world"></div>

1.12 文字

文字：{ }, 大括號
標籤自身的內容和後代之間，使用 + 相連線。（自身內容和後代的位置，類似於兄弟一樣平起平坐）

	  <!-- div{click}>a{here}+{to continue} -->
	  <div>click<a href="">here</a>to continue</div>

	  <!-- div>{我是div的內容1}+p{我是div兒子p的內容}+{我是div的內容2} -->
	  <div>
	  我是div的內容1<p>我是div兒子p的內容</p>我是div的內容2
	  </div>

1.13 隱式標籤-自動補全

隱式標籤：標籤名省略不寫，也能自動補全標籤名， 是後代的話，自動識別，並補全後代標籤
不寫標籤名時，展開時，都會先檢視父標籤的名字
根據父標籤的名字而自動生成不同的標籤
自動補全為 div

	  <!-- 隱式標籤 -->
	  <!-- .class1 沒寫標籤名，自動補全為div標籤 ，因為div最常用嗎？-->
	  <div class="class1"></div>

	  <!-- #header 沒寫標籤名，自動補全為div標籤 -->
	  <div id="header"></div>

em 標籤的後代，自動補全為 span 標籤
- （em 表示強調，span 用來設定樣式，
  - 要強調的內容，一般都需要單獨設定一個特別的樣式，所以，em標籤的後代，自動補全為 span）
▼ 相關知識點：< em >和< strong >都表示強調，
- 但< em> < /em>標籤的內容表現為斜體，
- < strong> < /strong> 標籤的內容表現為加粗。
- < span >標籤沒有語義，它的作用，就是為了設定 單獨的樣式用
  的。


<html>
	<head>
		<style>
			span{color:red;}
		</style>	
	</head>
	<body>
	  <!-- em>.red{我是要強調的內容，我用span標籤設定樣式} -->
	  <em><span class="red">我是要強調的內容，我用span標籤設定樣式</span></em>
	</body>

ul 標籤的後代，自動補全為 li 標籤

  <!-- ul>.class$.red*3 -->
	  <ul>
	  	<li class="class1 red"></li>
	  	<li class="class2 red"></li>
	  	<li class="class3 red"></li>
	  </ul>

table 標籤的後代，自動識別為 tr
- tr 的後代，自動識別為 td

	  <!-- table>.row>.col  表，行，列-->
	  <table>
	  	<tr class="row">
	  		<td class="col"></td>
	  	</tr>
	  </table>

自動識別的規則
- li for ul and ol
- tr for table, tbody, thead and tfoot
- td for tr
- option for select and optgroup

父親	自動補全
ul、ol	li
table, tbody, thead and tfoot	tr
tr	td
select and optgroup	option
em	span

<!-- 隱式標籤，自動補全示例 -->
	<!-- <ul>.class</ul> -->
	<ul><li class></li></ul>
	<!-- <ol>.class-ol</ol>	 -->
	<ol><li class="class-ol"></li></ol>	

	<!-- <table>.class-table</table> -->
	<table><tr class="class-table"></tr></table>

	<!-- <tbody>.class-tbody</tbody> -->
	<tbody><tr class="class-tbody"></tr></tbody>

	<thead><tr class="class-thead"></tr></thead>

	<tfoot><tr class="class-tfoot"></tr></tfoot>

	<!-- <tr>.class-td</tr> -->
	<tr><td class="class-td"></td></tr>

	<!-- <optgroup>.class-opt</optgroup> -->
	<optgroup><option class="class-opt"></option></optgroup>

	<!-- <select name="" id="">.class-sel</select> -->
	<select name="" id=""><option class="class-sel"></option></select>

補全後代標籤名：一部分的標籤，後代的名字可以不寫，會自動補全後代的標籤名

	<!-- ul>.item$*3 和 ul>li.item$*3  解析後，展開的程式碼相同 -->
	<ul>
		<li class="item1"></li>
		<li class="item2"></li>
		<li class="item3"></li>
	</ul>

	<ul>
		<li class="item1"></li>
		<li class="item2"></li>
		<li class="item3"></li>
	</ul>

1.14 Emmet 書寫格式

Emmet 的語法書寫格式
- 1.並不是必須要重新開始一行，才能使用 emmet 縮寫
- 2.行內：在標籤中 ，行內也能使用 emmet 的縮寫語法
- 3.空格：Emmet 縮寫語法中 不能帶空格，因為空格是終止解析符號，遇到空格就停止縮寫解析，不能擴充了

	<!-- div>ul>li*5 -->
	<div>
		<ul>
			<li><!-- hello world span.red --> >hello world <span class="red"></span></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

1.15 新增虛擬文字

lorem ipsum
- 一篇拉丁文的文章；又叫做，啞元文字；亂數假文
- dummy text
  - ['dʌmi]
  - adj. 虛擬的 n.啞巴
- 用途：測試外觀。許多 web 開發人員使用 “Lorem ipsum” 虛擬文字來測試他們的 HTML 模板在實際資料中的外觀。
- 縮寫語法
  - lorem
  - lipsum
- 1.段落不同：每次使用縮寫語生成的文字都不同，不是同一段虛擬文字
- 2.相同的是，預設的 lorem 每次都是30個單詞
- 3.可以指定單詞個數，後面寫上數字
  - lorem10 will generate a 10-words dummy text.
  - lorem10 將生成10個單詞的虛擬文字。
- 4.可以在重複的元素中，同時生成假文字
  - p*4>lorem10
  - 使用後代運算子 >
- 5.可以和隱式標籤名一起使用
- ul>lorem5.item3 和 ul>.item3>lorem5 一個意思，第一個省略了一個 >符號，位置提前了


	<!-- ul>lorem5.item*3 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">Vel eveniet assumenda, expedita quaerat!</li>
		<li class="item">Esse beatae unde nulla quia.</li>
	</ul>
	
	<!-- ul>.item*3>lorem5 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">A itaque architecto quas recusandae.</li>
		<li class="item">Deleniti, necessitatibus porro perspiciatis ab!</li>
	</ul>

	<!-- 使用 lorem 產生虛擬文字 -->
	<!-- <p>lorem10</p> -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quidem!</p>
	
	<!-- p*4>lorem10	 -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, id.</p>
		<p>Blanditiis sapiente expedita incidunt autem necessitatibus provident deserunt eius sequi.</p>
		<p>Vitae nobis quos id modi quam ad nulla. Laborum, cum!</p>
		<p>Itaque, illum veritatis? Debitis, mollitia nulla doloribus quae dolorem aliquid.</p>	


	<!-- <p>lorem</p> -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id consequuntur odit perferendis debitis quos unde totam pariatur quibusdam, at explicabo corporis, quisquam labore cupiditate deserunt odio maiores adipisci dicta aliquid! 後面是第二次使用 lorem 產生的段落：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequatur nulla magnam minima, nesciunt ipsa quo, quibusdam recusandae fugiat aspernatur amet libero numquam deleniti eligendi nobis rem neque saepe sed.</p>
<!-- <p>lipsum</p> -->

2. Emmet 生成 CSS 的縮寫語法

用途：為 CSS 屬性和屬性值提供簡寫，更快的打出 css 程式碼，簡化工作流程。
預定義屬性片段：對於CSS 語法，Emmet 有許多預定義的屬性片段。

2.1 屬性的縮寫

margin ，使用 m 即可
如果沒找到預定義的片段，會把該縮寫直接作為屬性名
- borderr: ; 多一個r，錯誤、不存在的屬性名

2.2 同時縮寫屬性和屬性值

同時縮寫屬性和屬性值
m10——》 margin: 10px;
- 屬性名稱和屬性值之間不使用分隔符，是為了更快的打出程式碼
- 屬性和屬性值的邊界：
  - 第一次出現的 數字或連字元 被視為一個值邊界。在m10的例子中，m是屬性部分，10是值部分。

2.3 同時縮寫多個屬性值或者屬性

符號:
- 連字元 - ，連線多個屬性值
- 使用加號 + ，連線多個屬性

2.4 負的屬性值

兩個連字元 - -，一個是表示屬性值連線的，一個是表示負值的

/*m ，margin的縮寫*/
margin: ;

/*m10 ，帶屬性值的，屬性名稱和屬性值之間不使用分隔符，是為了更快的打出程式碼*/
margin: 10px;

/*m10-20，帶兩個屬性值的*/
margin: 10px 20px;

/*m-10--20 帶負得屬性值的*/
margin: -10px -20px;

/*m--10-20 帶一個正值 一個負值的*/
margin: -10px 20px;

/*m--10--20 帶兩個負值的*/
margin: -10px -20px;
/*m--10--20--30 帶三個負值的*/
margin: -10px -20px -30px;

/*★ 同時定義多個屬性*/
/*m10+bd20，同時定義兩個屬性*/
margin: 10px;
border: 20px;

/*m10+bd20+bg#3，同時定義三個屬性*/
margin: 10px;
border: 20px;
background: #333;

/*m10-20+bd20，同時定義兩個屬性，第一個屬性兩個屬性值*/
margin: 10px 20px;
border: 20px;

2.5 屬性值的單位

（1）預設單位
- 整數值:預設單位是 px
- 浮點數（帶小數的值）:預設單位是 em （em可以表示倍數，所以可以使用小數，0.75em ——》75%）
（2）顯式定義屬性值單位
- 屬性值+加任意字母：
  - 在值後面加上任意字母即可
    - 任意單詞可以定義屬性值單位，注意不要打錯單詞
    - m10cat5dog——》margin: 10cat 5dog;
（3）單位的簡寫
- p → %
- e → em
- x → ex
預設不帶單位的屬性
- z-index, line-height, opacity and font-weight

/*★ 屬性值的單位*/
/*m10  整數值，預設單位是px*/
margin: 10px;

/*m10.5 小數值，預設單位是em*/
margin: 10.5em;

/*m10ex15em ，顯式定義屬性值單位*/
margin: 10ex 15em;

/*m10cat5dog，任意單詞 可以定義屬性值單位，注意不要打錯單詞*/
margin: 10cat 5dog;

/*屬性值單位的簡寫 */
/*m10p*/
margin: 10%;

/*m10e*/
margin: 10em;

/*m10x*/
margin: 10ex;

2.6 顏色的屬性值

#符號：十六進位制顏色值，使用 # 符號
顏色值格式：1,2,3,6個字元，詳情參見下方程式碼

/*★ 顏色的屬性值格式*/
/*c#3，#後面一個字元*/
color: #333;

/*c#e0，#後面兩個字元*/
color: #e0e0e0;

/*c#fc0，#後面三個字元*/
color: #fc0;

/*c#ffcc00，#後面六個字元*/
color: #fc0;

2.7 屬性值 !important 縮寫

字尾：在屬性或者屬性值縮寫後面新增！即可快速生成

/*!important 屬性值的生成 */
/*p!+c#3!		*/
padding:  !important;
color: #333 !important;

2.8 瀏覽器供應商的字首

（1）用途：簡化輸入瀏覽器供應商字首的過程
- 連字元作為字首
  - 使用方法：在屬性前加連字元 -
- 同時輸入屬性值：支援製表鍵的編輯器，還會自動生成一串佔位符
  - 可以幾個相同的屬性值
（2）預設新增的字首
- 所有在供應商目錄檔案中定義的 CSS 屬性 將自動提供匹配的供應商字首變數。
- 這意味，我們不需要使用連字元 -，也能得到已知 CSS 屬性的有效字首變體，只需展開縮寫即可
  - 如 trf，就可以獲得供應商字首屬性的有效列表。
（3）帶連字元作為字首和不帶連字元的縮寫的區別
- 如果供應商目錄檔案中有這個屬性，則生成的片段是一樣的。
- 如果沒有的話，一個不生成字首，一個生成全部的瀏覽器字首
- 綜上，
  - 忘記寫字首時，需要的字首還是會自動新增的
  - 需要字首時，最好把連字元帶上。

/*-bdrs ,會自動生成佔位符，可以同時輸入幾個屬性值*/
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

/*trf ,沒有加 連字元 - 字首，但是自動生成了瀏覽器供應商的字首，
因為這個trf屬性在供應商目錄檔案中，會自動新增瀏覽器供應商字首*/
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;


/*-trf 和不帶連字元的 縮寫，生成一樣的瀏覽器供應商字首*/
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

（4）指定的瀏覽器字首：wmso
- w: webkit
- m: moz
- s: ms
- o: o

/*-w-trf 一次定義一個指定瀏覽器字首*/
-webkit-transform: ;
transform: ;

/*-m-trf 一次定義一個指定瀏覽器字首*/
-moz-transform: ;
transform: ;

/*-s-trf 一次定義一個指定瀏覽器字首*/
-ms-transform: ;
transform: ;

/*-o-trf 一次定義一個指定瀏覽器字首*/
-o-transform: ;
transform: ;

/*-wm-trf 一次定義兩個指定的瀏覽器字首*/
-webkit-transform: ;
-moz-transform: ;
transform: ;

/*-wms-trf 一次定義三個指定的瀏覽器字首*/
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
transform: ;

/*-wmso-trf 一次定義四個指定的瀏覽器字首*/
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

（5）字首是如何解析的
- 確定屬性名稱：在 CSS 解析器確定應該輸出的屬性名稱之後
- 查詢屬性名：在特定的供應商目錄檔案中（暫時沒有找到是哪個檔案，這個能找到的話，據說是可重寫的）查詢它的出現。
  - 如果在這些目錄中找到了展開的屬性，那麼它們的供應商字首將用於生成字首屬性。
  - 否則，將使用 所有字首。
  - 有的屬性不需要所有的瀏覽器字首，有的剛出現的前沿的新 CSS 屬性會需要所有的瀏覽器字首
▼ 知識擴充：em 單位，相對長度單位。
- 相對於當前物件內 -文字的字型尺寸。
  - 當前行內文字的字型尺寸未被人為設定，則相對於瀏覽器的-預設字型尺寸。
    - 1em 為參考字型的-大寫字母的高度
      - CSS 定義 1em 為 字元框的高度。
    - 以 em 表示的尺寸是十進位制小數或者參考字型尺寸的倍數。
      - 因此，2em 和 200%是一樣的，而 .75em 和 75% 也表示同樣的尺寸
  - 相對單位
    - em (em，元素的字型的高度)
    - ex (x-height，字母 “x” 的高度)
    - px (畫素，相對於螢幕的解析度)
- CSS 單位更多詳細介紹連結

2.9 漸變屬性值的字首

1.屬性名和屬性值的字首同時自動新增
- 屬性名和字首都沒有指定
  - 自動生成 background-image 屬性名

 div{
 	/*lg(left,#fc0 30%,red),沒有指明屬性名，自動生成background-image屬性，
 	屬性值 漸變的定義，自動生成瀏覽器供應商字首*/
 	background-image: -webkit-linear-gradient(left, #fc0 30%, red);
 	background-image: -o-linear-gradient(left, #fc0 30%, red);
 	background-image: linear-gradient(to right, #fc0 30%, red);

 }

2.自動新增指定的屬性名和字首

 div{
 	/*border-image：lg(left,#fc0 30%,red)  指定了屬性名*/
 	-webkit-border-image: -webkit-linear-gradient(left, #fc0 30%, red);
 	-o-border-image: -o-linear-gradient(left, #fc0 30%, red);
 	border-image: linear-gradient(to right, #fc0 30%, red);	
 }

3.同時修改不同瀏覽器字首的函式值
- 修改函式值，按下 tab 鍵，相同位置的屬性值，會一起修改成一樣的屬性值

在這裡插入圖片描述

2.10 模糊查詢

原理：每次輸入未知縮寫時，Emmet 都會嘗試找到最接近的程式碼片段定義。
- 模糊搜尋執行物件：是根據預定義的 程式碼片段名稱 執行的，而不是程式碼片段值或CSS屬性。
- 建立和重定義：可以建立自己的程式碼片段或重新定義現有的程式碼片段，以微調模糊搜尋體驗。
用途1：相同的屬性名和屬性值，可以用不同的縮寫打出來
用途2：讓我們寫一些縮寫的時候，可以更自由靈活點，不用死記硬背固定的格式

 /*因為模糊查詢，使用5種不同的縮寫，擴充出了相同的程式碼片段*/
 /*ov*/
 overflow: hidden;
 /*ove*/
 overflow: hidden;
 /*ovh*/
 overflow: hidden;
 /*ov:h*/
 overflow: hidden;
 /*ovhi*/
 overflow: hidden;

2.11 Emmet 如何解析 CSS 縮寫

CSS 解析器
- Emmet 有一個特殊的 CSS 解析器，它將這些縮寫擴充套件為一個完整的 CSS 屬性。
- 如何解析的：
- 兩部分：屬性+屬性值。分別擴充。
  - 找到檔案中的片段定義：在 snippets.json 檔案中（這個檔案 Emmet 外掛安裝包裡會有）查詢 m10 程式碼片段定義。
    - 如果找到它，它將作為常規程式碼段輸出。
      - ★ 所以修改 snippets.json 中的程式碼，可以修改預定義的縮寫擴充，可以用 sublime text3 開啟並修改
      - 當找到屬性部分時，解析器將搜尋 snippets.json 中的程式碼片段定義。
        對於 m 部分，它將找到 “m”:“margin:|;” 定義
        (當程式碼片段展開時，| 字元用作插入符號位置引用)。
    - 有屬性值的話，它從縮寫中提取值。
程式碼片段定義的樣式
- 像一個CSS 屬性
- 兩部分：屬性+屬性值。
  - 是為了 Emmet 能夠將 css 縮寫拆分為一個 CSS 屬性和值兩部分
  - 放置值：並將轉換後的值部分放置在插入符號位置(即 | 字元)。
定製 Emmet 外掛
- 新增和更新縮寫，可修改 snippets.json檔案
- 更改 Emmet 過濾器和操作的行為，可修改 preferences.json檔案
- 定義如何生成 HTML 或 XML 程式碼，可修改 syntaxProfiles.json檔案
  - 這些檔案在 Emmet 外掛的安裝包裡，都能找到（sublime 中，選單欄 — 首選項 — 瀏覽外掛，可以找到安裝包）

2.12 Emmet 的操作

Emmet 支援的快捷鍵操作-官網介紹
- 很多和 sublime 中自帶的快捷鍵衝突了
- 解決辦法：重新定義 Emmet 的快捷鍵
  - 首選項-瀏覽外掛-在安裝包中找到“Default (Windows).sublime-keymap”檔案，使用者 sublime 開啟，可以看到快捷鍵
  - 修改後，關閉軟體，再重啟，親測有效
⑴ 展開縮寫：tab 鍵
- “Expand Abbreviation” (Tab key)

⑵ 按照標籤對選取內容
- 自定義: ctrl+shift+0 和 ctrl+shift+9
從當前插入符號的位置搜尋標記或標記的內容邊界並選擇這些內容。
- 由內向外：ctrl+D
- 由外向內：ctrl+shift+D
  - subime 不支援這個，和本身的快捷鍵衝突了
    ，不是所有編輯器都支援的
- 英文（想知道英文的意思，可以看官網介紹，知道這個英文的意思，看原始檔的時候，比較方便清楚裡面程式碼的意思，因為是英文備註解釋的）
  - “Balance Outward” (Ctrl+D)
  - “Balance Inward (Shift+Ctrl+D)
- ★ 自定義 “按標籤對選擇內容”的快捷鍵
  - 本來的快捷鍵和sublime的快捷鍵衝突
  - 這裡重新定義成 ctrl+shift+0 和 ctrl+shift+9（9和0 數字鍵上方是左右兩個括號，比較好記）
  - 其他的操作，快捷鍵重新定義，可以參考這個方法

⑶ 標籤對之間快速跳轉
- 自定義:ctrl+alt+t
在匹配的開始標籤和結束標籤兩端快速跳轉
- ctrl+T（這個 sublme text 3 也用不了，快捷鍵衝突了）
  - 用的翻譯軟體，是有道詞典 PC 版本，可以在網頁上劃詞翻譯，看外文網站很方便
  - “Go to Matching Pair” (Ctrl+T)
  - crtl+T 已經被 sublime 佔用，可以使用 ctrl+alt+t（自定義快捷鍵）

⑷ 包裹（包含）選定內容
- 自定義: Shift+Ctrl+W 和 $#
將當前選定的內容放在生成的程式碼片段的最後一個元素中。
- （1）如果沒有選擇，action 將無聲地呼叫“匹配的標籤對”來包含上下文元素。
  - 同一等級的所有元素
- （2）將插入符號放在要換行的標籤(或標籤的內容)內並執行“用縮寫包含該內容”操作
  - 放在標記中，會包含整個標籤對
  - 放在標籤的內容中，會包含標籤的內容
  - 包含多個選定的行數
Emmet 預設快捷鍵：“Wrap with Abbreviation” (Shift+Ctrl+A)
- 跟 sublime 快捷鍵重複，這邊修改為 Shift+Ctrl+W（w，wrap，包含的縮寫，好記一點）
a. 包含指定的標籤內容
- 在下方寫縮寫的時候，上方直接會實時顯示出來
b. 包含指定的標籤對
- 游標放在開始，或者結束的標籤中後，按下 ctrl+shift+w 的快捷鍵，就可以選定這對標籤
c. 同時包含多個單行
注意點：不需要為換行新增乘數的數字(例如li*5)
- 必須使用 不帶數字的*運算子，例如:li*。
- 包含內容的標籤對的數目，會根據被包含內容的行數，自動重複。
d. 改變被包含內容的輸出位置
- 預設情況下，被包含的內容，是放在最後一個元素中的，當做元素的內容
- 使用 $# 來指定位置
- 如，把選擇的多行，作為屬性值
- ul>li[title=$#]*
⑸ 過濾器
- |t , |e , |c
① 同時包含多個單行，並刪除多餘的列表標記
- 在縮寫的末尾，使用 |t，可以同時去掉多項的列表標記，省時間

在這裡插入圖片描述

② 實體轉義
- 使用 |e，一般寫部落格可用用到

<!-- 過濾器 ，實體轉義 -->

<!-- #content>p.title -->
<div id="content">
	<p class="title"></p>
</div>

<!-- #content>p.title|e -->
&lt;div id="content"&gt;
	&lt;p class="title"&gt;&lt;/p&gt;
&lt;/div&gt;

<!-- #content>p.title|e|e -->
&amp;lt;div id="content"&amp;gt;
	&amp;lt;p class="title"&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

③ 註釋標籤： |c （Comment tags:）
- 在重要標籤周圍新增註釋。
- 預設情況下，“重要標籤”是那些帶有 id 和/或class屬性的標籤。
★ 官網更多可用過濾器的資訊
⑹ 在編輯點間快速跳轉
- Ctrl+Alt+→ , Ctrl+Alt+→
快速遍歷程式碼點：此操作適用於HTML程式碼塊，允許您快速遍歷重要程式碼點
- 這些位置，一般是需要快速定位游標和輸入內容的位置
  - 標籤之間
  - 空的屬性
  - 新行和縮排
- Emmet 預設快捷鍵（sublime 中可以使用）
  - 下一個編輯點： “Next Edit Point” (Ctrl+Alt+→)
  - 上一個編輯點：“Previous Edit Point” (Ctrl+Alt+←)

在這裡插入圖片描述

⑺ 快速選擇專案(標籤名 , 屬性 , 屬性值 , 選擇器)
- Shift+Ctrl+. 和 Shift+Ctrl+,
在 HTML 中
- 快速選擇標籤名、完整屬性和屬性值。
  - 對於class屬性，它還選擇不同的類。
在 CSS 中
- 快速選擇選擇器、完整屬性和屬性值。
  - 對於複雜的值和函式，也會選擇其中的一部分。
Emmet 的預設快捷鍵（sublime 中可用）
- 選擇下一項 “Select Next Item” (Shift+Ctrl+.)
- 選擇上一項： “Select Previous Item” (Shift+Ctrl+,)
⑻ 開關注釋
- 自定義:ctrl +shift + /
Emmet 的預設快捷鍵 “Toggle Comment” (Ctrl+/)
- 和sublime 的衝突，可設定為 ctrl +shift + forward_slash(/)
當在 HTML 文件中沒有選擇被呼叫時
- “切換註釋”操作將匹配完整的標記
  - 對於HTML，它是一個完整的標籤，對於CSS，它是一個規則或完整的屬性。
⑼ 快速刪除標籤對
- 自定義:ctrl + alt +k
位置和縮排：快速移除標籤，從當前插入符號位置找到，並調整縮排。
非 HTML 語法的 html 片段 也可以工作：“移除標籤”操作在內部使用“HTML匹配器”，因此它也可以在非 HTML 語法中工作。
快捷鍵：Emmet 的預設快捷鍵：“Remove Tag” (Ctrl+K)
- 和 sublime 的衝突，可用設定為 ctrl + alt +k
⑽ 快速計算數學表示式
- Shift+Ctrl+Y
計算簡單的數學表示式，並輸出其結果。
- 使用/運算子，它相當於四捨五入(a/b)。
用途：在需要經常修改數值的 CSS 中非常有用。
快捷鍵：“Evaluate Math Expression” (Shift+Ctrl+Y) ，sublime 中可以使用

在這裡插入圖片描述

⑾ 遞增/遞減數量
- 自定義: 1,Ctrl+↑↓,0.1 alt + ↑↓ ,10,Shift+altl+↑
按1遞增和遞減，sublime 中可用
- Increment by 1” (Ctrl+↑)
- “Decrement by 1” (Ctrl+↓)
按0.1 遞增和遞減，sublime 中不可用，需要重新設定快捷鍵
- “Increment by 0.1” (Ctrl+Alt+↑)
- “Decrement by 0.1” (Ctrl+Alt+↓)
  - 可以設定為 Alt+↑和 Alt+↓
按10 遞增和遞減，sublime 中不可用，需要重新設定快捷鍵
- “Increment by 10” (Shift+Ctrl+↑)
- “Decrement by 10” (Shift+Ctrl+↓)
  - 可以設定為 Shift+altl+↑和 Shift+altl+↓
⑿ 快速展開縮寫
- ctrl+alt+enter
一邊寫縮寫，可以一邊看到縮寫展開的樣子，不用 tab 來展開
- expand_as_you_type ，快捷鍵 ctrl+alt+enter，輸入完畢 enter 鍵確認
⒀ 分裂和合並標籤對
- 自定義 : shift+ctrl+`
用途：對XML/XSL開發人員非常有用。
快捷鍵：“Split/Join Tag” (Ctrl+J) ，和sublime本身快捷鍵衝突
- 自定義為 shift+ctrl+`
還有多行合併為一行，對映 css 屬性值到多行，解碼和編碼影像到 data：url。詳情見官網 Emmet 操作介紹

友情連結

★ Emmet 縮寫語法官網速查表
★ Emmet 官網文件
★ W3cplus Emmet 使用手冊
▲特別宣告：本文參考 Emmet 官網和 W3cplus Emmet 使用手冊，重新進行的歸納和總結，主要是為了便於理解和記憶。
Emmet 縮寫語法官網速查表
相關計算機英語詞彙和片語

感謝：♥♥♥ 這篇文章對小夥伴有幫助的話，可以點贊、評論和關注，鼓勵下作者哦，感謝閱讀~
轉載請註明出處,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 來源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/86749904
- 版權宣告：本文為博主原創文章，轉載請附上博文連結！

前端開發必備！Emmet使用手冊
2017-02-08
前端
《Redis 使用手冊》- 字串（PHP 版本）
2019-12-24
Redis字串PHP
TypeScript魔法堂：列舉的超實用手冊
2020-10-29
TypeScript
HashMap 、ConcurrentHashMap知識點全解析
2020-10-09
HashMap
JavaSE基礎 (全網最全知識點)
2023-02-27
Java
Linux使用手冊-vi使用手冊
2014-11-27
Linux
HTTP應知應會知識點複習手冊（下）
2019-02-15
HTTP
HTTP應知應會知識點複習手冊（上）
2019-02-14
HTTP
Java研發知識點全歸納 (入口)
2020-11-06
Java
可能是全網最好的MySQL重要知識點
2022-12-06
MySql
2023年最新版Apollo保姆級使用手冊(超級詳盡版本)
2023-09-30
前端必知的Emmet實用操作
2017-06-03
前端
全志R16 DragonBoard使用手冊資料下載
2019-01-04
Go
TcpDump使用手冊
2020-08-19
TCP
MyBatis 使用手冊
2020-11-21
MyBatis
sqlmap使用手冊
2022-03-04
SQL
Mybatis應用手冊
2023-03-26
MyBatis
Tmux使用手冊
2017-10-10
UX
Docker使用手冊
2017-12-13
Docker
Promise使用手冊
2017-04-19
Promise
Redis使用手冊
2014-08-18
Redis
iptables 使用手冊
2010-12-02
DotProject 使用手冊
2011-11-08
Project
Java併發知識點快速複習手冊（上）
2019-01-31
Java
Java併發知識點快速複習手冊（下）
2019-02-01
Java
JS知識點：ES6 中常見的知識點
2019-09-11
JS
關於機器學習的知識點，全在這篇文章裡了
2019-08-17
機器學習
Python全棧學習_day003知識點
2018-10-24
Python全棧
margin的知識點
2017-07-10
知識點
2018-08-17
angular 4版本小知識點----方便自己看
2019-05-29
Angular
十七點學完安全知識超級詳細瞭解程式和病毒知識(轉)
2007-08-12
Java容器（List、Set、Map）知識點快速複習手冊
2019-01-22
Java
面試必知的web知識點
2019-07-25
面試Web
「課代表」幫你總結了全網最全的Redis知識點
2019-11-21
Redis
MySQL基礎知識（全）
2017-11-21
MySql
git 基本使用手冊
2020-07-06
Git
Cobra框架使用手冊
2021-07-07
框架

【Emmet 的使用手冊（知識點超全版本）】

Emmet 使用手冊目錄

Emmet 簡介

1. Emmet 生成 HTML 的縮寫語法

1.1 HTML 文件型別和結構初始化

1.2 註釋

1.3 HTML 標籤

1.4 巢狀

⑴ 後代-下一級

⑵ 兄弟-同一等級

⑶ 父親-上級

1.5 分組

1.6 乘法-數量

1.7 分組和乘法結合

1.8 自增符號-給專案編號

1.9 ID

1.10 類

1.11 屬性和屬性值

1.12 文字

1.13 隱式標籤-自動補全

1.14 Emmet 書寫格式

1.15 新增虛擬文字

2. Emmet 生成 CSS 的縮寫語法

2.1 屬性的縮寫

2.2 同時縮寫 屬性和屬性值

2.3 同時縮寫 多個屬性值 或者屬性

2.4 負的屬性值

2.5 屬性值的單位

2.6 顏色的屬性值

2.7 屬性值 !important 縮寫

2.8 瀏覽器供應商的字首

2.9 漸變屬性值的字首

2.10 模糊查詢

2.11 Emmet 如何解析 CSS 縮寫

2.12 Emmet 的操作

⑴ 展開縮寫：tab 鍵

⑵ 按照標籤對 選取內容

⑶ 標籤對之間 快速跳轉

⑷ 包裹（包含）選定內容

⑸ 過濾器

⑹ 在編輯點間 快速跳轉

⑺ 快速選擇 專案(標籤名 , 屬性 , 屬性值 , 選擇器)

⑻ 開關注釋

⑼ 快速刪除 標籤對

⑽ 快速計算 數學表示式

⑾ 遞增/遞減數量

⑿ 快速展開縮寫

⒀ 分裂和合並 標籤對

友情連結

相關文章

2.2 同時縮寫屬性和屬性值

2.3 同時縮寫多個屬性值或者屬性

⑵ 按照標籤對選取內容

⑶ 標籤對之間快速跳轉

⑹ 在編輯點間快速跳轉

⑺ 快速選擇專案(標籤名 , 屬性 , 屬性值 , 選擇器)

⑼ 快速刪除標籤對

⑽ 快速計算數學表示式

⒀ 分裂和合並標籤對