程振兴 @czxa.top
截止今天，我已经在本博客上写了604.4k个字了！
Markdown的语法非常简单，但是自然也功能有限，不过可以通过Html语法进行扩展。这篇文章会收集一些非常棒的HTML语法来扩展Markdown。有些在网页上是不支持的，但是在MPE上都是支持的。
:laughing:隐藏内容
点击左边👈的三角形就可以看到隐藏内容
- 隐藏内容
上面的隐藏效果实现代码为：1
2
3
4
5
6<details>
<summary><strong>点击左边👈的三角形就可以看到隐藏内容</strong></summary>
- 隐藏内容
</details>
:running:上下标
下标：H2O2
上标：30th
上面的效果实现代码为：1
2下标：H<sub>2</sub>O<sub>2</sub>
上标：30<sup>th</sup>
:notes:脚注
Content [^1]
[^1]: Hi! This is a footnote
上面的效果实现代码为：1
2Content [^1]
[^1]: Hi! This is a footnote
:blue_book:缩略
[HTML]: Hyper Text Markup Language
[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
上面的效果实现代码是：
1 | *[HTML]: Hyper Text Markup Language |
:bookmark_tabs:标记
==marked==
上面的效果实现代码是：
1 | ==marked== |
:eyes:emoji表情
例如：
| emoji | emoji | emoji |
|---|---|---|
| :smile: | :car: | :heartbeat: |
| :yum: | :phone: | :email: |
| :calling: | :calendar: | :newspaper: |
| :office: | :rocket: | :cn: |
| :secret: | :chart_with_downwards_trend: | :star: |
| :blue_book: | :chart_with_upwards_trend: | :fire: |
| :100: | :basketball: | :book: |
这个网页提供了一份emoji-cheat-sheet：Emoji cheat sheet
:closed_book:代码行数
上面的效果实现的方法是：
:lipstick:彩色字体
WARNING
WARNING
WARNING
上面的效果实现代码是：
1 | <span style="color:red;">WARNING</span> |
:cherries:文字背景块
Rcall
上面的效果实现代码是：
1 | `Rcall` |
:tangerine:控制图片的大小和位置
上面的效果实现代码是：
1 | <img src="https://czxb.github.io/mr/DSC00905.JPG" align="left" width="50%" height="50%"> |
:stars:ToDo List
- UnDo iterm
- Done iterm
上面的效果实现代码是：
1 | - [ ] UnDo iterm |
:hear_no_evil:删除线
这些内容会被划掉
上面的效果实现代码是：
1 | ~~这些内容会被划掉~~ |
:four_leaf_clover:HTML中的特殊符号
| 符号 | 说明 | 对应编码(使用时去掉空格) | 英文读法 |
|---|---|---|---|
| & | AND 符号 | & amp; | ampersand |
| < | 小于 | & lt; | little |
| ·> | 大于 | & gt; | great |
|
不断行的空白格 | & nbsp; | number space |
|
半方大的空白 | & ensp; | |
|
全方大的空白 | & emsp; | |
| ¿ | 倒问号 | & iquest; | inverted question |
| ? | 问号 | & quest; | question |
| « | 左书名号 | & laquo; | left angle quote |
| » | 右书名号 | & raquo; | right angle quote |
| “ | 引号 | & quot; | quote |
| ‘ | 左单引号 | & lsquo; | left single quote |
| ’ | 右单引号 | & rsquo: | right single quote |
| “ | 左双引号 | & ldquo: | left double quote |
| ” | 右双引号 | & rdquo: | right double quote |
| ¶ | 段落符号 | & para; | paragraph |
| § | 章节符 | & sect; | section |
| × | 乘号 | & times; | times |
| ÷ | 除号 | & divide; | divide |
| ± | 加减号 | & plusmn; | plus minus |
| ƒ | function | & fnof; | |
| √ | 根号 | & radic; | radic |
| ∞ | 无穷大 | & infin; | infinite |
| ° | 度 | & deg; | degree |
| ≠ | 不等号 | & ne; | ne |
| ≡ | 恒等于 | & equiv; | equivalent |
| ≤ | 小于等于 | & le; | less than or equal to |
| ≥ | 大于等于 | & ge; | great than or equal to |
| ⊥ | 垂直符号 | & perp; | perpendicular |
| ← | 左箭头 | & larr; | left arrow |
| → | 右箭头 | & rarr; | right arrow |
| ↑ | 上箭头 | & uarr; | up arrow |
| ↓ | 下箭头 | & darr; | down arrow |
| ↔ | 水平箭头 | & harr; | horizontal arrow |
| ↕ | 竖直箭头 | & varr; | vertical arrow |
| ⇐ | 双线左箭头 | & lArr; | left arrow |
| ⇒ | 双线右箭头 | & rArr; | right arrow |
| ⇑ | 双线上箭头 | & uArr; | up arrow |
| ⇓ | 双线上箭头 | & dArr; | down arrow |
| ⇔ | 双线水平双箭头 | & hArr; | horizontal arrow |
| ⇕ | 双线竖直箭头 | & vArr; | vertical arrow |
| ♠ | 黑桃 | & spades; spades | |
| ♥ | 红桃 | & hearts; | hearts |
| ♣ | 梅花 | & clubs; | club |
| ♦ | 方块 | & diams; | diamonds |
| © | 版权 | & copy; | copy right |
| ® | 注册商标 | & reg; | registration |
| ™ | 商标 | & trade; | trade |
| ¥ | 人民币 | & yen; | |
| € | 欧元 | & euro; | euro |
| ¢ | 美分 | & cent; | cent |
| £ | 英磅 | & pound; | pound |
| ⊕ | & oplus; | ||
| ½ | 二分之一 | & frac12; | fraction |
| ¼ | 四分之一 | & frac14; | fraction |
| ‰ | 千分符号 | & permil; | per mille |
| ∴ | 所以 | & there4; | there fore |
| π | 圆周率 | & pi; | |
| ¹ | 商标1 | & sup1; | super 1 |
| α | alpha | & alpha; | alpha |
| β | beta | & beta; | beta |
| γ | gamma | & gamma; | gamma |
| δ | delta | & delta; | delta |
| θ | theta | & theta; | theta |
| λ | lambda | & lambda; | lambda |
| σ | sigma | & sigma; | sigma |
| τ | tau | & tau; | tau |
:cactus:改变字号
这是正常字号；
这是加大字号；
这是缩小字号。
上面的效果实现代码是：
1 | 这是正常字号； |
:last_quarter_moon_with_face:下划线
这句话下面会有下划线！
上面的效果实现代码是：
1 | <u>这句话下面会有下划线！</u> |
:partly_sunny:换行符
这里会
断行！
上面的效果实现代码是：
1 | 这里会<br>断行！ |
:gift_heart:引用
《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成
上面的效果实现代码是：
1 | <cite>《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成</cite> |
- 短引用：
毛泽东说过：帝国主义都是纸老虎 …
上面的效果实现代码是：
1 | <q>毛泽东说过：帝国主义都是纸老虎 ...</q> |
- 块引用：
这是块引用。
上面的效果实现代码是：
1 | <blockquote> |
:balloon:设置字号、字体、颜色
红色3号字！蓝色2号字！
绿色3号宋体字！
上面的效果实现代码是：
1 | <font size="3" color="red">红色3号字！</font> |
:watch:表格及背景色
| 1 | 2 | 3 |
| 1 | 2 | 3 |
上面的效果实现代码是：
1 | <table> |
:bathtub:下拉列表框
上面的效果实现代码是：
1 | <select> |
:door:按钮
按钮的样式可以通过修改css改变。
上面的效果实现代码是：
1 | <button type="button">Click Me!</button> |
🔥删除与新增
1 | - 减号后是原来的字符。 |
代码：1
2
3
4\`\`\`diff
- 减号后是原来的字符。
+ 加号后是改后的字符。
\`\`\`
文内锚点
使用 bookmark 标记
设置方法：
建立一个跳转的链接，标记方式为 说明文字：
说明文字（你点击一下看效果？）
标记要跳转到什么位置即可，标记方式为 跳转到这
目标点代码：
<span id = "jump">跳转到这</span>
借助 HTML 标记
HTML 中的 标签最重要的属性是 href ，它指示的链接目标，既可以是外部站点，也可以是页内锚点。页内锚点可以实现类似书签跳转的功能，最典型的就是点击 TOC 中的目录书签跳转到指定章节阅读。
构建页内锚点的语法，类似参考式链接：
- 先定义锚点id：bookmark_text（
<a href="#auchor_id">bookmark_text</a>） - 再定义一个id为auchor_id的对象（这里以
<p>为例）：auchor_text
（<p id="auchor_id">auchor_text</p>）
例如，在文末定义了id为end的 EOF（End Of File）：The end！
，然后通过Goto the End!指定书签“Goto the End!”跳转到文末“The End!”处。
