掌握 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语法可以帮助我们提高代码效率,但是最重要的还是要多练。

相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip