Loading

Markdown 内嵌 HTML 语法

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,具体请参考 Markdown 语法说明 。在Markdown中可以内嵌HTML语法,本文总结了一些常用的HTML标记用于扩展Markdown语法。

1. 缩进与换行

  • 在 Markdown 中,可以用两个空格 + 回车来进行换行,另外<br />也可以表示换行(注意:换行是指段落内的强迫换行,不同于分段,段落的前后要有一个以上的空行);
  • 在 Markdown 中,可以用 HTML 中的特殊字符(见下文&ensp;&emsp;来实现缩进的效果,其中&ensp;表示半角空格,&emsp;表示全角空格。

输入如下所示:

&ensp;&ensp;&ensp;&ensp;半角空格用`&ensp;`表示;<br />&emsp;&emsp;全角空格用`&emsp;`表示。

实现的效果如下所示:

  半角空格用&ensp;表示;
  全角空格用&emsp;表示。

2. 字体、字号、颜色、背景

<font face="黑体">实现字体为黑体</font>
<small>比默认字体小一号</small>
这里显示的是浏览器默认字体大小
<font size=4>实现字体大小改变</font>
<big>比默认字体大一号</big>
<font color=red>实现字体颜色为红色</font>
<span style="background-color: orange">实现背景填充为橙色</span>
<font color=#FF69B4>字体颜色值也可以用十六进制表示</font>
<span style="background-color: #D3D3D3">背景颜色值也可以用十六进制表示</span>
<font face="黑体" size=4 color=red>实现字体效果:黑体、4号、红色</font>
<span style="background-color: #D3D3D3"><font size=4 color=#DC143C>默认字体,4号,使用十六进制表示颜色值</font></span>

实现字体为黑体
比默认字体小一号
这里显示的是浏览器默认字体大小
实现字体大小改变
比默认字体大一号
实现字体颜色为红色
实现背景填充为橙色
字体颜色值也可以用十六进制表示
背景颜色值也可以用十六进制表示
实现字体效果:黑体、4号、红色
默认字体,4号,使用十六进制表示颜色值


注意:其中,字号size的值可取 1 ~ 7,浏览器的默认值为 3。

3. 实现上标、下标

Markdown 支持上标和下标:上标使用^xxx^表示,下标使用~xxx~表示,如X~1~^2^则显示为 X12 。另外,也可以用 HTML 中的<sup>xxx</sup>实现上标、<sub>xxx</sub>实现下标。

H<sub>2</sub>O、注册商标<sup>&reg;</sup>、(x<sub>1</sub>+x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup>+x<sub>2</sub><sup>2</sup>+2x<sub>1</sub>x<sub>2</sub>

实现的效果如下所示:

H2O、注册商标®、(x1+x2)2 = x12+x22+2x1x2

4. 实现下划线、上划线

可以使用<u>标签为文本添加下划线。

如果文本不是超链接,就不要<u>对其使用下划线</u>。

显示效果如下:

如果文本不是超链接,就不要对其使用下划线

可以使用<span style="text-decoration: overline;"></span>为文本添加上划线。

<span style="text-decoration: overline;">RESET</span>是复位信号,输入低电平有效。

显示效果如下:

RESET是复位信号,输入低电平有效。

5. 关于图片处理的技巧

Markdown 格式生成的图片默认居左对齐,大小受图片实际大小限制
![](https://bitnotes.oss-cn-shanghai.aliyuncs.com/assets/20200715225103.png)
可以用 HTML 中 <img> 标签的 "width" 及 "height" 属性来固定图片的大小
<img width=256 height=256 src="https://bitnotes.oss-cn-shanghai.aliyuncs.com/assets/20200715225103.png" />
可以用 <div> 标签结合 "align" 属性来控制图片居中对齐
<div align="center"><img src="https://bitnotes.oss-cn-shanghai.aliyuncs.com/assets/20200715225103.png" /></div>

若要在图片下方加标注,可以用如下方式实现:
<center>
<img width=256 height=256 src="https://bitnotes.oss-cn-shanghai.aliyuncs.com/assets/20200715225103.png" />
图 1 数字图像处理的标准图
</center>

图 1 数字图像处理的标准图

6. 特殊字符

一些常用的特殊符号,比如 § 、→ 、© 、π 等等,均可借助 HTML 语言很容易地实现,具体可参考 w3school 有关HTML 符号HTML 实体等相关的页面,下表摘录了部分常用字符作为示例:

字符 实体 描述
  &nbsp; non-breaking space
© &copy; copyright sign
¥ &yen; yen sign = yuan sign
¦ &brvbar; broken vertical bar
§ &sect; section sign
&para; paragraph sign
&crarr; carriage return
&hellip; horizontal ellipsis
« &laquo; left double angle quotation
» &raquo; right double angle quotation
&trade; trade mark sign
® &reg; registered trade mark sign
° &deg; degree sign
¼ &frac14; fraction one quarter
½ &frac12; fraction one half
¾ &frac34; fraction three quarters
&permil; millesimal sign
± &plusmn; plus-minus sign
× &times; multiplication sign
÷ &divide; division sign
&oplus; circled plus
&otimes; circled times
&asymp; almost equal to
&ne; not equal to
&le; less-than or equal to
&ge; greater-than or equal to
&equiv; identical to
&prop; proportional to
&infin; infinity
ƒ &fnof; function
Δ &Delta; greek capital letter delta
α &alpha; greek smal letter alpha
β &beta; greek smal letter beta
γ &gamma; greek smal letter gamma
θ &theta; greek smal letter theta
λ &lambda; greek smal letter lambda
μ &mu; greek smal letter mu
π &pi; greek smal letter pi
ω &omega; greek smal letter omega
&larr; leftwards arrow
&uarr; upwards arrow
&rarr; rightwards arrow
&darr; downwards arrow
&harr; left right arrow
&varr; up down arrow
&lArr; leftwards double arrow
&uArr; upwards double arrow
&rArr; rightwards double arrow
&dArr; downwards double arrow
&hArr; left right double arrow
&vArr; up down double arrow
posted @ 2017-10-21 23:48  bitlogic  阅读(3771)  评论(1编辑  收藏  举报