本文介绍了如何在 Markdown 中嵌入 HTML 代码，从而实现丰富的页面展示效果。下面的示例涵盖了表格、视频、定义列表、图片、表单、超链接、标题、文字格式、排版控制、引用、代码块等内容，同时也展示了 Markdown 与 HTML 混排时的细节处理。此教程融合了一些不错的教程和个人想法。
参考来源
1. 表格
详情
代码：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>性别</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1 1</td>
</tr>
</tbody>
</table>
显示效果：
| 姓名 | 年龄 | 住址 | 性别 | 描述 |
|---|---|---|---|---|
| 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | |
| 1 | 1 | 1 | 1 1 |
2. 视频和音频
详情
代码：
<video width="320" height="240" controls>
<source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4" />
您的浏览器不支持Video标签。
</video>
显示效果：
代码：
<audio controls>
<source src="https://photo.459122.xyz/iu/2025/02/04/343dd14e1daec1270164be58d54a0bdf.mp3" type="audio/mpeg">
您的浏览器不支持audio标签.
</audio>
显示效果：
3. 定义列表
详情
代码：
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
显示效果：
- Definition list
- Is something people use sometimes.
- Markdown in HTML
- Does *not* work **very** well. Use HTML tags.
4. 图片
详情
本节展示了两种插入图片的方法：使用 Markdown 语法和使用 HTML 标签。
Markdown 插入图片：
显示效果：
HTML 插入图片（居中示例）：
<div style="text-align:center">
<img src="upload://bqz8VlaL1WKPn4yQyzhaDu6y46l.png" align="middle" alt="程序猿-弦苦">
</div>
显示效果：
5. 表单
详情
代码：
<form action="/register">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
显示效果：
用户名:邮箱:
密码:
6. 嵌入 YouTube 视频
详情
代码：
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
显示效果：
7. 按钮
详情
代码：
<button type="button" onclick="alert('Hello World!')">点击这里</button>
显示效果：
点击这里
8. HTML 注释
详情
说明：
HTML 注释以 <!-- 开始，以 --> 结束，注释内容不会在浏览器中显示。
代码：
<!--这是一段注释。注释不会在浏览器中显示。-->
显示效果：
（注释内容不会在页面中显示）
9. Markdown 空格
详情
说明：
在 Markdown 中空格常用于排版控制，若需在特定位置插入空白，可直接使用 HTML 实体。
代码：
<!-- en space, U+2002 ISOpub -->
半方大的空白  或 
<!-- em space, U+2003 ISOpub -->
全方大的空白   或 
<!-- no-break space, U+00A0 ISOnum -->
不断行的空白格 或 
显示效果：
半方大的空白 或
全方大的空白 或
不断行的空白格 或
10. HTML 超链接
详情
本节展示了如何使用 <a> 标签创建超链接，以及 Markdown 中的超链接写法。
代码：
<!-- 定义一个页内锚点（通常放在文档结尾处） -->
<a name="end"></a>
<!-- 页内锚点链接 -->
<a href="#end">点我跳到本文结尾</a>
<!-- 外部超链接 -->
<a href="http://www.w3school.com.cn/tags/index.asp">W3School HTML 参考手册</a>
<!-- Markdown 的超链接写法 -->
[HTML5 教程](http://www.jb51.net/w3school/html5/)
[HTML 教程][1]
[HTML 教程- (HTML5 标准)][2]
[1]: http://www.dreamdu.com/xhtml/
[2]: http://www.runoob.com/html/html-tutorial.html
<!-- 自动超链接 -->
<http://blog.csdn.net/phunxm>
<[email protected]>
显示效果：
- “点我跳到本文结尾” 的链接（点击后跳转到文末锚点）
- “W3School HTML 参考手册” 链接
- Markdown 格式生成的超链接（取决于解析器）
- 自动生成的链接：http://blog.csdn.net/phunxm 与 [email protected]
11. HTML 标题
详情
说明：
HTML 用 <h1> 至 <h6> 定义标题；Markdown 则使用 # 进行标记。此外，可以使用下划线或等号来创建一级或二级标题。
代码：
<hr>
<h1 align="center">title</h1>
<h2>1</h2>
<h3>1.1</h3>
<h4>1.1.1</h4>
<h5>（1）</h5>
<h5>（2）</h5>
<h6>*</h6>
<h4>1.1.2</h4>
<h5>（1）</h5>
<h5>（2）</h5>
<h6>*</h6>
<h2>2</h2>
<h3>2.1</h3>
<h4>2.1.1</h4>
<h5>（1）</h5>
<h6>*</h6>
<hr>
显示效果：
title
1
1.1
1.1.1
（1）
（2）
*
1.1.2
（1）
（2）
*
2
2.1
2.1.1
（1）
*
12. HTML 文字格式
12.1 强调文本与斜体
详情
代码（HTML）：
<em>This text is emphasized</em>
<i>This text is italic</i>
显示效果：
This text is emphasized
This text is italic
Markdown 写法：
*This text is italic*
12.2 重要文本与粗体
详情
代码（HTML）：
<strong>This text is strong</strong>
<b>This text is bold</b>
显示效果：
This text is strong
This text is bold
Markdown 写法：
**This text is bold**
粗斜体示例：
<b><i>This text is italic bold</i></b>
Markdown 写法：
***This text is italic bold***
12.3 突出显示文本
详情
代码：
<mark>This text is mark</mark>
显示效果：
This text is mark
13. 改变字号
13.1 加大字号
详情
代码：
This text is normal.
<big>This text is big.</big>
This text is normal.
显示效果：
This text is normal.
This text is big.
This text is normal.
13.2 减小字号
详情
代码：
This text is normal.
<small>This text is small.</small>
This text is normal.
显示效果：
This text is normal.
This text is small.
This text is normal.
14. 脚标
14.1 上脚标
详情
代码：
2<sup>0</sup>=1;
2<sup>1</sup>=2;
2<sup>2</sup>=4;
...
显示效果：
20=1;
21=2;
22=4;
…
14.2 下脚标
详情
代码：
N = m<sub>1</sub> x m<sub>2</sub> x m<sub>3</sub> x ... x m<sub>n</sub>
显示效果：
N = m1 x m2 x m3 x … x mn
15. 下划线与删除线
15.1 下划线
详情
代码：
<u>This text is underline.</u>
显示效果：
This text is underline.
15.2 删除线
详情
代码：
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
显示效果：
一打有 二十 十二 件。
16. HTML 排版控制
16.1 水平线
详情
HTML 写法：
<hr>
HTML: 这段文字上下各有一条水平线（<hr>）分割。
<hr>
显示效果：
HTML: 这段文字上下各有一条水平线（
）分割。
Markdown 写法：
***
markdown: 这段文字上下各有一条水平线分割（上行***/下行___）。
___
显示效果：
markdown: 这段文字上下各有一条水平线分割（上行***/下行___）。
16.2 换行
详情
代码：
<hr>
<p>
这是第一行.<br />这是第二行.<br />这是第三行.<br />
</p>
<hr>
显示效果：
这是第一行.
这是第二行.
这是第三行.
16.3 段落
详情
代码：
<hr>
<p>我胯下的白马疾如闪电，那是远古的旷野。</p>
<p>我从你的眼前掠过，甚至你看不清我的容颜。<br />只有我背上银色的剑鞘，在阳光下瞬间闪耀的光芒。</p>
<p>我一定要在黄昏之前到达，我要看看你，我的爱人。<br />在夕阳里娇艳的容颜，和风铃响起时迎风曼舞的衣裙。</p>
<hr>
显示效果：
我胯下的白马疾如闪电，那是远古的旷野。
我从你的眼前掠过，甚至你看不清我的容颜。
只有我背上银色的剑鞘，在阳光下瞬间闪耀的光芒。
我一定要在黄昏之前到达，我要看看你，我的爱人。
在夕阳里娇艳的容颜，和风铃响起时迎风曼舞的衣裙。
16.4 分区/节
详情
代码：
<hr>
<div style="color:#FF0000">
<h3>3.5.1 红色的标题</h3>
</div>
<div style="color:#0000FF">
<p>蓝色的文字</p>
</div>
<hr>
显示效果：
3.5.1 红色的标题
蓝色的文字
16.5 对齐
详情
代码：
<hr>
<div align="left">这段文字居左显示。</div>
<div style="text-align:center">这段文字居中显示。</div>
<div align="right">这段文字居右显示。</div>
<hr>
显示效果：
17. HTML 引用
17.1 作品标题
详情
代码：
<p>
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>
显示效果：
《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成。
17.2 短引用
详情
代码：
毛泽东说过：
<q>帝国主义都是纸老虎 ... </q>
显示效果：
毛泽东说过：
帝国主义都是纸老虎 …
附带 cite 属性示例：
***
Here is a quote from WWF's website:
<q cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</q>
We hope that they succeed.
***
显示效果：
Here is a quote from WWF’s website:
WWF's ultimate goal is to build a future where people live in harmony with nature.We hope that they succeed.
17.3 块引用
详情
代码：
<blockquote>
爱上一个人
恋上一座城
</blockquote>
显示效果：
爱上一个人 恋上一座城
Markdown 块引用示例：
> //
> // main.m
> // HelloWorld
> //
> // Created by faner on 15/8/30.
> // Copyright © 2015年 faner. All rights reserved.
> //
>
> #import <Foundation/Foundation.h>
>
> int main(int argc, const char * argv[]) {
> @autoreleasepool {
> // insert code here...
> NSLog(@"Hello, World!");
> }
> return 0;
> }
显示效果：
//
// main.m
// HelloWorld
//
// Created by faner on 15/8/30.
// Copyright © 2015年 faner. All rights reserved.
//#import <Foundation/Foundation.h>
int main(int argc, const char * argv) {
@autoreleasepool {
// insert code here…
NSLog(@“Hello, World!”);
}
return 0;
}
嵌套引用示例：
> 梦
>> 梦中梦
>>> 盗梦空间
显示效果：
梦
梦中梦
盗梦空间
18. 代码块
18.1 行内代码：<code>...</code>
详情
代码示例：
<code>心若没有栖息的地方
到哪里都是流浪</code>
显示效果：
心若没有栖息的地方
到哪里都是流浪
另一个代码示例：
<hr>
<code>
//
// main.m
// HelloWorld
//
// Created by faner on 15/8/30.
// Copyright © 2015年 faner. All rights reserved.
//
#import <Foundation/Foundation.h>
int main(int argc, const char * argv[]) {
@autoreleasepool {
// insert code here...
NSLog(@"Hello, World!");
}
return 0;
}
</code>
<hr>
显示效果：
//
// main.m
// HelloWorld
//
// Created by faner on 15/8/30.
// Copyright © 2015年 faner. All rights reserved.
//
#import <Foundation/Foundation.h>
int main(int argc, const char * argv) {
@autoreleasepool {
// insert code here…
NSLog(@“Hello, World!”);
}
return 0;
}
18.2 预格式化代码块：<pre>...</pre>
详情
代码示例：
<pre>
//
// main.m
// EmptyApplication
//
// Created by faner on 15/9/5.
// Copyright © 2015年 faner. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}
</pre>
显示效果：
//
// main.m
// EmptyApplication
//
// Created by faner on 15/9/5.
// Copyright © 2015年 faner. All rights reserved.
//
#import
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}
19. PHILOSOPHY of Markdown 示例
详情
代码：
[PHILOSOPHY of Markdown](http://daringfireball.net/projects/markdown/syntax#philosophy)
===
___
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very <mark>small subset of HTML tags</mark>. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. <u>HTML is a <em><b>publishing</b></em> format; Markdown is a <em><b>writing</b></em> format.</u> Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in <big><i>plain text</i></big>.
For any markup that is not covered by Markdown’s syntax, <u>you simply use HTML itself</u>. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
The only <mark><strong>restrictions</strong></mark> are that <em>block-level</em> HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — <u>must be <em>separated</em> from surrounding content by blank lines</u>, and the start and end tags of the block should not be indented with <b>tabs</b> or <b>spaces</b>. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.
___
显示效果：
PHILOSOPHY of Markdown
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
The only restrictions are that block-level HTML elements — e.g.
,, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted)
tags around HTML block-level tags.
