如何花式写CSDN博客文章——一些你可能不知道的元素

使用CSDN博客撰写文章

  撰写CSDN博客文章时，可使用其提供Markdown编辑器和富文本编辑器去编写文章内容，两者最终都会通过翻译引擎转化为HTML内容，最后浏览器将其渲染到页面上。这里我比较偏爱Markdown文本编辑器——可以使用键盘完成所有操作【与unix的vim编辑器类似】。熟练的话可以一定程度的加快撰写文章速度。接下来的内容都是围绕Markdown编辑器去讲述的。富文本编辑器的操作其实类似与Word文档软件的操作，相较于Markdown来说使用比较简单。

---

---

说一说Markdown编辑器

  官方释义：Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用.

Markdown语法

  若想要使用Markdown编辑器撰写文章，需要想学习Markdown语法，才能在写作时运用自如，以下推荐三个学习网址学习Markdown语法：

1. 官方教程
2. 菜鸟教程

👉注:其实Markdown语法能记就记，记不住也可以，只要大致了解就行了，CSDN博客撰写页面就提供了简单的Markdown语法说明，在写作时忘记了就可以看看或直接复制修改使用，写多了就记住了。

**

CSDN博客文章支持那些元素

  CSDN博客文章本身支持的元素挺多的，有以下元素：


但这些元素并不能满足我的写作需求，还能添加一些有意思的元素吗？答案是有，而这种方式支持Markdown编辑器才能生效，这也是我使用Markdown编辑器原因之一。以下是我们能新增的一些元素：

使用HTML元素

  其实大部分Markdown编辑器都支持所有的HTML元素和CSS样式，但CSDN博客提供的Markdown编辑器过滤了许多元素，导致很多东西都不能生效。

👉注：CSDN博客提供的Markdown编辑器仅支持部分HTML元素，不支持所有CSS样式。如【如iframe、audio、video、style等HTML元素、CSS内部样式、行内样式都不会生效】。

常用文本样式标签

  <center> 居中
  <s> <strike> 删除线
  <i> <em> 斜线
  <b> <strong> 加粗
  <u> 下划线
  sub 下标
  sup 上标
  code 代码片段

文本对齐属性

  行内元素和块级元素可使用：align: center | left right 属性控制文本对齐。

1. align=right
   代码：<p align=right>左对齐</p>
   样式：

   左对齐

2. align=center
   代码：<p align=center>居中</p>
   样式：

   居中

font调整文本字体、大小和颜色

   利用font标签的color属性可自定义文本的颜色。

1. 大小【size=n属性】
   代码：<font size=4>居中</font>
   样式：居中
2. 颜色【color=“颜色”】
   使用颜色值：
   代码：<font color=green>绿色</font>
   样式：绿色文本
   使用十六进制颜色：
   代码：<font color=#00ff00>绿色</font>
   样式：绿色文本
3. 字体【face=“字体名”】
   代码：<font face="宋体">绿色</font>
   样式：黑体文本
   👉注：color属性支持的颜色值有十六进制和常用颜色值【red、green、yellow等】。

引入响应式图片

  下面的图片属性为：width:88%，height:auto,居中显示，并提供居中图片说明。

<p align="center">
 	<img  width="88%"  src="https://i-blog.csdnimg.cn/blog_migrate/4fa75633edcb6976fed4e5af40cf7d53.png"  alt="自定义CSDN博客三级域名图" title="自定义CSDN博客三级域名图" />
    <p align="center"><font color="red"><b>CSDN博客提供的Mrkd语法说明在这哦<b></font></p>
</p>

CSDN博客提供的Mrkd语法说明在这哦

假动画【使用gif图片格式】

  可录制一些gif来通过图片插入方式，实现一些动画效果。推荐一款gif动图制作软件【ScreenToGif】，可在微软应用商店获取。

带背景和宽边框的表格

   经测试，table标签中的border属性是生效的，table标签的tr标签td标签的bgcolor属性是生效的。

<table>
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>性别</th>
	</th>
	<tr>
		<td>2018</td>
		<td>张三</td>
		<td>男</td>
	</th>
</table>

学号	姓名	性别
2018	张三	男

带背景的文本

  可利用table标签下的tr标签下的td标签的bgcolor属性是生效的来实现带背景的文本。
代码:<table><tr><td bgcolor=blue><font color=red>绿色背景文字</font></td></tr></table>
样式:

绿色背景文字

使用emoji

  使用emoji表情来为文章增加一些好看的元素。以下是一些查找表情 的网站。

• emoji列表
• 十六进制表情 Emoji的Unicode
• emoji&十六进制
• 最好用的emoji表情网站
  查找到我们想要的表情后，有三种使用方式：

1. 直接复制
2. 十六进制引用： 😁 😁
3. 字符串引用：:100:💯 :smile:😄

使用输入法提供的特殊符号

  调出输入法自带的符号大全，即可添加一些特殊的符号结合font标签自定义字体、颜色、和大小，也可让文章可读性更高。如：

• ☑ <font size="5">☑</font>
• ★ : <font size="5">★</font>
• ♣ : <font size="5">♣</font>
• ♥ : <font size="5">♥</font>
• ✔ : <font size="5">✔</font>
• 更多符号看这里

---

  暂时就这些了，CSDN的元素样式我也就了解了这些，如果想自己的博客文章拥有更多的元素样式，建议可以尝试博客园，自定义功能是真的强。

助力小赵

  制作不易、欢迎转发、卑微求赞