Markdown中可用的HTML警告文本块代码

以下是几种不同风格和类型的警告文本块HTML代码，都可以在Markdown中直接使用：

1. 基础警告框（黄底黑字）

<div style="background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; padding: 12px 16px; border-radius: 4px; margin: 16px 0;">
  <strong>⚠️ 警告：</strong>这是一条重要的警告信息，请注意相关内容。
</div>

⚠️ 警告：这是一条重要的警告信息，请注意相关内容。

2. 信息框（蓝底）

<div style="background: #cff4fc; border-left: 4px solid #0dcaf0; color: #0c5460; padding: 12px 16px; border-radius: 4px; margin: 16px 0;">
  <strong>ℹ️ 信息：</strong>这是一条信息提示，用于说明相关内容。
</div>

ℹ️ 信息：这是一条信息提示，用于说明相关内容。

3. 成功框（绿底）

<div style="background: #d4edda; border-left: 4px solid #28a745; color: #155724; padding: 12px 16px; border-radius: 4px; margin: 16px 0;">
  <strong>✅ 成功：</strong>操作已成功完成！
</div>

✅ 成功：操作已成功完成！

4. 错误/危险框（红底）

<div style="background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; padding: 12px 16px; border-radius: 4px; margin: 16px 0;">
  <strong>❌ 错误：</strong>发生了一个错误，请检查后重试。
</div>

❌ 错误：发生了一个错误，请检查后重试。

5. 自定义图标警告框

<div style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 16px; margin: 20px 0; display: flex; align-items: flex-start;">
  <div style="font-size: 24px; margin-right: 12px;">⚠️</div>
  <div>
    <b style="margin: 0 0 8px 0; color: #856404;">警告标题</b>
    <p style="margin: 0; color: #856404;">这是详细的警告内容，可以包含多行文本。<br>第二行警告信息。</p>
  </div>
</div>

⚠️

警告标题

这是详细的警告内容，可以包含多行文本。
第二行警告信息。

6. 可折叠警告框

<details style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin: 16px 0;">
  <summary style="font-weight: bold; cursor: pointer; color: #856404;">⚠️ 点击展开详细警告</summary>
  <div style="padding-top: 12px; border-top: 1px solid #dee2e6; margin-top: 12px; color: #495057;">
    <p>这里是详细的警告内容。</p>
    <ul style="margin: 8px 0;">
      <li>注意事项一</li>
      <li>注意事项二</li>
      <li>注意事项三</li>
    </ul>
  </div>
</details>

⚠️ 点击展开详细警告

这里是详细的警告内容。

• 注意事项一
• 注意事项二
• 注意事项三

7. 带阴影的高亮警告框

<div style="background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border: 1px solid #ffc107; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <div style="display: flex; align-items: center; margin-bottom: 8px;">
    <span style="background: #ffc107; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold;">!</span>
    <strong style="font-size: 1.1em; color: #856404;">重要警告</strong>
  </div>
  <p style="margin: 0; color: #856404;">这个警告框更加突出，适合特别重要的警告信息。</p>
</div>

! 重要警告

这个警告框更加突出，适合特别重要的警告信息。

8. 成功提示框

<div style="background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%); border: 1px solid #198754; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <div style="display: flex; align-items: center; margin-bottom: 8px;">
    <span style="background: #198754; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold;">✓</span>
    <strong style="font-size: 1.1em; color: #0f5132;">操作成功</strong>
  </div>
  <p style="margin: 0; color: #0f5132;">您的设置已成功保存，系统将在3秒后自动刷新。</p>
</div>

✓ 操作成功

您的设置已成功保存，系统将在3秒后自动刷新。

9. 错误/危险提示框

<div style="background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); border: 1px solid #dc3545; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <div style="display: flex; align-items: center; margin-bottom: 8px;">
    <span style="background: #dc3545; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold;">×</span>
    <strong style="font-size: 1.1em; color: #842029;">发生错误</strong>
  </div>
  <p style="margin: 0; color: #842029;">无法连接到服务器，请检查您的网络连接或稍后再试。</p>
</div>

× 发生错误

无法连接到服务器，请检查您的网络连接或稍后再试。

10. 信息/说明提示框

<div style="background: linear-gradient(135deg, #cff4fc 0%, #9eeaf9 100%); border: 1px solid #0dcaf0; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <div style="display: flex; align-items: center; margin-bottom: 8px;">
    <span style="background: #0dcaf0; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold; font-family: serif;">i</span>
    <strong style="font-size: 1.1em; color: #055160;">版本说明</strong>
  </div>
  <p style="margin: 0; color: #055160;">新版本增加了暗黑模式支持，您可以在设置页面手动开启。</p>
</div>

i 版本说明

新版本增加了暗黑模式支持，您可以在设置页面手动开启。

11. 技巧/灵感提示框

<div style="background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); border: 1px solid #9c27b0; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <div style="display: flex; align-items: center; margin-bottom: 8px;">
    <span style="background: #9c27b0; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-weight: bold;">✦</span>
    <strong style="font-size: 1.1em; color: #4a148c;">小贴士</strong>
  </div>
  <p style="margin: 0; color: #4a148c;">按住 Shift 键并点击鼠标左键，可以快速选中多行内容。</p>
</div>

✦ 小贴士

按住 Shift 键并点击鼠标左键，可以快速选中多行内容。

使用示例

在Markdown文件中直接插入以上任何一段代码即可：

# 我的文档标题

这里是正常的Markdown内容。

<div style="background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; padding: 12px 16px; border-radius: 4px; margin: 16px 0;">
  <strong>⚠️ 注意：</strong>此功能目前处于测试阶段，可能会遇到问题。
</div>

继续正常的Markdown内容...

自定义提示

你可以通过修改以下属性来自定义警告框：

• background：背景颜色
• color：文字颜色
• border-left：左侧边框样式
• padding：内边距
• border-radius：边框圆角
• margin：外边距
• emoji：开头的图标符号

这些代码在GitHub、GitLab、VS Code等大多数支持Markdown的平台中都可以正常工作。