Emmet基本語法學習
雖然我不是做前端的，但是作爲web開發者，經常編寫html,jsp等文件，當我無意中知道了emmet這個神奇的利器時，我被深深的折服，於是上網搜索一下，簡單學習一下基本語法，做個筆記。
1、初始化html文檔
!和html:5 生成html文檔類型
例如，輸入以下命令，然後按tab鍵：
html:5
生成以下內容：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2、id操作符 #
如果要生成一個指定id的div,則可以使用如下命令：
div#foo
得到的如下：
<div id="foo"></div>
3、類操作符.
生成一個指定class的元素時，使用.號（英文點號）
div.center
<div class="center"></div>
4、元素文本 {}
p.center{文章查看}
按tab鍵後會生成如下html
<p class="center">文章查看</p>
5、屬性操作符 []
a[href=www.baidu.com]{百度一下}
<a href="www.baidu.com">百度一下</a>
注意：{}和[]貌似有前後順序，屬性[]要在文本{}之後纔可以，如上一個命令，
a[href=www.baidu.com]{百度一下}
如果寫成下面命令，得到錯誤的結果：
a{百度一下}[href=www.baidu.com]
<a href="">百度一下</a>
6、子節點操作符 >
如果我們要生成嵌套的標籤，就要用到子節點操作符
div.main>div.wrap>div.content>ul>li
<div class="main">
<div class="wrap">
<div class="content">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
7、父節點操作符 ^
div.center>div.h1^div.center>div.h2^div.center>div.h3
<div class="center">
<div class="h1"></div>
</div>
<div class="center">
<div class="h2"></div>
</div>
<div class="center">
<div class="h3"></div>
</div>
div.center>div.content>ul>li^^div.content>ul>li^^div.content>ul>li
<div class="center">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="content">
<ul>
<li></li>
</ul>
</div>
<div class="content">
<ul>
<li></li>
</ul>
</div>
</div>
8、兄弟節點操作符 +
div.title>p{標題}+^div.content>p{內容}
<div class="title">
<p>標題</p>
</div>
<div class="content">
<p>內容</p>
</div>
9.多個兄弟節點操作符 *
一個ul下面肯定不止一個li,如果一個一個的輸入，肯定不合適，這時使用*
ul.menu>li*5
<ul class="menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ok ,5個li出來了。
10、計數器 $
ul.menu>li#id${item$}*5
<ul class="menu">
<li id="id1">item1</li>
<li id="id2">item2</li>
<li id="id3">item3</li>
<li id="id4">item4</li>
<li id="id5">item5</li>
</ul>
11、分組操作符()
(div.foo>h1)+(div.bar>h2)
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
12、隱式標籤
我們可以直接輸入.center來輸入class="center"的div:
.center
<div class="center"></div>
支持的隱式標籤有如下：
li :用在ul和ol中
tr :用在table,tbody,和tfoot中
td :用在tr中
option :用在select 和optgroup中
ul.menu>.item*5
<ul class="menu">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
table.tb>.tbrow*3>.tbd*4
<table class="tb">
<tr class="tbrow">
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
</tr>
<tr class="tbrow">
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
</tr>
<tr class="tbrow">
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
<td class="tbd"></td>
</tr>
</table>
emmet編寫html的基本語法差不多就這些，要想快速編寫，得多加練習纔是。
注意，其實生成相同一段html段，可以有好幾種不同的組合語法，大家可以在平時練習的時候，對比一下效率和適用性，選擇自己覺得最適合，效率最高的一種語法組合。我在上面的例子中，可能並不是最好的，只是爲了演示單個操作符的效果。
emmet簡單使用教程
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章