Emmet语法入门

作者: Solomon_Xie | 来源:发表于2019-01-10 10:26 被阅读1次

能力强到细思极恐的地步。不光适配Sublime,还可以应用到Vim等各种编辑器中。它不光是一个插件,而是一种语法,一种思路。它能把复杂的事、重复性的事简单化。简单一句话,按下Tab键,就可以生成一段高度订制的代码,而且还保留源语句为参考,可读性可复用性强。

先看这段Emmet语句:

label[for="参数a"]{ 显示标签 }>input[type="checkbox"][id="参数a"]+input[type="text"][for="参数a"]
# 按一下Tab键,就会生成:
<label for="参数a"> 
    显示标签 
    <input type="checkbox" id="参数a">
    <input type="text" for="参数a">
</label>

然后简单说下语法吧:

  • label>input 生成label嵌套input的结构
  • label[属性1=值][属性2=值] 生成带有属性和值的结构,属性名直接写,值要用引号
  • label{内容} 生成标签中间的文字内容
  • input+input 会生成两个同级的input标签
    比较详尽的用法看这个链接:
    使用Emmet加速Web前端开发
    看这个动图:
    element-1element-1

相关文章

  • Emmet语法入门

    能力强到细思极恐的地步。不光适配Sublime,还可以应用到Vim等各种编辑器中。它不光是一个插件,而是一种语法,...

  • Emmet语法

    Emmet:一款强大的编辑器插件 Emmet的常用语法 点击这里查看链接 Emmet全部语法 链接图片

  • 前端入门03 -- Emmet,复合选择器,显示模式,背景

    Emmet语法 Emmet语法可提高html/css的编写速度,VSCode内部已经集成了该语法; 快速生成Htm...

  • html5和css3进阶----01

    emmet语法 vscode内置emmet语法结构,点击!+Tab可以生成。想生成什么标签直接输入名字。 父子关系...

  • Emmet语法

    使用Emmet语法可快速生成html框架和标签,以及css代码 ps~本人使用的vscode编辑器 Emmet语法...

  • Emmet语法

    1.Emmet语法 Emmet语法的前身是Zen coding,它使用缩写,来提高html/CSS的编写速度,Vs...

  • 前端Emmet语法文档

    Emmet语法 https://www.w3cplus.com/tools/emmet-cheat-sheet.h...

  • Emmet语法

    是不是你已经厌烦了输入减括号等html语法,给你推荐一个速录的插件,这个插件支持的编辑器非常广泛,语法很简单输入缩...

  • emmet语法

    实例 ul>li>span+p^li>span#id1.class1[titile="title1" colspa...

  • Emmet 语法

    孩子节点 > 兄弟节点 + 上级节点 ^ 倍增 * ID属性 # CLASS属性 . 自定义属性 文本 {} 组 ...

网友评论

    本文标题:Emmet语法入门

    本文链接:https://www.haomeiwen.com/subject/nocirqtx.html