?EMMET 語法 (https://docs.emmet.io/)
?概念
? ? emmet是一種介于標(biāo)記性語言(如html墨坚、xml)和規(guī)范之外的邏輯輸入方法秧饮,是一個 Web 開發(fā)人員的工具包,可以極大地改進(jìn)您的 HTML 和 CSS 工作流程泽篮,可以跨不同平臺工作:Web 瀏覽器盗尸、Node.js、Microsoft WSH 和 Mozilla Rhino帽撑。
語法
1泼各、 元素(可以使用元素的名稱,如div或p來生成HTML 標(biāo)記)以vs code 為測試軟件
? ? div+tab鍵 ? ? ?<div></div>
? ? p +tab鍵 ? ? ? ?<p></p>
? ? ...........
<1> 嵌套運(yùn)算符(用于在生成的樹中定位縮寫元素:是否應(yīng)該放置在上下文元素內(nèi)部或附近)
① 孩子 > 使用>運(yùn)算符將元素相互嵌套:
? ? div>ul>li ? +tab鍵
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
② 兄弟 + ?使用+運(yùn)算符將元素彼此靠近放置在同一級別:
? ? ?div+p+div ?+tab鍵
? ? ? ? <div></div>
? ? ? ? <p></p>
? ? ? ? <div></div>
③ 孩子+兄弟同時使用
? ? div+div>p>span ?+tab鍵
? ? <div></div>
? ? <div>
? ? ? ? <p><span></span></p>
? ? </div>
④ 乘法 ? * ? 使用*運(yùn)算符亏拉,您可以定義元素應(yīng)該輸出多少次:
? ? ul>li*5 ? ? +tab鍵
? ? ?<ul>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? </ul>
⑤ 分組 () Emmets 的高級用戶使用括號對復(fù)雜縮寫中的子樹進(jìn)行分組:
? ? div>(div>ul>li*3)+span ? ? ?+tab鍵
? ? <div>
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <span></span>
? ? </div>
<2>?屬性運(yùn)算符(用于修改輸出元素的屬性扣蜻。例如,在 HTML 和 XML 中及塘,您可以快速將class屬性添加到生成的元素莽使。)
① class屬性和id屬性
? ? div#header+div.page+div#footer.class1
? ? <div id="header"></div>
? ? <div class="page"></div>
? ? <div id="footer" class="class1"></div>
②項目編號 $ 使用乘法*運(yùn)算符,您可以重復(fù)元素笙僚,但$可以對它們進(jìn)行編號芳肌。將$運(yùn)算符放在元素名稱、屬性名稱或?qū)傩灾抵欣卟悖暂敵霎?dāng)前重復(fù)元素的數(shù)量:
? ? ul>li.list$*5
? ? <ul>
? ? ? ? <li class="list1"></li>
? ? ? ? <li class="list2"></li>
? ? ? ? <li class="list3"></li>
? ? ? ? <li class="list4"></li>
? ? ? ? <li class="list5"></li>
? ? </ul>
③ 可以$連續(xù)使用多個來用零填充數(shù)字:
? ? ul>li.list$$$*5
? ? <ul>
? ? ? ? <li class="list001"></li>
? ? ? ? <li class="list002"></li>
? ? ? ? <li class="list003"></li>
? ? ? ? <li class="list004"></li>
? ? ? ? <li class="list005"></li>
? ? </ul>
?④文本 {} 可以使用花括號向元素添加文本:
? ? span{啊啊啊啊啊啊啊啊}
? ? <span>啊啊啊啊啊啊啊啊</span>
?
總結(jié)
? ? div>(div>ul>li#list$*3{123})+span
? ? <div>
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li id="list1">123</li>
? ? ? ? ? ? ? ? <li id="list2">123</li>
? ? ? ? ? ? ? ? <li id="list3">123</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <span></span>
? ? ?</div>