Emmet 就像是編寫程式專用快捷指令，他是專為Web開發者設計的強大工具，可以幫助我們加速HTML和CSS程式碼的編寫。讓我們深入瞭解並瞭解它是如何改變Web開發的吧!
一、 什麼是Emmet？
他是一個外掛程式，可以在許多流行的編輯器和整合式開發環境（IDE）中使用，如Visual Studio Code、Sublime Text和Atom。它使用的方式簡潔且易於記憶，將大量程式碼減少到幾個按鍵，有效的加速HTML和CSS的開發。
二、 Emmet的優點：
1. 快速編寫： 例如，只需鍵入ul>li*3，就會產生一個包含3個列表項的無序列表。
2. 減少重複： 可以快速產生重複的程式碼結構，從而減少無聊又重複的編寫工作。
3. 嵌套和層級： 使得嵌套和層級結構的創建變得容易。你可以輕鬆創建深度嵌套的HTML元素或CSS選擇器。
4. 簡化CSS： 可以説明你快速編寫CSS屬性，例如m10表示margin: 10px;，這樣可以減少大量的輸入和重複。
5. 多框架支持： 支持多種框架和前置處理器，包括HTML、CSS、Sass、Less、React等，使得在各種項目中都能發揮作用。
三、 如何使用Emmet?
在支援Emmet的編輯器中啟用外掛程式。(有些編輯器已經內建Emmet了，詳細的啟用方式要依照使用的編輯器而定喔)
在HTML或CSS檔中，輸入Emmet縮寫，然後按Tab鍵或指定的快速鍵。例如，輸入div>ul>li*3，然後按Tab鍵，就會產生相應的HTML結構。
四、常用Emmet句法概覽
>：表示父子關係，用於嵌套元素。
+：表示同級關係，用於創建兄弟元素。
*：用於重複元素。
^：在嵌套中向上跳一級。
()：用於分組元素，將多個元素組合在一起。
[]：用於添加自訂義屬性。
{}：用於添加文本內容。
#：用於指定元素的 ID。
.：用於指定元素的class。
$：用於自動編號。
: :用於添加常用快捷屬性
四、常用Emmet句法範例
>：表示父子關係，用於嵌套元素。
範例：div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>+：表示同級關係，用於創建兄弟元素。
範例：ul>li+li
<ul>
<li></li>
<li></li>
</ul>*：用於重複元素。
範例：ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>^：在嵌套中向上跳一級。
範例：section>div^p
<section>
<div></div>
</section>
<p></p>()：用於分組元素，將多個元素組合在一起。
範例：(header>h1)+(nav>ul>li*2)+(main>article)
<header>
<h1></h1>
</header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
<main>
<article></article>
</main>[]：用於添加自訂義屬性。
範例：p[title=”Hello world”]
<p title="Hello world"></p>{}：用於添加文字內容。
範例：p{這是文字內容}
<p>這是文字內容</p>#：用於指定元素的 ID。
範例：div#my-id
<div id="my-id"></div>.：用於指定元素的class。
範例：p.my-class
<p class="my-class"></p>$：用於自動編號。
範例：ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>: :用於添加常用快捷屬性
針對HTML和CSS有Emmet還有很~多的快捷應用，詳細可以直接參考官方文件查看更多資訊!
https://docs.emmet.io/cheat-sheet/
小小建議 : Emmet的存在是為了撰寫文件更便利省時，想要了解其中的原理只要稍微讀一下上面句法的呈現方式就很夠用了! 其他的句法其實平常在寫文件的時候就會不知不覺的記住，所以不用死記硬背喔!
