<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet語法</title>
</head>
<body>
<!--1、生成 html 基本結構-->
<!--
英文狀態下的感嘆號 ! + Tab 鍵
-->
<!--2、id 用 # 表示，class 用 . 表示-->
<!-- div#div1-->
<div id="div1"></div>
<!-- div.div1-->
<div class="div1"></div>
<!--3、emmet 中沒有內置的標簽，所有的標簽寫好都可以按 Tab 鍵生成標簽-->
<!-- test>test$*3 -->
<test>
<test1></test1>
<test2></test2>
<test3></test3>
</test>
<!--
4、emmet中如何表示層級關系
emmet 語法與 css 選擇器得到語法很像
> 表示子元素
+ 表示同級元素
^ 表示上級元素
-->
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- div+p -->
<div></div>
<p></p>
<!-- ul>li*3^p -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<!-- ^ 符號可以多次使用，每使用一次相當於往上爬一級-->
<!-- div>div>div+ul>li*3^^p -->
<div>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
</div>
<!--5、emmet 中的重復使用 * ，變量使用 $ -->
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul.list>li#list$*3 -->
<ul class="list">
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
</ul>
<!-- $ 通常配合 * 使用，$可以多次使用-->
<!-- ul>li#list$$$*3 -->
<ul>
<li id="list001"></li>
<li id="list002"></li>
<li id="list003"></li>
</ul>
<!--6、() 用來分組 -->
<!-- table>(tr+td)*3 -->
<table>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
</table>
<!--7、屬性使用 [name=value]，標簽里的文本內容使用 {} -->
<!-- a[href="www.baidu.com" title="fry"]-->
<a href="www.baidu.com" title="fry"></a>
<!-- a[href="www.baidu.com" title="baidu"]{百度一下} -->
<a href="www.baidu.com" title="baidu">百度一下</a>
<!-- {} 可以配合 $ 和 * 使用-->
<!--ul>li{我是list$$}*3-->
<ul>
<li>我是list01</li>
<li>我是list02</li>
<li>我是list03</li>
</ul>
<!--8、emmet 隱式標簽
最外層沒寫標簽名，默認是 div
ul 里層沒寫標簽名，默認是 li
table，thead，tbody，tfoot 下面默認是 tr
select 下面默認是 option
tr 下面默認是 td
-->
</body>
</html>
Emmet 基礎語法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。