Markdown内嵌HTML笔记——字体颜色、大小、背景颜色等

最新推荐文章于 2024-02-23 12:18:02 发布

SUN_QIJIA

最新推荐文章于 2024-02-23 12:18:02 发布

阅读量2.2k

点赞数 2

分类专栏：写博客的小技巧文章标签： markdown html

本文链接：https://blog.csdn.net/m0_49308201/article/details/107283478

版权

写博客的小技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

题记

CSDN-Markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等等）！对，就是内嵌HTML，所以我为了写博客，就稍微学了一下HTML，顺便记下笔记，方便以后查阅。

小提示：可以用目录查找或者 ctrl+f 使用浏览器的查找功能来快速定位你想解锁的CSDN Markdown写博客小技能

0.强烈注意

一般情况下，HTML代码段都要与Markdown用空行隔开，否则容易出错，如果你发现出错了，先考虑一下是不是没有空行隔开

1.内嵌HTML之前Markdown不支持的功能：

注意：下边内容需要用到<font>标签，在 HTML 4.01 中，<font>标签被废弃，而使用CSS取代，HTML5同样不支持，但所有主流浏览器都支持<font>标签。不影响在这里使用，但写 HTML 的时候要规避使用。还要说明的是：我在这里尝试了CSS文本格式，失败了，我猜是markdown不支持HTML5，欢迎大佬指正。所以还是老老实实用<font>标签

①字体（ font 标签，常用）

<font face=" 楷体 ">我不是黑体字</font>

效果：我不是黑体字
注意：手机app可能不支持改字体，关于兼容性的问题我也不清楚，欢迎大佬批评指正，持续更新。还有一点，包括后文，我在“楷体”这两个字旁边都加了空格，这是合法的，目的是复制本文代码修改时，方便使用ctrl+shift+shift+←或者→ 来快速选择并替换

②字体颜色（ font 标签，常用）

<font color= #00ffff >我不是黑色</font>

效果：我不是黑色

附上141种HTML支持的颜色
👉HTML颜色名_菜鸟教程

③字体大小（ font 标签，常用）

<font size= 6 >我比你大</font>

效果：我比你大

④标题（与自带的不同，当使用@[TOC]目录功能，此种标题不会显示在目录）

<h1>这是一个一级标题</h1>

<h6>这是一个六级标题</h6>

效果如下：

这是一个一级标题

这是一个六级标题

注意：本文的题记和小提示用的是此种标题，所以没有显示在自动生成的目录中

⑤字体背景色

<table><tr><td bgcolor=#E6E6FA >这里的背景色是Lavender</td></tr></table>

效果如下：

这里的背景色是Lavender

注意：查到的其他大佬说，目前csdn博客写作中只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能，我不知道，欢迎批评。

⑥首行缩进（常用）

&ensp;

&emsp;

效果如下：
（半角的空格）
（全角的空格）

2.内嵌HTML之前Markdown原本就支持,但可以通过HTML实现的功能：

①加粗文本与斜体文本（不建议用）

<b>加粗文本</b>

效果：加粗文本

<i>斜体文本</i>

效果：斜体文本

②上标与下标（不建议用）

<sup> 上标</sup>

效果：^上标

<sub> 下标</sub>

效果：_下标

③下划线与删除线（不建议用）

<ins>下划线插入字</ins>

效果：下划线插入字

<del>定义删除字</del>

效果：~~定义删除字~~

④着重倾斜、减轻语气、加重语气（不常用，不建议用）

<em>定义着重倾斜文字</em>

效果：定义着重倾斜文字

<small>定义减轻语气小号字</small>

效果：定义减轻语气小号字

<strong>定义加重语气大号字</strong>

效果：定义加重语气大号字

⑤强制换行与强制分段（前者在HTML与Markdown切换时有时要有）

这是一行 <br> 这是另一行

效果如下：
1.这是一行
2.这是另一行

<p>这是一个段落。</p> <p>这是另外一个段落。</p>

效果如下：

这是一个段落。

这是另外一个段落。

⑥插入水平分割线（设置常用语后很好用）

<hr>

效果就是本文一直在用的水平分割线

⑦插入链接（后文会说，有用）

<a href="https://www.baidu.com">这是baidu链接</a>

效果：这是baidu链接

3.强烈推荐常用的嵌套功能

①字体样式（同时修改字体、大小、颜色）

自定义字体样式
注意：color、size、face 三者顺序不影响效果

②链接样式

## 插入链接描述👉[标题作为链接](https://www.baidu.com)

<h2>插入链接描述👉<a href=" https://www.baidu.com ">标题作为链接</a></h2>

<font size=5>插入链接描述👉<a href=" https://www.baidu.com ">更改链接字号</a></font>

<font size=5>插入链接描述👉[更改链接字号](https://www.baidu.com)</font>

效果如下：

第一种就不展示了，否则目录会出现链接

插入链接描述👉标题作为链接

插入链接描述👉更改链接字号

注意：两种标题作为链接的不同，和两种标题不同一样。
另外这种嵌套模式不合法：<h4>插入链接描述👉[标题作为链接](https://www.baidu.com)</h4>
最后一种更改链接字号方式不推荐使用，实测，既要与Markdown文本段用空行隔开，又要与HTML代码段用空行隔开，大概是因为这句是两种语言的嵌套，我不知道是否合法，反正有效果，欢迎大佬批评建议。