不為人知的Emmet語法規則

本篇文章給大家詳細介紹一下HTML速寫Emmet的語法規則。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

Emmet—寫HTML/CSS快到飛起

在前端開發的過程中，最花時間的工作就是寫 HTML、CSS 程式碼。一堆的標籤、屬性、括號等，頭痛。這裡推薦一個Emmet語法規則，讓你寫的時候爽到飛起，能大大提高程式碼書寫，只需要敲一行程式碼就能產生你想要的完整HTML結構，下面會介紹如何使用。

Emmet是一款插件，只要能安裝他的編輯器都能使用，大部分編輯器都可以使用該語法規則,我們平時開發的Sublime Text、Eclipse、Notepad 、VS code、Atom、 Dreamweaver等等編輯器都可以使用。

安裝方式和平常安裝外掛一樣搜尋這個emmet外掛程式安裝，每個編輯器安裝方式不同，請各自嘗試

1：html初始結構

#下圖的結構，偷懶的都會直接一個！ => Tab 解決，這樣可以快速產生基礎的結構，同時防止手寫時忘記某個程式碼區塊，輸入錯誤的程式碼。

2：id（#）,class（.）

#id指令:# ; class指令:.

• #p#test

<p id="test"></p>

• p.test

<p class="test"></p>

3：子節點（>），兄弟節點（ ），上級節點（^）

子節點指令:> ; 兄弟節點指令: ; 上級節點:^

• p>ul>li>p

#

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

• p ul p

<p></p>
<ul></ul>
<p></p>

• p>ul>li^p (這裡的^是接在li後面所以在li的上一級，與ul成了兄弟關係,當然兩個^^就是上上級）

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

4：重複（*）

重複指令：*

• p*5（*號後面加上數字表示重複的元素個數）

   <p></p>
   <p></p>
   <p></p>
   <p></p>
   <p></p>

5：分組（()）

分組指令：()

• p>(ul>li>a) p>p
  (括號裡面的內容為一個程式碼區塊，表示與括號內部嵌套和外面的層級無關）

<p>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <p>
     <p></p>
   </p>
 </p>

解釋：這裡如果不加括號的話，猜想下，a p這樣p就是和a是兄弟關係了，會包含在li裡面。懂了吧哈哈

 <p>
   <ul>
     <li>
       <a href=""></a>
       <p>
         <p></p>
       </p>
     </li>
   </ul

6：屬性（[attr]）－－id，class都有怎麼能少了屬性呢

屬性指令：[]

• a[href='
' name='xiaoA'] （中括號內填入屬性鍵值對的形式，且空格隔開）

<a href="###" name="xiaoA"></a>

6：編號（$）

編號指令：$

ul>li.test$*3 （$代表一位數，後面更上*數字就代表從1遞增到填寫的數字）

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

注意：
• 一個$ 代表一位數，$$就是兩位數了,以此類推就可以形成$(1 ),$$(01),$$$(001)
  
如果想自訂從幾開始遞增的話就利用：$@ 數字*數字

例如：ul>li*3.test$ @3

 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

7：文字（{}）

#文字指令：{}

ul>li.test $*3{測試$} （{裡面填入內容，可以和$一起組合使用哦}）

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

8：隱含標籤

這個標籤沒有指令，而是部分標籤可以不使用輸入標籤，直接輸入指令，即可辨識父類別標籤。

例如：.test

<p class="test"></p>

例如：ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

例如：select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

等等等…

隱私標籤有以下幾個：
• li：用於ul 和ol 中
• tr：用於table、tbody、thead 和tfoot 中
• td：用於tr 中

option：用於select 和optgroup 中

推薦學習：

html影片教學######

以上是不為人知的Emmet語法規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！