/zh/tags/%E6%8A%80%E6%9C%AF%E8%B6%8B%E5%8A%BF/Recent content in 技术趋势 on 隽戈的科技生活馆HugozhWed, 27 May 2026 19:09:31 +0800/zh/blog/2026/05/16/html-vs-markdown-ai-agent/Sat, 16 May 2026 00:00:00 +0800/zh/blog/2026/05/16/html-vs-markdown-ai-agent/<style> /* ===== junge-site 通用文章样式 ===== */ .td-content { max-width: 900px; margin: 0 auto; } /* ---- 卡片组件 ---- */ /* 引言卡片：紫蓝渐变 + 白色文字 + 阴影 */ .lead-quote { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2.5rem 2rem; border-radius: 12px; margin: 2rem 0 3rem 0; font-size: 1.25rem; font-weight: 600; line-height: 1.6; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; } .lead-quote::before { content: '"'; position: absolute; top: -20px; left: 10px; font-size: 120px; opacity: 0.1; font-family: Georgia, serif; } /* 信息框：浅色背景 + 左侧蓝色边框 */ .info-box { background: #f8f9fa; padding: 1.5rem; border-left: 4px solid #667eea; border-radius: 8px; margin: 2rem 0; } /* 重点提示框：暖色背景 + 橙色边框 */ .highlight-box { background: linear-gradient(135deg, #fff5f5 0%, #fffaf0 100%); border: 2px solid #ed8936; border-radius: 12px; padding: 1.5rem; margin: 2rem 0; box-shadow: 0 4px 12px rgba(237, 137, 54, 0.1); } /* 数据卡片：深色背景 + 大号数字 */ .stats-box { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: white; padding: 2rem; border-radius: 12px; margin: 2rem 0; text-align: center; } .stats-box .number { font-size: 2.5rem; font-weight: 800; color: #667eea; display: block; } /* ---- 序号列表：带彩色编号圆徽章 ---- */ .numbered-list { list-style: none; padding: 0; margin: 1.5rem 0; } .numbered-list li { padding: 0.75rem 0 0.75rem 2.5rem; position: relative; line-height: 1.6; border-bottom: 1px solid #f0f0f0; } .numbered-list li:last-child { border-bottom: none; } .numbered-list .num { position: absolute; left: 0; top: 0.75rem; width: 28px; height: 28px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; } /* ---- 引用卡片（正文内嵌引用） ---- */ .inline-quote { background: #f0f4ff; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 12px; position: relative; font-style: italic; color: #4a5568; } .inline-quote::before { content: '"'; position: absolute; top: 5px; left: 12px; font-size: 48px; color: #667eea; opacity: 0.2; font-family: Georgia, serif; } .inline-quote .author { display: block; margin-top: 0.5rem; font-style: normal; font-weight: 600; color: #667eea; font-size: 0.9rem; } /* ---- 视觉分隔器 ---- */ .section-divider { display: flex; align-items: center; margin: 3rem 0; gap: 12px; } .section-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #667eea, transparent); } .section-divider .dot { width: 6px; height: 6px; background: #667eea; border-radius: 50%; opacity: 0.5; } /* ---- 结尾典藏框 ---- */ .outro-box { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: white; padding: 2.5rem; border-radius: 16px; margin: 3rem 0; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .outro-box strong { color: #667eea !important; } /* ---- 标题样式 ---- */ .td-content h2 { font-size: 1.8rem; font-weight: 700; color: #1a202c; margin-top: 3.5rem; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 3px solid #667eea; position: relative; } .td-content h2::before { content: ''; position: absolute; left: 0; bottom: -3px; width: 60px; height: 3px; background: linear-gradient(90deg, #667eea, #764ba2); } /* ---- 加粗文字主题色 ---- */ .td-content strong { color: #667eea; font-weight: 600; } /* ---- 段落样式 ---- */ .td-content p { margin-bottom: 1.5rem; } /* ---- 图片样式 ---- */ .td-content img { border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin: 2.5rem 0; width: 100%; transition: transform 0.3s ease; } .td-content img:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } /* ---- 代码块 ---- */ .td-content pre { border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); margin: 2rem 0; } /* ---- 表格 ---- */ .td-content table { border-collapse: collapse; width: 100%; margin: 2rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .td-content table th { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 12px 16px; font-weight: 600; } .td-content table td { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; } .td-content table tr:last-child td { border-bottom: none; } /* ---- 响应式 ---- */ @media (max-width: 768px) { .lead-quote { padding: 1.5rem 1rem; font-size: 1.1rem; } .stats-box .number { font-size: 2rem; } .numbered-list li { padding-left: 2rem; } } </style> <p><strong>过去几年，Markdown 几乎成了 AI Agent 的&quot;标配&quot;。不管是 ChatGPT、Claude、Cursor 还是 Copilot，默认输出格式都是 <code>#</code> 标题、<code>-</code> 列表、<code>`代码`</code>。</strong></p>