当前位置: 首页 > news >正文

认识CSS之如何提高写前端代码的效率

🌟所属专栏:前端只因变凤凰之路
🐔作者简介:rchjr——五带信管菜只因一枚
😮前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉文章简介:本文介绍CSS一些提升写前端代码的效率。知识学习内容来自b站的@黑马程序员的视频

😃1 学习Emmet语法

所谓的Emmet语法,就是帮助我们快速生成前端代码的一些语法。利用它就可以提高我们写前端代码的效率。

适用语言:HTML、CSS。这两个都有对应的Emmet语法快速生成相应代码。

如何使用:在Vscode中已经自动集成了这个语法,只要按照对应的语法规则写代码就可以实现。

😄1.1 Emmet语法快速生成HTML结构

生成某一个标签:直接输入标签名然后按tab键

生成多个同一类型标签:输入标签名然后*数字即可

如果要生成有父子关系的几个标签,用 > 连接即可。如ul > li

如果是要生成并列的几个标签,用 + 即可。如div + p

如果要让标签带类名或者id名字,写标签名 + .类名或者标签名+#id名。如div.leiming、p#idming

😄1.2 Emmet语法快速生成CSS样式

CSS中只要输入属性的简写+属性值即可。

例如:width:200px只要输入w200 | height:600px只要输入h600 | line-height:16px只要输入lh16即可。

更多的需要自己在实战中多积累经验,但是记住一般是属性简写+属性值就可以

😃2 快速格式化代码

格式化代码就是写的代码看上去比较乱,需要快速整理成推荐的格式。那么这里Vscode的快捷键就是Shift + Alt + F。不同编辑器可能不太一样,这里推荐用Vscode。

😄2.1 自动格式化代码

所谓自动格式化代码就是每次写完代码进行保存后,页面会自动的格式化代码,我们连快捷键都不需要按。这里依旧以Vscode为例,介绍如何实现:

找到设置,输入formation,然后勾选如下设置即可

相关文章:

认识CSS之如何提高写前端代码的效率

🌟所属专栏:前端只因变凤凰之路🐔作者简介:rchjr——五带信管菜只因一枚😮前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~👉文章简…...

Vue中watch和computed

首先这里进行声明,这个讲的是vue2的内容,在vue3发生了什么变动与此无关 这里是官网: https://v2.cn.vuejs.org/v2/guide/installation.html computed > 计算属性 watch > 侦听器(也叫监视器) 其区别如下&…...

华为鲲鹏+银河麒麟v10 安装 docker-ce

设备:硬件:仅有ARM处理器,无GPU和NPU,操作系统麒麟银河V10,Kunpeng-920 #######参考原链接######### 华为鲲鹏银河麒麟v10 安装 docker-ce 踩坑 - akiyaの博客 在 arm64(aarch64) 架构服务器上基于国产化操作系统安…...

Lambda,Stream,响应式编程从入门到放弃

Lambda表达式 Java8新引入的语法糖 Lambda表达式*(关于lambda表达式是否属于语法糖存在很多争议,有人说他并不是语法糖,这里我们不纠结于字面表述)*。Lambda表达式是一种用于取代匿名类,把函数行为表述为函数式编程风…...

C语言枚举使用技巧

什么是C语言枚举 C语言枚举是一种用户自定义数据类型,它允许程序员定义一个变量,并将其限制为一组预定义的常量。这些常量被称为“枚举值”,并且可以通过名称进行引用。 在C语言中,枚举值是整数类型,它们的值默认从0…...

保姆级使用PyTorch训练与评估自己的EfficientNetV2网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址:https://github.com/Fafa-DL/Awesome-Backbones 操作教程:https://www.bilibili.co…...

【9】基础语法篇 - VL9 使用子模块实现三输入数的大小比较

VL9 使用子模块实现三输入数的大小比较 【报错】官方平台得背锅 官方平台是真的会搞事情,总是出一些平台上的莫名其妙的错误。 当然如果官方平台是故意考察我们的细心程度,那就当我没有说!! 在这个程序里,仿真时一直在报错 错误:无法在“test”中绑定wire/reg/memory“t…...

成功的项目管理策略:减少成本,提高质量

项目管理是一项具有挑战性的任务,项目团队需要合理的规划和策略,以确保项目的成功和达成预期。为了实现项目的成功,项目经理必须采用正确的策略,才能以最大限度地减少成本并提高项目质量。本文将探讨成功的项目管理策略&#xff0…...

centos 7下JDK8安装

下载安装包https://www.oracle.com/java/technologies/downloads/#java8-linux上传路径 /usr/local(替换为自己需要安装的路径)解压tar -zxvf jdk-8u131-linux-x64.tar.gz配置环境变量[rootlocalhost java]# vi /etc/profile添加如下配置在配置文件最后&…...

datatables.js中文项目使用案例

官方下载地址https://datatables.net/download/中文官网&#xff1a;http://datatables.club/资源引用<link href"~/datatables/datatables.min.css" rel"stylesheet" /> <script src"~/jquery.min.js" type"text/javascript"…...

Hadoop小结

Hadoop是什么Hadoop是一 个由Apache基金 会所开发的分布式系统基础架构。主要解决,海量数据的存储和海量数据的分析计算问题。广义上来说&#xff0c;Hadoop通 常是指一个更广泛的概念一Hadoop 生态圈。Hadoop优势Hadoop组成HDFS架构Hadoop Distributed File System&#xff0c…...

经典卷积模型回顾14—vgg16实现图像分类(tensorflow)

VGG16是由牛津大学计算机视觉小组&#xff08;Visual Geometry Group&#xff09;开发的深度卷积神经网络模型。其结构由16层组成&#xff0c;其中13层是卷积层&#xff0c;3层是全连接层。 VGG16被广泛应用于各种计算机视觉任务&#xff0c;如图像分类、目标检测和人脸识别等。…...

#Vue2篇:keep-alive的属性和方法

定义 keep-alive 组件是 Vue.js 内置的一个高阶组件&#xff0c;用于缓存其子组件&#xff0c;以提高组件的性能和响应速度。 除了基本用法之外&#xff0c;它还提供了一些属性和方法&#xff0c;以便更好地控制缓存的组件。 属性 include属性用于指定哪些组件应该被缓存&a…...

webpack指南(项目篇)——webpack在项目中的运用

系列文章目录 webpack指南&#xff08;基础篇&#xff09;——手把手教你配置webpack webpack指南&#xff08;优化篇&#xff09;——webpack项目优化 文章目录系列文章目录前言一、配置拆分二、修改启动命令三、定义环境变量四、配置路径别名总结前言 前面我们对webpack的基…...

unicode字符集与utf-8编码的区别,unicode转中文工具、中文转unicode工具(汉字)

在cw上报的报警信息中&#xff0c;有一个name字段的值是\u4eba\u4f53 不知道是啥&#xff0c;查了一下&#xff0c;是unicode编码&#xff0c;用下面工具转换成汉字就是“人体” 参考文章&#xff1a;https://tool.chinaz.com/tools/unicode.aspx 那么我很好奇&#xff0c;uni…...

3D数学系列之——再谈特卡洛积分和重要性采样

目录一、前篇文章回顾二、积分的黎曼和形式三、积分的概率形式&#xff08;蒙特卡洛积分&#xff09;四、误差五、蒙特卡洛积分计算与收敛速度六、重要性采样七、重要性采样方法和过程八、重要性采样的优缺点一、前篇文章回顾 在前一篇文章3D数学系列之——从“蒙的挺准”到“蒙…...

Python错误 TypeError: ‘NoneType‘ object is not subscriptable解决方案汇总

目录前言一、引发错误来源二、解决方案2-1、解决方案一&#xff08;检查变量&#xff09;2-2、解决方案二&#xff08;使用 [] 而不是 None&#xff09;2-3、解决方案三&#xff08;设置默认值&#xff09;2-4、解决方案四&#xff08;使用异常处理&#xff09;2-5、解决方案五…...

VMware空间不足又无法删除快照的解决办法

如果因为快照删除半路取消或者失败&#xff0c;快照管理器就不再显示这个快照&#xff0c;但是其占用的空间还在&#xff0c;最终导致硬盘不足。 可以百度到解决方案&#xff0c;就是在快照管理器&#xff0c;先新建一个&#xff0c;再点删除&#xff0c;等待删除完成就可以将…...

类和对象(一)

类和对象&#xff08;一&#xff09; C并不是纯面向对象语言 C是面向过程和面向对象语言的&#xff01; 面向过程和面向对象初步认识&#xff1a; C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基…...

Java 不同路径

不同路径中等一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。问总共有多少条不同的路径&#xff1f…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...