掌握 emmet 语法,小白也能高效编码

前言

Emmet是一种快速书写 HTML 和 CSS 代码的工具,它的前身是 Zen coding,使用缩写来提高 HTML/CSS的编写速度。它提供了一种类似缩写的方式来生成 HTML 和 CSS 代码,减少了重复输入和手动编写的工作量。同时,它还有自动生成样式、快速生成内容占位符等多种实用功能,帮助进行前端开发。

语法内容

快速生成html结构语法

  1. 要生成单个标签,可以直接输入:标签再按tab键。如:

    html 复制代码
    输入div时再按tab键会生成
    <div></div>
  2. 要生成多个相同的标签,可以输入 :标签*数目。如:

    html 复制代码
    输入div*5时可生成
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  3. 快速生成有id属性的标签,可以输入:标签#id名称。(id是唯一的)如:

    html 复制代码
    输入div#nav生成
    <div id="nav"></div>
  4. 快速生成有class属性的标签,可以输入:标签.类名。(class可以是不唯一的)如:

    html 复制代码
    输入div.nav可生成
    <div class="nav"></div>
    输入div#header.nav生成
    <div id="header" class="nav"></div>
    输入div.class.nav生成(可以一直加.)
    <div class="class nav"></div>
  5. 快速生成标签的嵌套,可以输入:标签 > 标签。如:

    html 复制代码
    输入ul>li>a生成
    <ul>
        <li>
            <a href=""></a>
        </li>
    </ul>
    输入ul>li*5生成
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  6. 快速生成同级标签,可以输入:标签+标签。如:

    html 复制代码
    输入div+p生成
    <div></div><p></p>
  7. 快速生成上级标签,可以输入:标签^标签。如:

    html 复制代码
    输入div^p生成
    <p></p>
    <div></div>
    输入div+ul>li>a+p^div生成
    <div></div>
    <ul>
        <li>
            <a href=""></a>
            <p></p>
        </li>
        <div></div>
    </ul>
    输入div+ul>li>a+p^^div生成
     <div></div>
    <ul>
        <li>
            <a href=""></a>
            <p></p>
        </li>
    </ul>
    <div></div>

    由此可见^^表示上上级,以此类推。

  8. 分组:()

    括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关

    html 复制代码
    输入(div>ul>li+a)+div生成
    <div>
        <ul>
            <li></li>
            <a href=""></a>
        </ul>
    </div>
    <div></div>
  9. 自增符号(默认从1开始自增):&

    html 复制代码
    输入ul>li.class$*3生成
     <ul>
         <li class="class1"></li>
         <li class="class2"></li>
         <li class="class3"></li>
    </ul>
    输入ul>li.class$$*3生成(一个$表示一位数)
     <ul>
         <li class="class01"></li>
         <li class="class02"></li>
         <li class="class03"></li>
    </ul>
    输入h$*3生成
    <h1></h1>
    <h2></h2>
    <h3></h3>

    在$后面加@-表示倒序自增

    html 复制代码
    输入h$@-*3生成
    <h3></h3>
    <h2></h2>
    <h1></h1>

    在$后面加@2表示从2开始自增

    html 复制代码
    输入h$@2*3生成
    <h2></h2>
    <h3></h3>
    <h4></h4>
  10. 快速生成自定义属性和属性值:标签[属性="属性值"]。如:

    html 复制代码
    输入span[title="123"]生成
    <span title="123"></span>
    输入span[title="123" class="aaa"]生成(用空格隔开)
    <span title="123" class="aaa"></span>
    输入[title="123" class="aaa"]生成
     <div title="123" class="aaa"></div>
  11. 快速生成文本:{}

    html 复制代码
    输入div{aaa}生成
    <div>aaa</div>
  12. 隐式标签

    当没有指明标签时,默认为div标签

    html 复制代码
    输入.nav生成
    <div class="nav"></div>
    输入#nav生成
    <div id="nav"></div>
    输入[class="nav"]生成
    <div class="nav"></div>

    当没有指明标签时,而且有父子级关系时

    html 复制代码
    li可以在ul和ol使用,如:
    输入ul>.class$*5生成
    <ul>
        <li class="class1"></li>
        <li class="class2"></li>
        <li class="class3"></li>
        <li class="class4"></li>
        <li class="class5"></li>
    </ul>

快速生成css样式

快速输入css样式的方法是输入样式的缩写再按tab键快速生成,如:

w200按tab可以生成width: 200px;

1h26按tab可以生成line-height: 26px;

tac可快速生成text-align:center;

lh20px可快速生成line-height:20px;

ti2em可快速生成text-indent:2em;

tdn可快速生成text-decoration:none;

等等。

总结

Emmet语法可以帮助我们提高代码效率,但是最重要的还是要多练。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui