Emmet语法快速生成HTML标签和CSS样式

it2025-03-07  24

Emmet语法快速生成HTML标签和CSS样式

Emmet语法使用缩写,来提高html/css的编写速度。Vscode内部已集成该语法。

快速生成HTML结构

生成标签直接输入标签名 按tab键生成即可。例如div然后按tab键可以直接生成<div></div>

如果想生成多个相同的标签,加上*和数字,按tab键即可;例如生成五个<p>标签只需要输入p*5再按下tab键即可

如果有父子级关系的标签,可以用">";例如ul>li,按下tab键即可生成<ul><li> </li></ul>

如果有兄弟关系的标签,用"+"就可以了

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

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

如果想要在生成的标签内部写内容可以用{}表示例如div{123},按下teb键可以生成<div>123</div>

快速生成CSS结构

可以使用首字母简写

例如:tac然后按下teb键,会自动生成text-align: center;

w100px按下teb键会自动生成width: 100px;

快速格式化代码

右键格式化文档,可以自动对齐,补全空格等格式上的一些小问题。

最新回复(0)