当前位置：首页 > news >正文

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

news 2026/3/26 22:57:37

以下是几种不同风格和类型的警告文本块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: #d1ecf1; border-left: 4px solid #17a2b8; 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><h4 style="margin: 0 0 8px 0; color: #856404;">警告标题</h4><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>

!重要警告

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

使用示例

在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内容...