Markdown更改字型、顔色、大小，設定文字背景色，調整圖檔大小設定居中，插入表格等方法
Markdown 通過簡單标記文法，使普通文本内容具有一定格式。但它本身不支援修改字型、字号與顔色等功能的。
Markdown 通過簡單标記文法，使普通文本内容具有一定格式。但它本身不支援修改字型、字号與顔色等功能的。
一、更改字型大小、顔色、更改字型
Markdown文法
<font face="逐浪新宋">我是逐浪新宋</font>
<font face="逐浪圓體">我是逐浪圓體</font>
<font face="逐浪花體">我是逐浪花體</font>
<font face="逐浪像素字">我是逐浪像素字</font>
<font face="逐浪立楷">我是逐浪立楷</font>
<font color=red>我是紅色</font>
<font color=#008000>我是綠色</font>
<font color=yellow>我是黃色</font>
<font color=Blue>我是藍色</font>
<font color= #871F78>我是紫色</font>
<font color= #DCDCDC>我是淺灰色</font>
<font size=5>我是尺寸</font>
<font size=10>我是尺寸</font>
<font face="逐浪立楷" color=green size=10>我是逐浪立楷，綠色，尺寸為5</font> 效果如下：
二、更改字型大小、顔色、更改字型
由于 style 标簽和标簽的 style 屬性不被支援，是以這裡隻能是借助 table, tr, td 等表格标簽的 bgcolor 屬性來實作背景色。這裡對于文字背景色的設定，隻是将那一整行看作一個表格，更改了那個格子的背景色（bgcolor）
Markdown文法
<table><tr><td bgcolor=green>背景色yellow</td></tr></table> 效果如下：
三、Markdown建立表格
1、極簡模式
水果名稱| 價格 | 數量
-|-|-
香蕉 | $1 | 5 |
蘋果 | $1 | 6 |
草莓 | $1 | 7 | 效果如下：
2、簡單方法
name | 111 | 222 | 333 | 444
- | :-: | :-: | :-: | -:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000| 效果如下：
3、原生方法
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000| 效果如下：
常用的顔色
顔色名 | 十六進制顔色值 | rgb顔色
-|-|-
黑色（black) | 000000 | rgb(0, 0, 0) |
藍色（blue） | 0000FF | rgb(0, 0, 255) |
灰色（grey） | 808080 | rgb(128, 128, 128) |
綠色（green） | 008000 | rgb(0, 128, 0) |
橙色（orange） | FFA500 | rgb(255, 165, 0) |
紅色(red) | FF0000 | rgb(255, 0, 0) |
黃色（yellow） | FFFF00 | rgb(255, 255, 0) | 效果如下：
三種方法的差別
簡單方法雖然是稍微簡單了些，但是前後因為沒有格式是以第一列和最後一列沒有居中，對于極簡方式來說還相當繁瑣。極簡方式簡單，但是都是左對齊。原生方式格式更美觀。個人意見強迫症患者請用原生方式，其他請随意。
表格文法說明
1）|、-、:之間的多餘空格會被忽略，不影響布局。
2）預設标題欄居中對齊，内容居左對齊。
3）-:表示内容和标題欄居右對齊，:-表示内容和标題欄居左對齊，:-:表示内容和标題欄居中對齊。
4）内容和|之間的多餘空格會被忽略，每行第一個|和最後一個|可以省略，-的數量至少有一個。
四、設定圖檔大小
1、設定設定圖檔百分比
Markdown文法
<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%"> 效果如下：
2、設定圖檔大小
Markdown文法
<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="251" height="350" > 效果如下：
3、設定圖檔居中
Markdown文法
<div align=center><img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%"></div> 效果如下：
PS:位置顯示三個屬性：center,left，right
posted on
2020-05-08 19:08
逐浪CMS阿衡
閱讀(991)
評論(0)
編輯
收藏
舉報