快速上手编辑第一篇CSDN博客

基本概念：

我们知道，CSDN博客要采用Markdown编辑器来书写。对于新手小白来讲，你需要知道：

1. Markdown 是一种轻量级标记语言，用于创作web文档。
2. 它使用一些简单的符号（* / ` > [] () #）来标记文本格式，这些标点是经过仔细挑选的，看上去的含义和实际的功能相同。
3. 它有着很强的兼容性，使用任何编辑器打开，格式都不会乱。

在CSDN上编辑自己的博客时，常见的样式可以参考页面上方的导航栏或者界面右边的帮助；对于 Markdown 中未包含的样式 , 你可以直接使用 HTML标签。

要点：

1. 在CSDN网页首页，点击右上角发布中心里的写文章，即可快速进入编辑界面。
2. 你可以先点击编辑界面上方的样式或者使用相应样式的快捷键，或者先点击右侧帮助文档的特定项，把样式复制过来，然后替换掉示例文本；
3. 也可以先选中文本内容，再对其应用格式；
4. 也可以应用完格式后，进一步编辑格式字符。比如点击两下屏幕上方编辑栏的标题H,是二级标题，但是你需要三级标题。这时你可以选中##，修改为###，或者移动光标在##中间插入一个＃。然后将###一复制，就可以到处使用了。
5. 甚至可以直接手打格式控制符，浏览器也能成功解析成对应样式。
6. 屏幕上方代码块</>的选项是可以滚动的，你可以向下滑动选择你需要的语言。若直接点击，会应用你上次的编程语言。
7. 如果要分点陈述，可以点击上方的有序。当你输完一条，按回车，编号会自动增加；甚至当你在分点的中间插入一条，下面的编号会自动调整。
8. 对于在正文中说明问题时出现的标记符号(如第7条的<div>)，你可以选用代码块</>的bash框起来。
9. 摘要主要是在博客的列表页显示给自己看。选择合适的文章标题和标签会更容易被浏览器搜索到。
10. 对于 HTML 块级元素——像 <div>, <table>, <pre>, <p>, 等——必须另起一行单独放 , 并且开始和结束标签前面不能有任何缩进。
11. Markdown 语法结构在 HTML 块级元素中不会被处理. 比如,想在 HTML 表格中使用*倾斜*是不行的。测试如下：

<table>
    <tr>
        <td>我是一个表格，我想*倾斜*</td>
    </tr>
</table>

实际效果：

我是一个表格，我想*倾斜*

常见的情况：

1.控制缩进

  半角的空格
  全角的空格

2.图片位置

方法1：上传图片时就选择好样式

方法2.在图片链接后紧接着写#pic_left或者#pic_center或者#pic_right。比如：

![可替换文本](https://img-blog.csdnimg.cn/2021012217293320.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTcxNDU5,size_16,color_FFFFFF,t_70#pic_center )

方法3：在<img>标签前面另起一行写<center>或者<left>或者 <right>。比如：

<center>
<img src="https://i-blog.csdnimg.cn/blog_migrate/75d916026608ae8a7aae7794e8ccdb67.jpeg"  width="50%")

效果：

3.图片缩放

方法1：在<img>标签里，设置width值。注意不要用px表示，用百分比%可以保持原图的比例。如：

<center>
<img src="图片链接" width="60%" />
</center>

方法2：在图片链接末尾加上如 =50%x50%即可。注意=前面有一个空格 ，两个百分比都要写且小于100%,百分比之间是小写的x。如：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210124130811373.jpg#pic_center =50%x50%)

效果：

4.图片并排

注意<img>标签并排写，两个width加起来不要超过100%。

<center >
    <img src="图片1地址" width="50%"/><img src="图片2地址" width="50%"/>
</center>

效果：

5.文字样式

在HTML的<font>标签里可以设置字体(face)、颜色(color)、大小(size)等。注意Size取值为1 到 7，默认为 3。

<font color=#0099ff size=4 face="黑体">  我的文字样式为：color=#0099ff size=4 face="黑体"   </font>

效果：
我的文字样式为：color=#0099ff size=4 face=“黑体”

6.插入表格

方法1：

点击编辑栏，回生成一个两行两列的表格。在中|--|--|上面一行是表头；|--|--|行是控制每一列样式；|--|--|下面一行是每行的内容。可以在格式符号中间加减|或--|改变列数,也可以加减| | | |改变行数。

| 表头1 | 表头2 | 表头3|
|  :--  |  --  | --:  |
| 内容1 | 内容2 |内容3 |
| 内容a | 内容b |内容c |

效果：

表头1	表头2	表头3
内容1	内容2	内容3
内容a	内容b	内容c

方法2

<table>
  <tr>
    <td>应用层</td>
    <td rowspan="2">Zigbee联盟</td>
  </tr>
  <tr>
    <td>网络层/安全层</td>
  </tr>
  <tr>
    <td >MAC层 </td>
    <td rowspan="2">IEE802.15.4</td>
  </tr>
  <tr>
    <td>物理层</td>
  </tr>
</table>

效果：

应用层	Zigbee联盟
网络层/安全层
MAC层	IEE802.15.4
物理层

7.自动目录

放在文章开始，系统可以按照标题级别自动生成目录。方便读者了解文章结构，快速跳转到相应部分。

@[TOC]

8.换行

<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

<p>
我使用 p元素换行。
</p>
我使用br元素换行<br>

9.引用块

代码：

>鲁迅说过：我家门前有两棵树,一棵是枣树,另一棵也是枣树

效果：

鲁迅说过：我家门前有两棵树,一棵是枣树,另一棵也是枣树

10.分割线

代码：

---

效果：

---

大家可以使用MarkDown编辑器、typora进行练习，掌握更多语法规则。

参考资料：

Markdown中文文档
HTML教程
Markdown之html内嵌样式
图片和文字的对齐方式