初识 Emmet 语法
- emmet 使用 tab 键生成 html 文档，比如要生成
<div></div>
使用“div+tab 键”
在后边的描述中我们不再提及”tab 键”，直接表述为：div
生成 html5 文档结构：
- html:5
- 简化为 !
效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
id,class
<!-- id,class --><!-- div#box 或者 #box --><div id="box"></div><!-- div.active 或者 active --><div class="active"></div>
<!-- p{Hello world} --><p>Hello world</p>
包含关系
<!-- div>p>a --><div><p><a href=""></a></p></div>
兄弟结构
<!-- 兄弟级关系 --><!-- div+p+a --><div></div><p></p><a href=""></a><!-- div>p^a --><div><p></p></div><a href=""></a>
重复
<!-- 重复 *n --><!-- a{link}*5 --><a href="">link</a><a href="">link</a><a href="">link</a><a href="">link</a><a href="">link</a><!-- ul>li*5>a{link} --><ul><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul>
属性
<!-- 属性操作 ,使用[]--><!-- a[href="http://baidu.com"]{百度} --><a href="http://baidu.com">百度</a>
序号
<!-- 序号 $ --><!-- ul>li{item$}*5 --><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><!-- ul>li*15>a{link$} --><ul><li><a href="">link1</a></li><li><a href="">link2</a></li><li><a href="">link3</a></li><li><a href="">link4</a></li><li><a href="">link5</a></li><li><a href="">link6</a></li><li><a href="">link7</a></li><li><a href="">link8</a></li><li><a href="">link9</a></li><li><a href="">link10</a></li><li><a href="">link11</a></li><li><a href="">link12</a></li><li><a href="">link13</a></li><li><a href="">link14</a></li><li><a href="">link15</a></li></ul>
前导0
<!-- 前导0 --><!-- ul>li*5>a{link$$} --><ul><li><a href="">link01</a></li><li><a href="">link02</a></li><li><a href="">link03</a></li><li><a href="">link04</a></li><li><a href="">link05</a></li></ul>
从固定数开始
<!-- ul>li*5>a{link$@5} --><ul><li><a href="">link5</a></li><li><a href="">link6</a></li><li><a href="">link7</a></li><li><a href="">link8</a></li><li><a href="">link9</a></li></ul>
倒序
<!-- ul>li*5>a{link$@-5} --><ul><li><a href="">link9</a></li><li><a href="">link8</a></li><li><a href="">link7</a></li><li><a href="">link6</a></li><li><a href="">link5</a></li></ul>
CSS
<style>.box {/* w200 */width: 200px;/* bgc */background-color: red;}</style>
