emmet语法

作者: DecadeHeart | 来源:发表于2017-02-28 19:34 被阅读86次

1.初始化操作

html:5或者!:进行html5初始化
html:xt:
html:4s

2.添加文本

p.class1#class2

3.嵌套

p>span子元素符号
p+span同级元素
p^可以让符号前的标签提升一行

4.分组

(.foo>h1)+(.bar>h2)快速生成代码块

5.隐式标签

省去div直接.item可以直接生成div块级元素,可以根据父级标签进行自我判断,例如在ul标签下.item默认属于是在li块级元素当中

6.定义多个元素,以及带不同属性

ul>li.item$
或者ul>li.item
3
区别是以$结尾,可以自动生成三个不同样式默认编号

7.值

w100相当于width:100px
其他单位
h10p+m5e
height:10%(percent)
margin:5em

8.附加属性

@f可以生成
@font-face {
font-family:;
src:url();
}

9.模糊匹配

ov:h/ov-h/ovh/oh直接生成相同代码

相关文章

  • 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.w3cplus.com/tools/emmet-cheat-sheet.html 语...

网友评论

    本文标题:emmet语法

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