markdown笔记1--设置字体、颜色、图片、背景色
- 1 常见文字特性
- 2 常见字符使用
- 3 图片链接表示方法
- 4 颜色设置
- 5 常见问题
- 说明
1 常见文字特性
设置字体和颜色:
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font>
我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体,绿色,尺寸为5
设置字体背景色
md默认不支持字体背景色,可以通过html的table来实现字体背景色;
<table><tr><td bgcolor=pink>背景色yellow</td></tr></table>
背景色yellow |
2 常见字符使用
- 空格
- 全角状态下,直接按空格就是四个空格;
- 半方大的空白 或 
- 全方大的空白 或 
- 不断行的空白格 或 
- 把输入法切换到全角(一般是shift+空格) 然后再按空格就能够显示了
3 图片链接表示方法
默认格式如下,后面#pic_center 可以确定图片相对位置
![在这里插入图片描述](https://s2.51cto.com/images/blog/202208/29094218_630c197a58c7284294.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=#pic_center )
也可以通过html的 img标签,添加width和height来设置宽高比例和大小
<img src="https://s2.51cto.com/images/blog/202208/29094218_630c197a58c7284294.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" width="50%" height="50%">
<img src="https://s2.51cto.com/images/blog/202208/29094218_630c197a58c7284294.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" width="360" height="360" >
图片左对齐、居中、右对齐(也可以通过上面追加 #pic_left|center|right 的方式设置位置)
<div align=left><img src="https://s2.51cto.com/images/blog/202208/29094218_630c197a714f18709.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk="/></div>
<div align=center><img src="https://s2.51cto.com/images/blog/202208/29094218_630c197a714f18709.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk="/></div>
<div align=right><img src="https://s2.51cto.com/images/blog/202208/29094218_630c197a714f18709.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk="/></div>
图1原始方式:
image标签宽高都等比缩小50%
image标签设置宽高都为360
图片左对齐:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQDOxEzX3xCZlhXam9VbsUmepNXZy9CXwJWZ3xCdh1mcvZ2Lc1zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwIzX39GZhh2csATMflHLwEzX4xSZz91ZsAzMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xiNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL5AzN4EjZ0EzNhdTOxMGMzYzX4EjM0kDM5IzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
图片居中:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQDOxEzX3xCZlhXam9VbsUmepNXZy9CXwJWZ3xCdh1mcvZ2Lc1zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwIzX39GZhh2csATMflHLwEzX4xSZz91ZsAzMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xiNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL5AzN4EjZ0EzNhdTOxMGMzYzX4EjM0kDM5IzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
图片右对其:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQDOxEzX3xCZlhXam9VbsUmepNXZy9CXwJWZ3xCdh1mcvZ2Lc1zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwIzX39GZhh2csATMflHLwEzX4xSZz91ZsAzMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xiNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL5AzN4EjZ0EzNhdTOxMGMzYzX4EjM0kDM5IzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
4 颜色设置
5 常见问题
- to add