HTML Emmet语法

Emmet语法

1、Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。

例题:

<body>

    <!-- div+tab键=自动生成标签 -->

    <div></div>

    <!-- div*3+tab键=自动生成3个标签 -->

    <!-- div*3 -->

    <div></div>

    <div></div>

    <div></div>

    <!-- ul>li+tab键=自动生成一个无序列表 -->

    <!-- ul>li -->

    <ul>

        <li></li>

    </ul>

    <!-- div+p+tab键=自动生成一个div标签和一个p标签 -->

    <!-- div+p -->

    <div></div>

    <p></p>

    <!-- 标签名+.+属性值+tab键=自动生成一个标签中自带一个类以及有属性值 -->

    <!-- div.dsd -->

    <div class="dsd"></div>

    <!-- 标签名+#+属性值+tab键=自动生成一个标签中自带一个id以及有属性值 -->

    <!-- p#jj -->

    <p id="jj"></p>

    <!-- 实现生成的类名是有顺序的 -->

    <!-- span.jf$*5 -->

    <span class="jf1"></span>

    <span class="jf2"></span>

    <span class="jf3"></span>

    <span class="jf4"></span>

    <span class="jf5"></span>

    <!-- 我们想生成的标签里面默认显示几个文字 标签+{} 在大括号里面写内容就可以了 -->

    <!-- div{这是一个大盒子标签} -->

    <div>这是一个大盒子标签</div>

<!-- div{我是你爸爸}*6 -->

    <div>我是你爸爸</div>

    <div>我是你爸爸</div>

    <div>我是你爸爸</div>

    <div>我是你爸爸</div>

    <div>我是你爸爸</div>

    <div>我是你爸爸</div>

<!-- div{$}*5  $是一个自增符号 从一开始-->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</body>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值