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

基本概念:

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

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

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

注意:

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

实际效果:

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

常见的情况:

1.控制缩进

&ensp; 半角的空格
&emsp; 全角的空格

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://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%")

效果:

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=“黑体”

大家可以使用MarkDown编辑器进行在线练习,掌握更多语法规则。

参考资料:

Markdown中文文档
HTML教程
Markdown之html内嵌样式

猜你喜欢

转载自blog.csdn.net/qq_41571459/article/details/112985898