HTML 语法 #

概述 #

Markdown 支持嵌入 HTML 代码，用于实现 Markdown 不支持的功能。

基本用法 #

行内 HTML #

markdown 
这是一个 <span style="color: red;">红色</span> 的文字。

块级 HTML #

markdown 
<div style="background: #f0f0f0; padding: 16px;">
  这是一个带背景色的区块。
</div>

常用 HTML 标签 #

文本样式 #

markdown 
<u>下划线</u>
<mark>高亮文本</mark>
<small>小号文本</small>
<big>大号文本</big>
<sub>下标</sub>
<sup>上标</sup>

渲染效果：

下划线 高亮文本 小号文本 大号文本 H2O X2

换行和空格 #

markdown 
第一行<br>第二行
空&nbsp;&nbsp;&nbsp;&nbsp;格

图片控制 #

markdown 
<img src="image.png" width="300" height="200">
<img src="image.png" style="width: 50%;">

链接控制 #

markdown 
<a href="https://example.com" target="_blank">新窗口打开</a>
<a href="https://example.com" download>下载链接</a>

表格扩展 #

markdown 
<table>
  <tr>
    <th colspan="2">合并单元格</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

对齐控制 #

markdown 
<p align="center">居中对齐</p>
<p align="right">右对齐</p>
<div align="center">
  <img src="image.png">
</div>

定义列表 #

markdown 
<dl>
  <dt>术语</dt>
  <dd>定义内容</dd>
  <dt>另一个术语</dt>
  <dd>另一个定义</dd>
</dl>

折叠内容 #

markdown 
<details>
  <summary>点击展开</summary>
  隐藏的内容在这里。
</details>

渲染效果：

点击展开 隐藏的内容在这里。

样式控制 #

内联样式 #

markdown 
<span style="color: red; font-weight: bold;">红色粗体</span>
<div style="background: #f5f5f5; padding: 10px; border-radius: 5px;">
  带样式的区块
</div>

CSS 类 #

markdown 
<link rel="stylesheet" href="styles.css">
<p class="highlight">应用样式的段落</p>

实际应用 #

彩色提示框 #

markdown 
<div style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 16px;">
  <strong>提示</strong>：这是一个提示信息。
</div>

<div style="background: #fff3e0; border-left: 4px solid #ff9800; padding: 16px;">
  <strong>注意</strong>：这是一个注意信息。
</div>

<div style="background: #ffebee; border-left: 4px solid #f44336; padding: 16px;">
  <strong>警告</strong>：这是一个警告信息。
</div>

按钮样式 #

markdown 
<a href="#" style="display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px;">按钮</a>

卡片布局 #

markdown 
<div style="display: flex; gap: 16px;">
  <div style="flex: 1; padding: 16px; background: #f5f5f5; border-radius: 8px;">
    <h3>卡片1</h3>
    <p>内容...</p>
  </div>
  <div style="flex: 1; padding: 16px; background: #f5f5f5; border-radius: 8px;">
    <h3>卡片2</h3>
    <p>内容...</p>
  </div>
</div>

键盘按键 #

markdown 
按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制

渲染效果：按 Ctrl + C 复制

注意事项 #

HTML 块级元素 #

块级 HTML 元素前后必须有空行：

markdown 
段落内容

<div>
  块级元素
</div>

更多内容

行内元素 #

行内 HTML 元素可以与其他 Markdown 混用：

markdown 
这是 <span style="color: red;">红色</span> 的 **粗体** 文字。

安全限制 #

部分平台会过滤某些 HTML 标签和属性：

  • <script> 标签通常被禁止
  • onclick 等事件属性通常被禁止
  • <iframe> 可能被禁止

常见问题 #

问题1：HTML 不生效 #

检查：

  • 标签是否正确闭合
  • 平台是否支持该标签
  • 是否有空行分隔

问题2：样式不生效 #

检查：

  • CSS 语法是否正确
  • 平台是否支持内联样式

问题3：与 Markdown 冲突 #

markdown 
在 HTML 中使用 Markdown 可能不生效：

<div>
  **粗体** 不会生效
</div>

最佳实践 #

1. 优先使用 Markdown #

markdown 
好的：
**粗体文字**

不好的：
<b>粗体文字</b>

2. 仅在必要时使用 HTML #

markdown 
Markdown 无法实现的功能才使用 HTML：
- 合并单元格
- 折叠内容
- 复杂样式

3. 保持代码整洁 #

markdown 
好的：
<div class="card">
  内容
</div>

不好的：
<div class="card">内容</div>

下一步 #

继续学习 字符转义！

最后更新：2026-03-24