如何使用CSDN写博客？—CSDN基础知识汇总

1.字体颜色2.空格符3.标题/目录/代码块等4.图片如何居中5.模板(根据需要自己设置)6.要求(方便查找)7.文章摘要8.CSDN专栏的创建与管理9.代码显示部分(重要)10.学习思路11.写作历程12.整理笔记13.坚持下去..................

小丫头爱打盹

9980人浏览 · 2022-06-30 01:57:19

小丫头爱打盹 · 2022-06-30 01:57:19 发布

编写CSDN 基础知识

1.字体颜色

#控制字体颜色
<font red="颜色"></red>   // 比如:red，yellow,green,gray,orange....

#控制字体大小
<font size="7"></font>  //字体大小最小为3~最大为7 默认值为3

#控制颜色和字体大小
<font color="red" size="7"></font>  //字体颜色、大小 （选择合适的字体颜色和大小即可）

2.空格符

&emsp;
&nbsp;

3.标题/目录/代码块等

找到工具栏最右侧的语法说明：
在这里插入图片描述

（以“代码块”为例）然后点击语法说明进行展开：
在这里插入图片描述
最后，点击“代码块”,复制粘贴到编辑区即可使用！

4.图片如何居中

在图片的格式名.png/.jpg后加"#pic_center"
#pic_center

例：
在这里插入图片描述

5.模板（根据需要自己设置）

①代码背景显示黑色字体为浅白色

##一、table表格背景
图片、代码的路径如下如所示：

代码如下：

```
// A code block
var foo = ‘bar’;
```

运行结果如下：
#pic_center

##一、table表格背景
要实现的效果图片：

代码如下：

```
// A code block
var foo = ‘bar’;
```

运行结果如下：
#pic_center

例：
在这里插入图片描述

②代码背景显示黑色字体显示彩色

##一、table表格背景
图片、代码的路径如下如所示：

代码如下：

```javascript
// An highlighted block
var foo = ‘bar’;
```

运行结果如下：
#pic_center

##一、table表格背景
要实现的效果图片：

代码如下：

```javascript
// An highlighted block
var foo = ‘bar’;
```

运行结果如下：
#pic_center

例：
在这里插入图片描述
等等，HTML、CSS、JAVA代码编写与现实，请观看快速编写CSDN博客小技巧 9.代码显示部分（也就是本章的 9.代码显示部分）

(但愿你能不被固定思维/方式所限制，能够无拘无束、写出自己的风格。多写写吧，写着写着就明白了~)

6.要求（方便查找）

①笔记部分：先写好然后统一修改格式 后期复习时大改
②代码部分： ** (标题知识点（代码主题）---->【对应笔记】)—>参考代码（课堂代码）—>自己编写的代码—>运行结果图**
③使用(一级)二级和三级标题才能显示（加入目录另说！）

7.文章摘要

直接将右侧工具栏中的目录打开，然后用截图工具（QQ截图，快捷键：Ctrl+Alt+A）进行截取文字，然后进行复制粘贴即可。

8.CSDN 专栏的创建与管理

请参考博文：CSDN 专栏的创建与管理。
在那里进行了详细的讲解和描述。

9.代码显示部分（重要）

注意：含有多个模块的d代码显示时，比如同时具有HTML代、CSS代码和javascript代码时，不能单纯的使用“html代码块”、“css代码块”、“javascript代码块”中的一种进行显示。而应该使用“无色默认的代码块”进行显示。
我在写基于JavaScript的JSON数组的购物车项目博客时，有个同学就反映了这个问题了。我自己也试验了几次，发现是“代码块”显示的问题！！！
特别感谢这位同学的评论和反馈，让我自己也注意到了曾经忽略到的细节。

在这里插入图片描述

不同模块的代码对应不同的代码块。如果编写的代码用了不合适的显示，显示效果和观看体验真的很差，就显得编写很不专业，代码很苍白、很无力、没有灵魂！
示例如下：
①使用工具栏推荐的代码显示时（即：工具栏右侧推荐的代码显示）：
（无色显示。对，就是它，代码很苍白、很无力、没有灵魂！可笑的是，我以前的代码还都是用的这种显示。。。妈呀，太多了，有时间改~）
在这里插入图片描述

在这里插入图片描述

②不合适使用代码显示时：
在这里插入图片描述
③正确使用代码显示时：

把效果扩大化：

在这里插入图片描述
说实话，上方的代码我自己看着都费劲，哈哈~

解决办法：使用工具栏上方的代码块，选择对应的代码显示方式。

在这里插入图片描述
无彩/黑白色代码显示用：代码包含多个模块的代码时，就必须需要用这种方式，否则会报错。

```
代码
```

html代码显示用：

```html
html代码
```

css代码显示用：

```css
css代码
```

javascript代码显示用：

```javascript
javascript代码
```

sql代码显示用：

```sql
sql代码
```

java代码显示用：

```java
java代码
```

等等吧，根据需要找到合适的代码显示即可！

(如果你看到我之前让代码显示的操作，请不要笑；如果笑，请小点声！但愿你看到这里能听懂我说的什么意思；如果你听不懂，我可就要笑了，哈哈~) 不是我不修改，而是我不想修改，这样每当我看到的时候就能回头看看，之前的我是多么的“ 可爱 ”~

补充：整理项目代码：

在这里插入图片描述

10.学习思路

学习方法：（仅限参考！）
请教：先自己琢磨，自己动手百度。自己实在搞不出来了，再去请教老师同学。（不要偷懒，自己能解决的不要轻易问别人，对自己来说是很好的锻炼机会）
上课好好听讲，也可以边听边做笔记（解困）
课下要自己动手先把课堂代码敲熟边敲边整理笔记（有灵感有想法及时记录）然后自己写课后作业整理笔记拓展练习
要有自己的想法和理解把知识学活而不是仅限于老师传授的知识学到的多与少全靠自己了~

11.写作历程

写文章历程：
2022.6.4写第一篇的我完全照搬，完全没有自己的想法——>过渡~我有自己的模板——>有了自己的想法——>2022.7.15写了80篇文章的我有了自己的写作想法/写作方法/写作风格——>正在步入由模糊到具体、由笼统到精确、由大模块到小模块的转变———>待续