具象化LinePalace
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
No Result
View All Result
Linepalace凌品設計
No Result
View All Result
Home 網頁技術 學習筆記

加速前端開發! 你必須知道的Emmet!

rubykuo by rubykuo
September 26, 2023
in 學習筆記, 網頁技術
Reading Time: 4 mins read
加速前端開發! 你必須知道的Emmet!
8
VIEWS
Share on FacebookShare on Twitter

Emmet 就像是編寫程式專用快捷指令,他是專為Web開發者設計的強大工具,可以幫助我們加速HTML和CSS程式碼的編寫。讓我們深入瞭解並瞭解它是如何改變Web開發的吧!

目錄

Toggle
  • 一、 什麼是Emmet?
  • 二、 Emmet的優點:
  • 三、 如何使用Emmet?
  • 四、常用Emmet句法概覽
  • 四、常用Emmet句法範例

一、 什麼是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的存在是為了撰寫文件更便利省時,想要了解其中的原理只要稍微讀一下上面句法的呈現方式就很夠用了! 其他的句法其實平常在寫文件的時候就會不知不覺的記住,所以不用死記硬背喔!

Tags: 前端增加工作效率
Previous Post

網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)

Next Post

功能強大的CSS預處理器讓coding事半功倍!

rubykuo

rubykuo

中文系畢業,曾任電商網站PM,現職網頁設計師。 認為走過的每一步都有它的意義,並且會在未來成為重要的養份

Related Posts

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同
工具分享

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF
工具分享

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!
學習筆記

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)
工具分享

網頁&社群圖片設計的好幫手Microsoft Designer APP新上架(圖多)

September 25, 2023
如何連結CSS樣式?一篇了解3大寫法與實際應用
學習筆記

如何連結CSS樣式?一篇了解3大寫法與實際應用

September 25, 2023
網站維修日誌
學習筆記

coding菜鳥必備 線上程式編輯器codepen

September 26, 2023
Next Post
功能強大的CSS預處理器讓coding事半功倍!

功能強大的CSS預處理器讓coding事半功倍!

POPUPAR

  • 線上表格生成器Tables Generator 詳細教學

    線上表格生成器Tables Generator 詳細教學

    0 shares
    Share 0 Tweet 0
  • coding菜鳥必備 線上程式編輯器codepen

    0 shares
    Share 0 Tweet 0
  • 零基礎也能懂的 HTML表格(內含快速生成表格資源)

    0 shares
    Share 0 Tweet 0
  • 如何連結CSS樣式?一篇了解3大寫法與實際應用

    0 shares
    Share 0 Tweet 0
  • 【文山早午餐推薦】悠閒愜意的虎斑咖啡(含菜單)

    0 shares
    Share 0 Tweet 0

RECENT NEWS

加拿大留學必須知道的:Pathway和語言學校名詞

加拿大留學必須知道的:Pathway和語言學校名詞

October 21, 2023
Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

Gratisography免費免註冊趣味創意圖庫 高解析圖片讓你與眾不同

September 29, 2023
2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

2種常用GIF螢幕錄製動畫工具-簡報、網頁必備,簡單易用免下載,線上螢幕錄影GIF

October 17, 2023
功能強大的CSS預處理器讓coding事半功倍!

功能強大的CSS預處理器讓coding事半功倍!

September 26, 2023
加速前端開發! 你必須知道的Emmet!

加速前端開發! 你必須知道的Emmet!

September 26, 2023

Categories

  • 學習筆記 (7)
  • 工具分享 (5)
  • 生活地圖 (1)
  • 網頁技術 (10)
  • 英語學習與留學 (1)

MORE ON TWITTER

  • Home
  • 網頁技術
  • 生活地圖
  • 科技新聞
  • 英語學習與留學
歡迎來信合作:ruby@linepalace.com

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Home
  • 網頁技術
    • 學習筆記
    • 工具分享
  • 生活地圖
  • 科技新聞
  • 英語學習與留學

© 2023 Copyright ©2023 具象化 linepalace by rubykuo. All rights reserved.