markdown字体颜色、大小、样式、背景色

最新推荐文章于 2025-03-24 01:19:50 发布

方宁fangning

最新推荐文章于 2025-03-24 01:19:50 发布

阅读量513

点赞数 1

分类专栏：写博客工具文章标签： markdown

原文链接：https://blog.youkuaiyun.com/wsp_1138886114/article/details/80520171

版权

写博客工具专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在HTML中运用各种标签和属性，包括字体颜色、大小、样式、背景色、标题等级、引用、列表、表格等元素的设置方法，帮助读者掌握富文本编辑的技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章转自：(https://blog.youkuaiyun.com/wsp_1138886114/article/details/80520171)

添加一点就是: 下面的一些效果可以进行嵌套使用、比如既改变字体颜色，又改笔字体大小、背景

嵌套的时候<br />是添加换行，任意位置单独可用。

1. 蓝色、Size为6

2. 蓝色、Size为5、背景为淡蓝绿色

一、字体颜色的选择

浅红色文字：<font color="#dd0000">浅红色文字：</font><br /> 
深红色文字：<font color="#660000">深红色文字</font><br /> 
浅绿色文字：<font color="#00dd00">浅绿色文字</font><br /> 
深绿色文字：<font color="#006600">深绿色文字</font><br /> 
浅蓝色文字：<font color="#0000dd">浅蓝色文字</font><br /> 
深蓝色文字：<font color="#000066">深蓝色文字</font><br /> 
浅黄色文字：<font color="#dddd00">浅黄色文字</font><br /> 
深黄色文字：<font color="#666600">深黄色文字</font><br /> 
浅青色文字：<font color="#00dddd">浅青色文字</font><br /> 
深青色文字：<font color="#006666">深青色文字</font><br /> 
浅紫色文字：<font color="#dd00dd">浅紫色文字</font><br /> 
深紫色文字：<font color="#660066">深紫色文字</font><br /

  
  1
2
3
4
5
6
7
8
9
10
11
12
13

浅红色文字：浅红色文字
深红色文字：深红色文字
浅绿色文字：浅绿色文字
深绿色文字：深绿色文字
浅蓝色文字：浅蓝色文字
深蓝色文字：深蓝色文字
浅黄色文字：浅黄色文字
深黄色文字：深黄色文字
浅青色文字：浅青色文字
深青色文字：深青色文字
浅紫色文字：浅紫色文字

深紫色文字：深紫色文字

更多颜色的选择如

http://www.114la.com/other/rgb.htm

二、字体大小

size为1：<font size="1">size为1</font><br /> 
size为2：<font size="2">size为2</font><br /> 
size为3：<font size="3">size为3</font><br /> 
size为4：<font size="4">size为4</font><br /> 
size为10：<font size="10">size为10</font><br /> 
  
  1
2
3
4
5

效果如下：

size为1：size为1
size为2：size为2
size为3：size为3
size为4：size为4

size为10：size为10

三、字体样式

<font face="黑体">我是黑体字</font>
<font face="宋体">我是宋体字</font>
<font face="微软雅黑">我是微软雅黑字</font>
<font face="fantasy">我是fantasy字</font>
<font face="Helvetica">我是Helvetica字</font>

  
  1
2
3
4
5
6

效果如下：

我是黑体字

我是宋体字
我是微软雅黑字
我是楷体字
I am Times New Roman font
我是fantasy字
我是Helvetica字

四、背景色

<table><tr><td bgcolor=#FF83FA>背景色的设置是按照十六进制颜色值：#FF83FA</td></tr></table>
<table><tr><td bgcolor=#D1EEEE>背景色的设置是按照十六进制颜色值：#D1EEEE</td></tr></table>
<table><tr><td bgcolor=#C0FF3E>背景色的设置是按照十六进制颜色值：#C0FF3E</td></tr></table>
  
  1
2
3

背景色的设置是按照十六进制颜色值：#FF83FA

背景色的设置是按照十六进制颜色值：#D1EEEE

背景色的设置是按照十六进制颜色值：#C0FF3E

五、标题的设置

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
  
  1
2
3
4
5
6

效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

六、细节设置

6.1引用

>引用
 >>引用中的引用
  
  1
2

6.2列表

* 无序列表
* 无序列表
* 无序列表
  
  1
2
3

无序列表
无序列表
无序列表

6.3嵌套

- 嵌套列表1
 + 嵌套列表2
 + 嵌套列表3
  - 嵌套列表4
   * 嵌套列表5
- 嵌套列表6
  
  1
2
3
4
5
6

嵌套列表1
- 嵌套列表2
- 嵌套列表3
- 嵌套列表4
- 嵌套列表5
嵌套列表6

6.4表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
  
  1
2
3
4
5