美文网首页
Emmet语法

Emmet语法

作者: 秋城晚风 | 来源:发表于2022-06-04 10:49 被阅读0次

1.Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/CSS的编写速度,Vscode内部已经集成该语法。

1.快速生成HTML结构语法

1.生成标签,直接输入标签名按Tab键即可 比如 div 然后tab键 就可以生成<div></div>

2.如果想要生成多个相同标签 加上*就可以了 比如 div*3 就可以快速生成3个div

3.如果有父子级关系的标签,可以用> 比如 ul>li就可以了

4.如果有兄弟关系的标签,用+就可以了 比如div+p

5.如果生成带有类名或者id名字的,直接写.demo或者#two 按tab键就可以了

6.如果生成的div类名是 有顺序的,可以用自增符号$

7.如果想要在生成的标签内部书写内容可以用{}表示

2.快速生成CSS样式语法

CSS基本采取简写形式即可。

1.比如w200 按Tab 可以生成width:20px;

2.比如lh26 按Tab 可以生成line-height:26px;

1.3快速格式化代码

Vscode 快速格式化代码:shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:

(1)文件-->首选项-->设置

(2)搜索format,勾选format on save即可。

只需要设置一次即可,以后都可以自动保存格式化代码。

相关文章

  • 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/iochmrtx.html