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的平台中都可以正常工作。
提取后的CSS样式
我将这些警告文本块的样式提取为可复用的CSS类，并提供了多种使用方式：
1. 提取的CSS样式
/* 基础样式 - 可放在文档开头或单独的CSS文件中 */
.alert-box {
padding: 12px 16px;
border-radius: 4px;
margin: 16px 0;
border-left: 4px solid transparent;
}
.alert-box.warning {
background: #fff3cd;
border-left-color: #ffc107;
color: #856404;
}
.alert-box.info {
background: #cff4fc;
border-left-color: #0dcaf0;
color: #0c5460;
}
.alert-box.success {
background: #d4edda;
border-left-color: #28a745;
color: #155724;
}
.alert-box.danger {
background: #f8d7da;
border-left-color: #dc3545;
color: #721c24;
}
/* 高级样式 - 带渐变和阴影 */
.alert-box.advanced {
border-radius: 8px;
padding: 16px;
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border: 1px solid transparent;
}
.alert-box.advanced.warning {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border-color: #ffc107;
color: #856404;
}
.alert-box.advanced.info {
background: linear-gradient(135deg, #cff4fc 0%, #9eeaf9 100%);
border-color: #0dcaf0;
color: #055160;
}
.alert-box.advanced.success {
background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
border-color: #198754;
color: #0f5132;
}
.alert-box.advanced.danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border-color: #dc3545;
color: #842029;
}
.alert-box.advanced.tip {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
border-color: #9c27b0;
color: #4a148c;
}
.alert-box.advanced .alert-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.alert-box.advanced .alert-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-weight: bold;
}
.alert-box.advanced.warning .alert-icon {
background: #ffc107;
color: #fff;
}
.alert-box.advanced.info .alert-icon {
background: #0dcaf0;
color: #fff;
}
.alert-box.advanced.success .alert-icon {
background: #198754;
color: #fff;
}
.alert-box.advanced.danger .alert-icon {
background: #dc3545;
color: #fff;
}
.alert-box.advanced.tip .alert-icon {
background: #9c27b0;
color: #fff;
}
.alert-box.advanced .alert-title {
font-size: 1.1em;
font-weight: bold;
}
/* 自定义图标样式 */
.alert-box.custom-icon {
border: 1px solid #ffc107;
border-radius: 6px;
padding: 16px;
margin: 20px 0;
display: flex;
align-items: flex-start;
background: #fff3cd;
color: #856404;
}
.alert-box.custom-icon .alert-icon {
font-size: 24px;
margin-right: 12px;
}
/* 可折叠样式 */
.alert-collapsible {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 12px;
margin: 16px 0;
color: #495057;
}
.alert-collapsible summary {
font-weight: bold;
cursor: pointer;
color: #856404;
}
.alert-collapsible .alert-content {
padding-top: 12px;
border-top: 1px solid #dee2e6;
margin-top: 12px;
}
2. 使用类的HTML示例
基础警告框
<div class="alert-box warning">
<strong>⚠️ 警告：</strong>这是一条重要的警告信息，请注意相关内容。
</div>
信息框
<div class="alert-box info">
<strong>ℹ️ 信息：</strong>这是一条信息提示，用于说明相关内容。
</div>
成功框
<div class="alert-box success">
<strong>✅ 成功：</strong>操作已成功完成！
</div>
高级警告框
<div class="alert-box advanced warning">
<div class="alert-header">
<span class="alert-icon">!</span>
<strong class="alert-title">重要警告</strong>
</div>
<p>这个警告框更加突出，适合特别重要的警告信息。</p>
</div>
高级成功提示框
<div class="alert-box advanced success">
<div class="alert-header">
<span class="alert-icon">✓</span>
<strong class="alert-title">操作成功</strong>
</div>
<p>您的设置已成功保存，系统将在3秒后自动刷新。</p>
</div>
高级技巧提示框
<div class="alert-box advanced tip">
<div class="alert-header">
<span class="alert-icon">✦</span>
<strong class="alert-title">小贴士</strong>
</div>
<p>按住 Shift 键并点击鼠标左键，可以快速选中多行内容。</p>
</div>
可折叠警告框
<details class="alert-collapsible">
<summary>⚠️ 点击展开详细警告</summary>
<div class="alert-content">
<p>这里是详细的警告内容。</p>
<ul>
<li>注意事项一</li>
<li>注意事项二</li>
<li>注意事项三</li>
</ul>
</div>
</details>
3. 在Markdown中使用的完整示例
# 我的文档
<style>
/* 将上面的CSS样式复制到这里 */
</style>
## 第一部分
<div class="alert-box warning">
<strong>⚠️ 警告：</strong>这是一条重要的警告信息，请注意相关内容。
</div>
## 第二部分
<div class="alert-box advanced tip">
<div class="alert-header">
<span class="alert-icon">✦</span>
<strong class="alert-title">小贴士</strong>
</div>
<p>按住 Shift 键并点击鼠标左键，可以快速选中多行内容。</p>
</div>
4. 快捷使用模板
如果你需要在多个Markdown文件中使用，可以创建一个单独的CSS文件，然后在每个Markdown文件中引用：
/* alerts.css - 保存为单独的文件 */
/* 复制上面的所有CSS样式到这里 */
然后在Markdown中引用：
<link rel="stylesheet" href="alerts.css">
<div class="alert-box advanced info">
<!-- 内容 -->
</div>
5. 优点总结
- 代码复用：定义一次，随处使用
- 易于维护：修改样式只需修改CSS类
- 一致性：确保所有警告框风格统一
- 可定制：可以轻松添加新的样式变体
- 简洁：HTML代码更加简洁易读
- 语义化：通过类名明确表达意图
这样，你就可以在Markdown文档中轻松创建美观、一致的警告文本块了！
浙公网安备 33010602011771号