Emmet語法規(guī)則

前端開發(fā)的快速編碼插件,只需要敲一行代碼然后按下 “Tab鍵” 就能生成你想要的完整HTML結(jié)構(gòu)。
推薦博客https://www.cnblogs.com/summit7ca/p/6944215.html?tdsourcetag=s_pctim_aiomsg

1.生成html初始結(jié)構(gòu)

輸入!+tab鍵生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
2.帶有id的標簽

div#header

<div id="header"></div>
3.帶有class的標簽

div.header

<div class="header"></div>
4.子節(jié)點

div>ul>li>p

<div>
  <ul>
    <li>
      <p></p>
    </li>
  </ul>
</div>
5.兄弟節(jié)點

div+ul+p

<div></div>
<ul></ul>
<p></p>
6.上級節(jié)點

div>ul>li^div (這里的^是接在li后面所以在li的上一級,與ul成了兄弟關(guān)系,當然兩個^^就是上上級)

<div>
  <ul>
    <li></li>
  </ul>
  <div></div>
</div>
7.重復

div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
8.分組()(括號里面的內(nèi)容為一個代碼塊,表示與括號內(nèi)部嵌套和外面的的層級無關(guān))

div>(ul>li>a)+div>p

<div>
  <ul>
    <li><a href=""></a></li>
  </ul>
  <div>
    <p></p>
  </div>
</div>
9.屬性[]括號內(nèi)填寫屬性鍵值對的形式,并且空格隔開

a[href='www.google.com' name='a']

<a href="www.google.com" name="a"></a>
10.編號

ul>li.test$*3 $代表一位數(shù),后面更上*數(shù)字就代表從1遞增到填寫的數(shù)字

<ul>
  <li class="test1"></li>
  <li class="test2"></li>
  <li class="test3"></li>
</ul>
11.文本 {}

ol>li{hello wold}

<ol>
  <li>hello wold</li>
</ol>
12.隱式標簽(默認可以生成的標簽)

.test

<div class="test"></div>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容