emmet语法
> : 父子关系
+ : 兄弟关系
*n :n个
() :分组元素
^ : 跳转上一级
[属性名=“属性值”]可以给元素指定的属性名,不是中文属性值不用写双引号
要想再添加一个属性值可以在前一个属性值后添加空格键来实现
元素标签
id:元素的唯一标记
class:给元素一个类名,可以重名,可以多个
案例1
通过 header>nav>img+ul>li*4>a 可以得到
<header>
<nav>
<img src="" alt="">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
案例2
给元素添加元素标签并使用emmet语法实现
通过 header#header1>nav.meun-nav>img[alt="图片加载失败"]+ul.meun-list>li.item$*4>a 可以得到
<header id="header1">
<nav class="meun-nav">
<img src="" alt="图片加载失败">
<ul class="meun-list">
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
</ul>
</nav>
</header>
练习
用emmet打出一个输入框、一个复选框、一个按钮