利用markdown语法和html语法特性来美化文章

前言

之前一直把文章当做记录工具，虽然存了分享的念头，但是总归做的是比较粗糙，偶然间发现用html的语法可以在做文章的时候起到很不错的美化作用，所以专门花时间去稍微的美化一下文章，首先为了突出本篇文章的重点，就是利用html语法来美化文章，所以本篇文章在结构上依然按照老式的文章结构布局，在内容上去介绍如何利用html和markdown语法去美化你的文章

---

标题

首先我想要做一个好看一点的标题，需求如下

• 文字居中加粗放大
• 标题设置颜色
• 下划线托底
• 尺寸最大

需求就是这么些，我们先看看完成后的效果吧

我是一个大标题

---

我们看看具体是那些html语句实现了这么个效果吧

<div>
   <center>
        <b>
            <font color="34,63,93" size="7">
                我是一个大标题
            </font>
        </b>
    </center>
</div>

---

• 要点1： center居中标签
• 要点2： b加粗标签
• 要点3： ---分割线，也可以使用html的hr

---

美化前言

惯用的前言可能比较的单调这里我准备用一些底色和边框进行美化一下，需求如下：

• 前言标题加底色加粗边框
• 前言内容加底色

我们先看实现效果吧！！！！！！！

前言

我是一段前言 我是二段前言，我是二段前言 我是三段前言，我是三段前言，我是三段前言

---

我们看看具体是那些html语句实现了这么个效果吧

 <table  border="2" >
	 <tr>
	      <td bgcolor=#F0F0F0>
	          <center>
	              <b>
	                  <font color=#E0545D size="6">
	                      前言
	                  </font> 
	              </b>
	          </center>
	      </td>
	  </tr>
</table>

<table>
	<tr>
	     <td bgcolor=#F0F0F0>
	         <center>
	             <font color=#E0545D size="3">
	                 我是一段前言
	                 <br>
	                 我是二段前言，我是二段前言
	                 <br>
	                 我是三段前言，我是三段前言，我是三段前言
	             </font> 
	         </center>
	     </td>
	 </tr>
</table>

• 要点1： table、tr、td表格标签
• 要点2： border表格边框加粗
• 要点3： br换行标签

---

美化标题

标题是很重要的一部分，区分段落和内容，这里希望从一级标题到四级标题能够非常容易区分，需求如下：

• 一级到四级标题，颜色不同
• 一级到四级标题，有明显的图案区分

很简单的需求，我们先看看效果

---

♠ 一级标题

♥ 二级标题

♣ 三级标题

♦ 四级标题

---

看着还行，博主随便挑了几个颜色，四个标题用黑红梅方来做团标记，不满意的自己去修改吧，我们看看代码吧

# <u><font color="#FF1493" face="微软雅黑" >♠ 一级标题</font></u>
## <u><font color="#F7B578" face="微软雅黑" >♥ 二级标题</font></u>
### <u><font color="#38B4B8" face="微软雅黑" >♣ 三级标题</font></u>
#### <u><font color="#4B97AE" face="微软雅黑" >♦ 四级标题</font></u>

• 要点1： u下划线标签
• 要点2： color颜色标签
• 要点3： face字体标签

---

美化文字

在各个位置和段落都可能存在需要我们补充文字注解的地方，博主之前一直习惯性的用>段落引用来标注文字，确实好用，就是有时候不太好看，这里尝试看能不能让文字更好看，博主定义了几种需要文字的情况，如下所示

• 标题释言
• 内容释言
• 段落内强调
• 举例列表

---

标题释言

博主一般习惯在标题下留一句话来对标题和当前段落内容做一个简单的解释，正如当前这一句话

一般的的段落引用看着有点丑，但也可以用，如下所示：

我是一个段落引用

• 代码

> 我是一个段落引用

博主一般习惯标题释言用个加重符号，简简单单，只需要在文字前后加两个下斜杠就可以了，一般不换颜色：

__简简单单__

---

内容释言

一般在代码后或者图片示例后，会来上一段解释，这里可以用段落引用也可以用文字加重，博主现在习惯在内容释言上用文字加重再来个斜体，如下所示：

---

这个代码写的真流脾这个代码写的真流脾这个代码你tm可真是个小可爱写的真流脾这个代码写的真流脾这个代码写的真流脾这个代码写的真流脾这个代码写的真流脾这个代码写的真流脾这个代码写的真流脾

---

只需要在文字前后个加上三个*符号，如下所示：

*** 我是加粗+斜体 ***

---

段落内强调

有时候我们需要突出一段话中的某个单词或者某个词语，这个时候我们需要在段落内对需要提示的模块进行区别化处理，博主常用的方式有如下两种：

• 变色

这是一句测试段落，我想突出哈哈哈哈哈 阿斯顿撒多撒多撒阿里嘎多口气七娃

`哈哈哈哈哈`

只需要在文字前后加上`就可以了，这个符号在键盘左上角Tap键上的那个

• 加框

这是一句加框框的测试段落，哈哈哈实打实考虑好打算老客户阿回来看到！！！

<kbd>加框框</kbd>

如上所示在文字前后加上kbd标签就可以了

---

举例列表

经常性的我们需要列举出我们的观点，一个好看的格式是必不可少的，博主常用的有以下几种：

简单无序列表

• 举例1
• 举例2
• 举例3
  • 举例3.1

- 举例1
- 举例2
- 举例3
	- 举例3.1

这种最简单而且最常用，只需要在文字前加上-，横杠和空格，那么一个简单的无序列表就出来了，tap缩进还可以增加子集

---

简单无序列表2

• 举例1
• 举例2
• 举例3
  • 举例3.1

<ul>
   <li>举例1</li>
    <li>举例2</li>
    <li>
        举例3
        <ul>
            <li>举例3.1</li>
        </ul>
    </li>
</ul>

利用html语法实现的简单无序列表，效果和上边是一样的，可以应对一些更加复杂的情况

---

简单有序列表

1. 举例1
2. 举例2
3. 举例3
   1. 举例3.1

<ol>
     <li>举例1</li>
      <li>举例2</li>
      <li>
          举例3
          <ol>
              <li>举例3.1</li>
          </ol>
      </li>
</ol>

利用html语法实现的简单有序列表

---

推送

• Github

https://github.com/KingSun5

---

结语

暂时先写这么多吧，后边想到或用到什么在一点点补充吧，若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。
本文属于原创文章，转载请著名作者出处并置顶！！