当前位置:首页 > 前端技术 > vscode快速生成HTML和CSS代码

vscode快速生成HTML和CSS代码

2022年09月16日 20:03:53前端技术4

Emmet语法

      快速生成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.如果向在生成的标签内部添写内容可以用{}表示,div{文字}

注意中间不能有空格

       快速生成CSS样式语法

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

1.比如w200按tab 可以生成width: 200px;

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

        快速格式化代码

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

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

1 )文------.> [首选项] ------- [设置] ;

2 )搜索emmet.include;

3 )在settings.json下的[用户]中添加以下语句:

” editor.formatOnType": true,

" editor.formatOnSave' ": true

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

 

 

作者:风飘十里
来源链接:https://blog.csdn.net/weixin_48565572/article/details/117230090

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42330.html

标签: css
分享给朋友:

“vscode快速生成HTML和CSS代码” 的相关文章

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

html和css的属性大全

一、HTML属性 1、字体属性(font) 1、大小 {font-size: x-large;}(特大) xx-small;(极小) 一般只要用数值就可以,单位:PX、PD 2、样式 {font-style: oblique...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

CSS 简介

CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。