VSCode中自帶插件Emmet的用法
Emmet 是一個(gè)強(qiáng)大的工具，集成在 Visual Studio Code (VSCode) 中荒适，可以大大提高編寫 HTML 和 CSS 的效率算途。以下是如何使用 Emmet 插件的一些基本方法：
使用Emmet編寫html代碼
- 輸入
!然后按Tab或Enter鍵，可以生成一個(gè)基本的 HTML 模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
分類一
- 輸入
h1#xxx,可以生成一個(gè)h1的標(biāo)簽，并且id屬性為xxx
<h1 id="xxx"></h1>
<!-- 直接輸入`#abcd` -->
<div id="abcd"></div>
- 輸入
h1.xxx,可以生成一個(gè)h1的標(biāo)簽舌菜，并且class屬性為xxx
<h1 class="xxx"></h1>
<!-- 直接輸入`.abcd` -->
<div class="abcd"></div>
- 輸入
h1[aaa=bbb],可以生成一個(gè)h1的標(biāo)簽，添加aaa屬性為bbb
<h1 aaa="bbb"></h1>
- 輸入
h1{xxx},可以生成一個(gè)h1的標(biāo)簽亦镶，標(biāo)簽包含的內(nèi)容是xxx
<h1>xxx</h1>
- 綜合例子日月，輸入
h1#aaa.b.ab[ccc=ddd eee=fff]{ggg},生成內(nèi)容如下
<h1 id="aaa" class="b ab" ccc="ddd" eee="fff">ggg</h1>
- 使用
:和使用縮寫
<!-- 輸入`input:password` -->
<input type="password" name="" id="">
<!-- 輸入`a:mail` -->
<a href="mailto:"></a>
<!-- 輸入`btn` -->
<button></button>
<!-- 輸入`btn:s` -->
<button type="submit"></button>
分類二
- 輸入
h1>h2>h3,生成內(nèi)容如下
<h1>
<h2>
<h3></h3>
</h2>
</h1>
- 輸入
h1+h2+h3,生成內(nèi)容如下
<h1></h1>
<h2></h2>
<h3></h3>
- 輸入
h1>h2^h3,生成內(nèi)容如下
<h1>
<h2></h2>
</h1>
<h3></h3>
- 綜合例子袱瓮，輸入
h1>h2>h3+h4>p>a^h5+div^^h6+span,生成內(nèi)容如下
<h1>
<h2>
<h3></h3>
<h4>
<p><a href=""></a></p>
<h5></h5>
<div></div>
</h4>
</h2>
<h6></h6>
<span></span>
</h1>
- 總結(jié)：
使用`>`符號(hào)：表示生成子元素
使用`+`符號(hào)：表示生成同級(jí)元素
使用`^`符號(hào)：表示生成父級(jí)元素的同級(jí)元素
分類三（其他）
-
()分組操作符
<!-- 輸入`h1>(h2>h3)>h4` -->
<h1>
<h2>
<h3></h3>
</h2>
<h4></h4>
</h1>
-
*乘法
<!-- 輸入`ul>li*5` -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
-
$自動(dòng)計(jì)數(shù)
<!-- 輸入`ul>li.item${test$$}*5` -->
<ul>
<li class="item1">test01</li>
<li class="item2">test02</li>
<li class="item3">test03</li>
<li class="item4">test04</li>
<li class="item5">test05</li>
</ul>
分類四（奇奇怪怪）
tbody>tr>(td.item$$@-)lorem5*5-
tbody>tr>(td.item$$@->lorem5)*5和tbody>tr>((td.item$$@-)>lorem5)*5和((td.item$$@-)>lorem5*3)*5 - 直接
giao不會(huì)出現(xiàn)提示，可以在后邊加一個(gè)*1或者+xxx,就會(huì)出現(xiàn)提示 -
()的使用爱咬，如果以)結(jié)尾則不會(huì)出現(xiàn)提示尺借，可以在后邊加一個(gè)*1或者+xxx,就會(huì)出現(xiàn)提示 -
()的用法，(h1)h2無(wú)效精拟，h5>(h1)h2有效且等價(jià)于h5>h1+h2,奇怪的用法一般轉(zhuǎn)換成+號(hào)燎斩。 -
lorem的用法，ul>lorem和ul>lorem*1效果不相同串前。后者自動(dòng)為lorem補(bǔ)上了標(biāo)簽瘫里。含*。 -
lorem的用法荡碾，lorem5*3和ul>lorem5*3效果不相同谨读。后者自動(dòng)為lorem補(bǔ)上了標(biāo)簽。含>坛吁。 -
總結(jié)：巧用
*號(hào),巧用()號(hào),lorem自動(dòng)補(bǔ)標(biāo)簽,奇怪的用法一般轉(zhuǎn)換成+號(hào)劳殖。
使用Emmet編寫css代碼
Emmet 官方文檔：https://docs.emmet.io/
【轉(zhuǎn)載自:】開思通智網(wǎng) ---- “一起來(lái)o站，玩轉(zhuǎn)AGI拨脉！”
【官網(wǎng):】https://www.opensnn.com/
【原文鏈接:】https://www.opensnn.com/os/article/10000897
