Emmet是Visual Studio Code中的整合工具,可以幫助我們更快地編寫HTML和CSS程式碼。它允許我們將簡單的縮寫擴展為完整的程式碼區塊,從而節省時間並減少重複輸入。 ⏱️

Emmet 的主要特點🛠️

  • 縮寫擴充:將縮寫轉換為完整的程式碼。 📝

  • 程式碼片段:快速插入預先定義程式碼結構的捷徑。 ⚡

  • 快速導航和編輯:允許快速導航和編輯程式碼中的類似元素。 🏃‍♂️

縮寫的實際例子🔍

1 -建立一個具有特定類別和/或 ID 的 div

  • 縮寫: .className#idName

  • 範例:鍵入.container並按 Enter 鍵將擴充為:

     <div class="container"></div>

具有特定類別的 div

2 -建立一個包含專案的無序列表

  • 縮寫: ul>li*3

  • 範例:鍵入ul>li*3並按 Enter 鍵將擴充為:

     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>

使用專案範例建立無序列表

3 -建立帶有文字的連結

  • 縮寫: a[href="link"]{text}

  • 範例:輸入a[href="https://example.com"]{Test}並按 Enter 鍵將展開為:

     <a href="https://example.com">Test</a>

4 -基本 HTML 結構

  • 縮寫: !

  • 例:打字!然後按 Enter 鍵將展開為基本 HTML 結構。

基本 HTML 結構

5 -建立一個帶有文字的段落

  • 縮寫: p{text}

  • 範例:輸入p{This is a paragraph}並按 Enter 鍵將展開為:

     <p>This is a paragraph</p>

帶文字的段落

6 -建立具有 src 和 alt 屬性的映像

  • 縮寫: img[src="path"][alt="description"]

  • 範例:鍵入img[src="image.jpg"][alt="Image description"]並按 Enter 鍵將擴展為:

     <img src="image.jpg" alt="Image description">

具有 src 和 alt 屬性的圖像

7 -建立一個帶有輸入欄位和提交按鈕的表單

  • 縮寫: form>input[type="text" name="name"]+button[type="submit"]{Submit}

  • 範例:輸入form>input[type="text" name="name"]+button[type="submit"]{Submit}並按 Enter 鍵將擴充為:

     <form>
       <input type="text" name="name">
       <button type="submit">Submit</button>
     </form>

帶有輸入和提交按鈕的表單

8 -建立一個包含子元素的結構(多個元素)

  • 縮寫: .container>a+p

  • 範例:鍵入.container>a+p並按 Enter 鍵將擴展為:

     <div class="container">
       <a href=""></a>
       <p></p>
     </div>

具有子元素的結構

這些只是您可以在 VSCode 中使用 Emmet 執行的操作的幾個範例。這些快捷方式提供的效率可以顯著改變您的日常生活。 💡

願力量與大家同在。再見


原文出處:https://dev.to/kibumpng/emmet-in-vscode-1l99


共有 0 則留言