markdown+html写作教程

1
<p style="text-indent:2em; line-height:1.8; color:#f98f8f; font-size:16px; letter-spacing:0.5px; margin-bottom:16px;">
2
在博客写作中，使用标准缩进段落可以让文章阅读质感大幅提升，告别原生 Markdown 靠左顶格的粗糙感。本段样式适配手机、电脑双端，行高舒适、字体柔和，适合作为所有正文通用模板。
3
</p>

1
<p style="line-height:1.8; margin-bottom:16px;">
2
普通正文内容，用于铺垫讲解。<span style="color:#2563eb; font-weight:600;">蓝色重点：核心概念</span>，<span style="color:#d93025; font-weight:600;">红色重点：易错禁忌</span>，<span style="color:#059669; font-weight:600;">绿色重点：正确方法</span>，<span style="color:#f59e0b; font-weight:600;">橙色重点：注意事项</span>。
3
</p>

1
<p style="margin-bottom:16px;">
2
<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:#eff6ff;color:#2563eb;margin-right:6px;">知识点</span>
3
<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:#f0fdf4;color:#059669;margin-right:6px;">已掌握</span>
4
<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:#fef2f2;color:#d93025;margin-right:6px;">重难点</span>
5
<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:#fffbeb;color:#f59e0b;">待复习</span>
6
</p>

1
<p style="font-size:26px; font-weight:bold; text-align:center; background:linear-gradient(90deg,#2563eb,#8b5cf6); -webkit-background-clip:text; color:transparent; margin:20px 0;">
2
✨ 博客渐变主标题｜高级质感拉满
3
</p>

1
<p style="font-size:20px; font-weight:bold; color:#333; text-shadow:1px 2px 3px rgba(0,0,0,0.15); text-align:center; margin-bottom:16px;">
2
立体阴影标题｜更有层次感
3
</p>

1
<p style="font-size:19px; font-weight:600; text-align:center; color:#222; margin:24px 0 12px; padding-bottom:8px; border-bottom:2px solid #eef2f7;">
2
一、这里是文章小节标题
3
</p>

1
<p style="text-align:center; line-height:1.8; color:#555; font-size:15px; margin:20px 0;">
2
本段落适用于文章开头引言、结尾感悟、随笔小结，居中排版更加文艺、规整、有氛围感。
3
</p>

1
<div style="padding:10px 14px; background:#fdfdfd; border-radius:6px; margin:14px 0;">
2
<p style="margin:0; color:#444; line-height:1.7; font-style:italic;">
3
极简文艺引用，无粗边框、无高饱和底色，适合散文、随笔、观点类博客，质感干净高级。
4
</p>
5
</div>

1
<div style="border-left:4px solid #2563eb;background:#eff6ff;padding:14px 16px;border-radius:0 10px 10px 0;margin:16px 0;">
2
<p style="margin:0;line-height:1.7;color:#1e40af;"><strong>💡 知识点提示</strong><br/>这里放置博客核心干货、原理讲解、补充说明，样式干净高级，比原生引用块颜值高很多。</p>
3
</div>

1
<div style="border-left:4px solid #059669;background:#f0fdf4;padding:14px 16px;border-radius:0 10px 10px 0;margin:16px 0;">
2
<p style="margin:0;line-height:1.7;color:#065f46;"><strong>✅ 总结结论</strong><br/>用于放置文章结论、复盘总结、正确方法、最终方案，阅读体验清爽舒适。</p>
3
</div>

1
<div style="border-left:4px solid #f59e0b;background:#fffbeb;padding:14px 16px;border-radius:0 10px 10px 0;margin:16px 0;">
2
<p style="margin:0;line-height:1.7;color:#92400e;"><strong>⚠️ 注意事项</strong><br/>记录易错点、使用前提、操作注意、前置条件，提醒读者规避常规问题。</p>
3
</div>

1
<div style="border-left:4px solid #d93025;background:#fef2f2;padding:14px 16px;border-radius:0 10px 10px 0;margin:16px 0;">
2
<p style="margin:0;line-height:1.7;color:#991b1b;"><strong>❌ 风险警告</strong><br/>重点禁忌、错误示范、严重误区、不推荐操作，醒目提醒，避免踩坑。</p>
3
</div>

1
<p style="background:#f8fafc; padding:12px 16px; border-radius:8px; line-height:1.8; color:#333; margin-bottom:16px;">
2
本段为重点兜底内容，适合放置定义、核心总结、金句、干货浓缩。底色柔和不抢视线，比彩色卡片更低调高级，适合正文大面积使用。
3
</p>

1
<div style="padding:12px 16px; background:#f8fafc; border-radius:8px; border-left:6px solid #6366f1; margin:16px 0;">
2
<p style="margin:0; color:#333; line-height:1.7;"><strong>核心金句：</strong>这里放置整篇博客最核心的观点、总结、金句，侧边粗边高亮，视觉聚焦、阅读重点一眼锁定。</p>
3
</div>

1
<div style="display:flex; align-items:flex-start; gap:12px; background:#eff6ff; padding:16px 20px; border-radius:10px; margin:16px 0;">
2
  <span style="font-size:24px; line-height:1;">💡</span>
3
  <p style="margin:0; color:#1e40af; line-height:1.7; font-size:15px;"><strong>核心观点：</strong>好的博客排版不是为了炫技，而是为了降低读者的认知负荷。用 HTML 弥补 Markdown 的不足，才是正确的写作姿势。</p>
4
</div>

1
<div style="padding:20px; background:#ffffff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.08); margin:18px 0;">
2
<p style="font-size:17px; font-weight:bold; color:#333; margin:0 0 10px 0;">📖 立体悬浮内容卡片</p>
3
<p style="margin:0; line-height:1.7; color:#555;">自带柔和阴影、立体浮空质感，是现代博客最主流的卡片样式，干净高级、不刺眼、适配所有文章模块。</p>
4
</div>

1
<hr style="height:1px;border:none;background:linear-gradient(to right,transparent,#cbd5e1,transparent);margin:26px 0;">

1
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0;">
2
<div style="background:#f8fafc;padding:16px;border-radius:10px;">
3
<p style="font-weight:bold;color:#2563eb;margin:0 0 8px 0;">✅ 优点优势</p>
4
<p style="margin:0;line-height:1.7;color:#333;">结构清晰、排版高级、对比直观，适合博客优缺点、方案对比、知识点对照展示。</p>
5
</div>
6
<div style="background:#f8fafc;padding:16px;border-radius:10px;">
7
<p style="font-weight:bold;color:#d93025;margin:0 0 8px 0;">❌ 缺点局限</p>
8
<p style="margin:0;line-height:1.7;color:#333;">纯原生 Markdown 无法实现分栏，必须使用合规 HTML 布局，适配所有主流博客平台。</p>
9
</div>
10
</div>

1
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px; margin:20px 0;">
2
<div style="background:#eff6ff; padding:15px; border-radius:10px; text-align:center;">
3
<p style="font-weight:bold; color:#2563eb; margin:0 0 6px 0;">步骤 1</p>
4
<p style="margin:0; font-size:14px; color:#333;">前期准备工作</p>
5
</div>
6
<div style="background:#f0fdf4; padding:15px; border-radius:10px; text-align:center;">
7
<p style="font-weight:bold; color:#059669; margin:0 0 6px 0;">步骤 2</p>
8
<p style="margin:0; font-size:14px; color:#333;">正式操作执行</p>
9
</div>
10
<div style="background:#fffbeb; padding:15px; border-radius:10px; text-align:center;">
11
<p style="font-weight:bold; color:#f59e0b; margin:0 0 6px 0;">步骤 3</p>
12
<p style="margin:0; font-size:14px; color:#333;">结果验收复盘</p>
13
</div>
14
</div>

1
<p align="center">
2
<img src="https://t.alcy.cc/fj" style="border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.1); max-width:100%;" alt="配图示例">
3
<small style="color:#666;">图：博客配图说明文字（自行替换图片链接）</small>
4
</p>

1
<p style="font-size:13px; color:#888; line-height:1.6; margin-top:8px;">
2
* 备注：此处为补充说明、版本注释、来源标注、免责说明，字体更小、颜色更淡，不抢正文视觉重心，博客排版极致规范。
3
</p>

1
<details style="background:#f8fafc;padding:14px;border-radius:10px;margin:16px 0;">
2
<summary style="cursor:pointer;font-weight:600;color:#2563eb;">📌 点击展开：查看详细拓展内容</summary>
3
<p style="margin-top:12px;line-height:1.7;color:#475569;">这里可以放长内容、详细原理、多余科普、附录、参数明细、延伸阅读。默认折叠，页面干净整洁，读者想看再点开，极大提升博客阅读体验。</p>
4
</details>

1
<div style="margin:20px 0; text-align:center;">
2
<a href="#" style="display:inline-block; padding:12px 30px; background:linear-gradient(90deg, #2563eb, #8b5cf6); color:#fff; text-decoration:none; border-radius:30px; font-weight:bold; box-shadow:0 4px 15px rgba(37, 99, 235, 0.3); transition:all 0.3s;">🚀 获取完整源码</a>
3
</div>

1
<p style="margin-bottom:16px;">
2
这是一个 <a href="#" style="color:#2563eb; text-decoration:none; border-bottom:1px solid #2563eb; transition:0.3s;">带有下划线的高亮链接</a>，鼠标悬停时会有更好的视觉反馈。
3
</p>

1
<div style="margin:16px 0; text-align:center;">
2
<a href="#" style="display:inline-block; padding:10px 24px; border:2px solid #059669; color:#059669; text-decoration:none; border-radius:8px; font-weight:bold; transition:0.3s;">📥 下载附件</a>
3
</div>

1
<div style="background:#fff; padding:16px; border-radius:10px; border:1px solid #e2e8f0; margin:16px 0;">
2
<p style="margin:0 0 8px; color:#334155;"><input type="checkbox" checked style="margin-right:8px; accent-color:#059669;"> 已完成：博客基础架构搭建</p>
3
<p style="margin:0 0 8px; color:#334155;"><input type="checkbox" style="margin-right:8px; accent-color:#059669;"> 待处理：配置 SEO 标签</p>
4
<p style="margin:0; color:#334155;"><input type="checkbox" style="margin-right:8px; accent-color:#059669;"> 待处理：编写第一篇教程</p>
5
</div>

1
<div style="background:#1e293b; color:#94a3b8; padding:12px 16px; border-radius:8px; font-family:monospace; margin:16px 0;">
2
🔒 敏感密钥：<span style="background:#334155; padding:2px 6px; border-radius:4px; user-select:none;">***************</span>
3
<br/>🔒 接口地址：<span style="background:#334155; padding:2px 6px; border-radius:4px; user-select:none;">***************</span>
4
</div>
5

6
<div style="background:#1e293b; color:#94a3b8; padding:12px 16px; border-radius:8px; font-family:monospace; margin:16px 0;">
7
🔒 敏感信息：[已隐藏] 请使用安全方式获取密钥。
8
</div>

1
<p>日常写作中，行内代码用于标记关键词、属性、命令，例如 <code style="background:#f4f5f7;padding:2px 6px;border-radius:4px;color:#d93025;font-weight:500;font-family:monospace;">background:#2563eb</code>、<code style="background:#f4f5f7;padding:2px 6px;border-radius:4px;color:#d93025;font-weight:500;font-family:monospace;">border-radius:8px</code>，样式简约精致，不突兀、适配所有正文场景。</p>

1
<div style="border-radius:8px; overflow:hidden; border:1px solid #e5e7eb; margin:16px 0;">
2
<pre style="background:#1f2937; color:#f3f4f6; padding:16px; margin:0; font-size:14px; line-height:1.8;"><code>1  // 初始化博客样式
3
2  import style from "blog-css"
4
3  // 开启高级排版模式
5
4  style.openHighLevelMode()
6
5  // 双端自适应适配
7
6  style.setMobilePcAdapt()</code></pre>
8
</div>

1
<div style="border-radius:8px; overflow:hidden; margin:16px 0;">
2
<pre style="background:#0f172a; padding:16px; margin:0;"><code style="color:#94a3b8;">/* 这是注释说明：适配所有博客平台、Obsidian、公众号 */</code><code style="color:#cbd5e1;">
3
const blogConfig = {
4
  theme: "light",    // 浅色主题
5
  layout: "high-level", // 高级排版布局
6
  adapt: true        // 开启双端适配
7
}
8
</code></pre>
9
</div>

1
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:16px; margin:16px 0;">
2
<p style="margin:0 0 8px 0; font-weight:bold; color:#222;">📋 组件配置参数</p>
3
<p style="margin:0; line-height:1.7; color:#444;"><strong>适配平台：</strong>Obsidian / 个人博客 / 公众号 / 静态网站<br/><strong>样式类型：</strong>纯行内HTML，无依赖、无JS<br/><strong>兼容特性：</strong>手机/电脑双端自适应</p>
4
</div>

1
<div style="background:#fef2f2; border-left:4px solid #d93025; border-radius:0 8px 8px 0; padding:16px; margin:16px 0;">
2
<p style="margin:0 0 10px 0; font-weight:bold; color:#991b1b;">❌ 代码报错提示</p>
3
<pre style="margin:0; background:#fff; border-radius:4px; padding:10px;"><code style="color:#d93025;">Error: 样式参数缺失
4
Cause: 未配置行高与字体参数</code></pre>
5
</div>