HTML/CSS速写神器之Emmet语法

Web前端 潘老师 1年前 (2020-09-06) 1269 ℃ (0) 扫码查看

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件,你使用的开发HTML/CSS的编辑器如果没有内置该插件,则需要先安装,HBuildX中时内置好的。下面我们来学一下它的语法。

说明:所有的语法写好后都要按Tab键生成对应得HTML/CSS代码

1、HTML5模版
输入!html:5,然后按下Tab键即可
HTML/CSS速写神器之Emmet语法
2、其他HTML模版
  • html:5 + Tab 或者 ! 生成 HTML5 结构
  • html:xt + Tab 生成 HTML4 过渡型
  • html:4s + Tab 生成 HTML4 严格型

3、任意一个 html 标签输入都会生成完整的闭合标签
例如输入divTab,生成如下

<div></div>

4、生成带有 idclass 的 HTML 标签
1)使用#生成id属性,例如输入 div#header则生成:

<div id="header""></div>

2)使用.生成class属性,例如输入 div.section则生成:

<div class="section"></div>

3)结合使用,例如输入 div#header.section则生成:

<div id="header" class="section"></div>

5、使用>生成后代标签
例如输入div>span,则生成:

<div><span></span></div>

6、使用+生成兄弟标签
例如输入div+p,则生成:

<div></div>
<p></p>

7、使用^生成上级标签:
例如输入ul>li>a^h1 则生成:

<ul>
    <li><a href=""></a></li>
    <h1></h1>
</ul>

也可以使用多个 ^,例如输入ul>li>a^^h1 则生成:

<ul>
    <li><a href=""></a></li>
</ul>
<h1></h1>

8、使用*重复生成多个标签
例如输入div*3,则生成:

<div></div>
<div></div>
<div></div>

例如输入ul>li*3,则生成:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

9、使用()生成分组的标签
例如输入ul>(li>a)*3则生成:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

注意和ul>li>a*3 生成是不一样的

<ul>
    <li>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </li>
</ul>

10、使用[]生成自定义属性
例如输入a[href=http://www.panziye.com][alt=潘子夜博客] 则生成:

<a href="http://www.panziye.com" alt="潘子夜博客"></a>

11、使用$生成递增的属性标签
例如输入ul>li.item$*3 则生成

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

$结合其他的还有如下使用:
1)$可以使用多次,表示位数,实现多位递增,想生成几位就输入几个$,例如输入ul>li.item$$$*3 则生成:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

2)结合@N想要从某个特定的顺序开始生成
例如输入ul>li.item$@10*3 则生成:

<ul>
    <li class="item10"></li>
    <li class="item11"></li>
    <li class="item12"></li>
</ul>

3)结合@-逆序生成到某个数
例如输入ul>li.item$@-5*3 则生成:

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
</ul>

12、使用{}生成文本内容
例如输入div{我是文字内容} 则生成:

<div>我是文字内容</div>

13、缺省元素
1)声明一个带classdiv可以不用输入div,直接输入.header+.main+.footer 则生成:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

2)Emmet 还会根据父标签进行判定例如输入table>.row*3>.col*2 则生成:

<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

下面是所有的隐式标签名称:

  • li:用于 ulol
  • tr:用于 tabletbodytheadtfoot
  • td:用于 tr
  • option:用于 selectoptgroup


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:HTML/CSS速写神器之Emmet语法
喜欢 (14)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!