HTML-emmet语法

103 阅读1分钟

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打出一个输入框、一个复选框、一个按钮