Quickly get started editing the first CSDN blog

basic concept:

We know that the CSDN blog should be written with the Markdown editor. For the novice Xiaobai , you need to know:

1. Markdown is a lightweight markup language for authoring web documents.
2. It uses some simple symbols (* / `> [] () #) to mark the text format. These punctuations are carefully selected, and the apparent meaning is the same as the actual function.
3. It has a strong compatibility, open with any editor, the format will not be messy.

When editing your own blog on CSDN, you can refer to the navigation bar at the top of the page or the help on the right side of the interface for common styles; for styles not included in Markdown, you can directly use HTML tags.

note:

1. In CSDN website home page, click on the upper right corner 发布中心where 写文章you can quickly enter the editing interface.
2. You can first click the style at the top of the editing interface or use the shortcut key of the corresponding style, or click the specific item in the help document on the right to copy the style, and then replace the sample text;
3. You can also select the text content first , and then apply formatting to it;
4. You can even further edit the format characters after applying the format . For example, double-click the edit bar at the top of the screen 标题H, it is the second-level heading, but you need the third-level heading. At this time, you can select ##, modify ###, or move the cursor to ##insert a # in the middle.
5. 代码块</>The options at the top of the screen are scrollable, you can swipe down to select the language you need.
6. If you want to make a point presentation, you can click on the above 有序. When you finish entering one item, press Enter, the number will automatically increase; even when you insert one in the middle of the division point, the number below will automatically adjust.
7. For the mark symbols that appear when explaining the problem in the main text (such as Article 7 <div>), you can choose 代码块</>to bashframe it.
8. 摘要It is mainly displayed for yourself on the list page of the blog. Choosing appropriate article titles and tags will make it easier to be searched by the browser.
9. For block-level HTML elements - like the <div>, <table>, <pre>, <p>,other - to be put on a separate line alone, and in front of the start and end tags can not have any indentation.
10. Markdown syntax structure will not be processed in HTML block-level elements . For example, it *倾斜*is impossible to use it in HTML tables . The test is as follows:

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

actual effect:

I am a form and I want to *tilt*

Common situations:

1. Control indentation

  半角的空格
  全角的空格

2. Picture location

Method 1: Choose the style when uploading the picture

Method 2. Write #pic_leftor #pic_centeror immediately after the picture link #pic_right. such as:

![可替换文本](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 )

Method 3: <img>Write <center>or <left>or on another line in front of the label <right>. such as:

<center>
<img src="https://img-blog.csdnimg.cn/20210122174121962.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTcxNDU5,size_16,color_FFFFFF,t_70"  width="50%")

effect:

3. Picture zoom

Method 1: In the <img>label, set the width value. Be careful not to use the pxexpression, 百分比%you can keep the proportion of the original image. Such as:

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

Method 2: In the picture at the end of the link plus as =50%x50%you can. Note that =there is a space in front . Both percentages must be written and less than 100%. The percentages between the percentages are lowercase x . Such as:

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

effect:

4. Picture side by side

Note that the <img>labels are written side by side, and the widthsum of the two should not exceed 100%.

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

effect:

5. Text style

<font>You can set the font (face), color (color), size (size), etc. in the HTML tag. Note that the value of Size is 1 to 7, and the default is 3.

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

Effect:
My text style is: color=#0099ff size=4 face="Black Body"

You can use the MarkDown editor to practice online and master more grammar rules.

Reference materials:

Markdown Chinese document
HTML tutorial
Markdown HTML embedded style