CSS代码格式化

发布时间：2026/10/9 1:15:52

CSS代码格式化
本文目录1. 背景2. 为什么要进行代码格式化3. 如何进行代码格式化4. 如何快捷的进行格式化5. 小结1. 背景为什么单独拿出一章来讲代码格式化的问题是因为我发现初学者不理解为什么要进行代码格式化以及如何进行代码格式化。本篇就来说一下这方面的问题。2. 为什么要进行代码格式化先来看一段代码!DOCTYPEhtmlhtmlheadmetacharsetutf-8style/style/headbodydivhello/div/body/html这样的代码虽然也没错但是看起来非常费劲让人难以理解。我们对比下格式化后的代码!DOCTYPEhtmlhtmlheadmetacharsetutf-8style/style/headbodydivhello/div/body/html是不是一目了然干净清爽。这就是代码格式化的意义让代码更加易读易懂易修改。代码格式化就好比收拾屋子只有把屋子收拾干净整齐了你住起来才舒服。代码只有格式化了你用起来才方便。另外在编程界代码格式化是最基本的素养如果你出去面试代码格式化这块搞不好面试官上来就会觉得你很不专业。所以作为初学者务必从一开始就要注意代码格式化的问题。3. 如何进行代码格式化代码格式化是靠缩进来实现的一般来说子标签相对于父标签要多缩进一个tab键的距离。例如bodydivhello/div/bodydiv是body的子标签所以div比body多缩进了4个空格此处也是一个tab键的距离。hello是div的内容相当于孩子所以hello比div多缩进了4个空格。所以对一个HTML页面来说最规范的缩进应该是这样子的!DOCTYPEhtmlhtmlheadmetacharsetutf-8style/style/headbodydivhello/div/body/html但是由于head、body大家太熟悉了也是非常底层的元素离html很近是html的亲生孩子所以我们也可以把head、body放到跟html同级的位置!DOCTYPEhtmlhtmlheadmetacharsetutf-8style/style/headbodydivhello/div/body/html这两种写法都OK。4. 如何快捷的进行格式化在VSCode中可以按AltShiftF键代码就会自动格式化。其他的开发工具或者代码编辑器也都有类似的快捷键大家百度一下即可。5. 小结代码格式化很重要要养成习惯。

相关新闻

docker私有仓库 harbor私仓 harbor daemon.json配置 docker配置 含 mtr https

docker私有仓库 harbor私仓 harbor daemon.json配置 docker配置 含 mtr https

# harbor https部署 (815条消息) harbor安装并配置https_freesharer的博客-CSDN博客_harbor配置https 第一个报错： JG证书报错： 关于nginx配置ssl https请求访问，出现下面错误 SSL_CTX_use_PrivateKey_file("/system/nginx/ssl/test.k…

2026/10/9 1:15:52 阅读更多 →
JSP+SQL Server社区居民信息管理系统毕设源码：九大模块完整交付

JSP+SQL Server社区居民信息管理系统毕设源码：九大模块完整交付

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 1:14:52 阅读更多 →
Bert预训练模型fine-tune实战：文本相似度计算与工程落地

Bert预训练模型fine-tune实战：文本相似度计算与工程落地

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 1:14:52 阅读更多 →

最新新闻

刷穿 LeetCode 20：有效的括号——栈 + 哈希表与栈 + ASCII 差值的双解法全解析

刷穿 LeetCode 20：有效的括号——栈 + 哈希表与栈 + ASCII 差值的双解法全解析

教程文档 【免费下载链接】LogicStack-LeetCode 公众号「宫水三叶的刷题日记」刷穿 LeetCode 系列文章源码 项目地址： https://gitcode.com/gh_mirrors/lo/LogicStack-LeetCode 点击查看 免费下载 本文是「宫水三叶的刷题日记」系列（LogicStack-LeetCod…

2026/10/9 2:14:27 阅读更多 →
Apache OpenWhisk Standalone Server 完全指南：单 Jar 搭建本地 Serverless 开发环境

Apache OpenWhisk Standalone Server 完全指南：单 Jar 搭建本地 Serverless 开发环境

后端云原生 【免费下载链接】openwhisk Apache OpenWhisk is an open source serverless cloud platform 项目地址： https://gitcode.com/gh_mirrors/ope/openwhisk 点击查看 免费下载 本文围绕 Apache OpenWhisk 仓库中的 Standalone Server 模块（core…

2026/10/9 2:14:27 阅读更多 →
PaddleCV 系统设计思想深度解析：基于 DAG 的统一推理部署框架

PaddleCV 系统设计思想深度解析：基于 DAG 的统一推理部署框架

人工智能深度学习计算机视觉NLP语音 【免费下载链接】models Officially maintained, supported by PaddlePaddle, including CV, NLP, Speech, Rec, TS, big models and so on. 项目地址： https://gitcode.com/gh_mirrors/mo/models 点击查看 免费下载 导读 Padd…

2026/10/9 2:14:27 阅读更多 →
HTTP协议零基础拆解：请求头、响应状态码与调试实战

HTTP协议零基础拆解：请求头、响应状态码与调试实战

1. 从一次浏览器地址栏输入开始说起如果你正在学 Web 开发，无论你打算写前端、后端、还是做全栈，HTTP 都是那个绕不开的坎。它就像网络世界的普通话，前端和后端沟通、浏览器和服务器沟通、App 和云服务沟通，全都靠它。很多新手被 …

2026/10/9 2:14:27 阅读更多 →
openJiuwen agent-core 代码风格规范：Ruff 格式化、异步安全与模块化日志实践

openJiuwen agent-core 代码风格规范：Ruff 格式化、异步安全与模块化日志实践

人工智能AI AgentAgent 框架大模型工具调用RAG提示工程强化学习 【免费下载链接】agent-core openJiuwen agent-core可提供AI Agent开发、运行、调优与演进相关的全套SDK能力 项目地址： https://gitcode.com/openJiuwen/agent-core 点击查看 免费下载 openJiuwen a…

2026/10/9 2:14:27 阅读更多 →
Qt 文本光标 QTextCursor 实战：从定位到选区的可复制配置与验证

Qt 文本光标 QTextCursor 实战：从定位到选区的可复制配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 2:13:26 阅读更多 →

日新闻

Java时间API实战：LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API实战：LocalDate、Date与ZonedDateTime的转换与避坑指南

Java时间API这个话题，隔三差五就会在群里被翻出来讨论一次。上周还有个同事线上处理一个订单超时问题，排查到最后发现是ZonedDateTime序列化后时区丢了，用户在下单当天晚上看到的时间整整差了8个小时。这类问题几乎每个做Java开发的人都遇到过…

2026/10/9 0:00:49 阅读更多 →
EasyTier实践：从NAT穿透到子网代理的异地组网部署与排错

EasyTier实践：从NAT穿透到子网代理的异地组网部署与排错

前几个月我手头有好几台机器需要互相访问：办公室台式机、家里 NAS、还有一台云主机。如果只是偶尔传个文件倒还好，问题是工作场景经常要在几处环境之间来回切换，每次都先登录跳板机再层层代理，实在折腾。我先后试过端口映射、自建…

2026/10/9 0:00:49 阅读更多 →
AI Agent工程实战：从七要素到七个决策点的系统设计指南

AI Agent工程实战：从七要素到七个决策点的系统设计指南

AI Agent 这个词在过去一年里被反复提及，但真正动手搭过一套能跑起来的 Agent 系统的人都知道，从"知道它是什么"到"让它稳定干活"之间隔着一整套工程决策。我前后参与过几个 Agent 项目的落地，从最初用现成框架拼装&…

2026/10/9 0:01:50 阅读更多 →

周新闻

KT148A语音芯片外挂8002D功放的工程实践指南

KT148A语音芯片外挂8002D功放的工程实践指南

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:32 阅读更多 →
LLC谐振变换器增益公式推导：从FHA等效到完整归一化表达式

LLC谐振变换器增益公式推导：从FHA等效到完整归一化表达式

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:40 阅读更多 →
ARM架构深度解析：从RISC设计理念到交叉编译实战

ARM架构深度解析：从RISC设计理念到交叉编译实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 10:10:36 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 21:13:17 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 15:26:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 13:34:55 阅读更多 →