HTML邮件开发实战指南：兼容主流邮箱客户端的响应式代码规范-html教程-PHP中文网

HTML邮件开发实战指南：兼容主流邮箱客户端的响应式代码规范

本文系统讲解html邮件开发中必须遵循的兼容性原则，涵盖元素限制、css支持范围、表格布局技巧及调试方法，帮助开发者构建在gmail、outlook（web/桌面/移动端）、apple mail等平台均能稳定渲染的邮件模板。

本文系统讲解html邮件开发中必须遵循的兼容性原则，涵盖元素限制、css支持范围、表格布局技巧及调试方法，帮助开发者构建在gmail、outlook（web/桌面/移动端）、apple mail等平台均能稳定渲染的邮件模板。

在电子邮件开发中，“写一次、处处运行”是一个理想但难以实现的目标。与现代网页不同，各大邮件客户端（如 Gmail、Outlook for Windows/macOS/iOS/Android、Apple Mail、Yahoo Mail）对 HTML 和 CSS 的支持差异极大——它们大多基于陈旧的渲染引擎（例如 Outlook 桌面版使用 Microsoft Word 渲染器），不支持

、
、Flexbox、CSS Grid、媒体查询（部分支持有限）、:hover 伪类，甚至对 font-family 回退链和单位（如 rem、vh）也存在严重限制。

因此，专业邮件开发的核心原则是：向后兼容、渐进降级、以表格为骨架、内联样式为准则、语义精简、测试驱动。

DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

✅ 必须遵守的 HTML/CSS 实践规范

仅使用安全的 HTML 元素：优先采用
、、
、、、、
、、；避免 、
、
、
（Outlook 会自动包裹或破坏其结构）、

（多数客户端忽略或错误解析）。

强制内联样式（Inline Styles）：所有样式必须写在 style 属性中，禁止

立即学习“前端免费学习笔记（深入）”；

字体与排版保守策略：

字体栈应以 Web 安全字体收尾：font-family: 'Open Sans', Arial, sans-serif;

使用 px 单位控制字号与行高（13px、16px、24px），禁用 em/rem；

行高建议设为无单位数值（如 line-height: 1.4;）或 px，避免 normal 不一致；

文本对齐统一用 text-align: left/center/right;，慎用 justify。

图片与链接处理：

所有必须包含 alt 属性，并设置 width/height（防止重绘错位）；

添加 border="0" 和 style="display: block;" 防止默认基线间隙；

外链图片需确保 HTTPS 可访问，且尺寸预知（避免客户端缩放失真）。

? 正确的表格布局示例（替代原
结构）
以下为适配 Outlook、Gmail 等多端的重构模板片段，已移除语义冗余、修复嵌套逻辑、强化内联样式：
 <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto; background-color: #ffffff;"> <tr> <td align="left" style="padding: 12px 9px 1px; margin-bottom: 10px;">  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 24px; color: #000000;"> Hello, </td> </tr> </table>  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; line-height: 18px; color: #787878; padding-top: 8px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br> cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem.<br> Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio,<br> vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/" style="color: #f26503; text-decoration: underline;">here</a>.<br><br> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </td> </tr> </table>  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td align="left" style="padding: 10px 0;"> <img src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD illustration" style="max-width:90%" style="max-width:90%" border="0" style="display: block; width: 100%; max-width: 275px; height: auto;"> </td> </tr> </table>  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td align="center" style="padding: 16px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 24px; line-height: 36px; color: #f26503;"> <u>here, lorem</u> </td> </tr> </table> </td> </tr> </table>
? 提示：role="presentation" 明确告知屏幕阅读器该表格仅用于布局，提升可访问性；width="100%" + max-width 组合兼顾响应式与客户端兼容性。

⚠️ 关键注意事项与避坑清单

Outlook 特别限制：

不支持 margin（仅部分支持 margin-top/margin-bottom，但不可靠），改用
的 padding 控制间距；
float、position、z-index 全部无效，图片对齐必须通过 align 属性或嵌套表格实现；

background-color 在
上可靠，但在上某些 Outlook 版本可能失效，建议双层保障（
+
同设背景）。

Gmail 与 Apple Mail 注意项：

Gmail Web 会剥离中所有样式，且对 @media 查询支持极弱（仅部分 Android Gmail 支持）；

Apple Mail 对 font-weight: bold 解析不稳定，建议用 标签替代。

调试与验证工具推荐（非第三方推荐，属行业标准实践）：

使用 Email on Acid 或 Litmus 进行跨客户端截图比对（提供真实渲染快照）；

本地快速验证：将 HTML 保存为 .htm 文件，用 Outlook Desktop 打开；用 Safari/Chrome 手动检查 Gmail Web 渲染；

始终启用“纯文本备选”（或 multipart/alternative MIME），保障内容可达性。</plaintext> </li> </ul> </li> <h3>✅ 总结</h3> <p>邮件开发不是前端开发的子集，而是一门独立的兼容性工程。成功的邮件模板 = <strong>语义精简的 HTML 表格骨架 × 严格内联的 CSS × 针对性客户端测试 × 持续更新的支持矩阵参考</strong>。建议将 <a href="https://www.php.cn/link/69c4bb19e942fea086d5fd85078695a0" rel="nofollow" target="_blank">Campaign Monitor CSS Support Guide</a> 和 <a href="https://www.php.cn/link/f752167fca2ecaf38964ffaff639b8d8" rel="nofollow" target="_blank">Elastic Email CSS Reference</a> 作为常备文档，它们以实测数据标注各客户端对每个 CSS 属性的支持状态（✅ / ❌ / ⚠️），是规避“看似正常、实则崩溃”的黄金依据。</p> <p>坚持“最小可行样式 + 最大兼容结构”，你就能交付真正可靠的邮件体验。</p> </td> </table> </table> </td> </li> </td> </li></ul> </li></ul> </div> </h3> </div></header></article></section></em></strong></a> </th> </tr> </table> </li></ul> </div></strong></p> </div> <div class="artmoreart "> <div class="artdp artptit"><span></span> <p>相关文章</p> </div> <div class="artmores flexColumn"> <a class="artmrlis flexRow" href="/faq/3393662.html" title="SVG线性渐变填充进度条的平滑过渡实现教程"><b></b> <p class="overflowclass">SVG线性渐变填充进度条的平滑过渡实现教程</p> </a> <a class="artmrlis flexRow" href="/faq/3393661.html" title="SVG线性渐变填充的平滑过渡实现指南"><b></b> <p class="overflowclass">SVG线性渐变填充的平滑过渡实现指南</p> </a> <a class="artmrlis flexRow" href="/faq/3393656.html" title="如何阻止 HTML 表单默认提交并正确操作 DOM 元素"><b></b> <p class="overflowclass">如何阻止 HTML 表单默认提交并正确操作 DOM 元素</p> </a> <a class="artmrlis flexRow" href="/faq/3393653.html" title="如何阻止 HTML 表单默认提交导致页面刷新"><b></b> <p class="overflowclass">如何阻止 HTML 表单默认提交导致页面刷新</p> </a> <a class="artmrlis flexRow" href="/faq/3393647.html" title="如何让输入值与删除按钮并排显示在同一行"><b></b> <p class="overflowclass">如何让输入值与删除按钮并排显示在同一行</p> </a> </div> <div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)"><img src="https://img.php.cn/upload/Recdownload/000/000/085/66723a3016a41308.jpg" alt="HTML速学教程(入门课程)" ></a> <div class="aritcle_card_info flexColumn"> <a href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)">HTML速学教程(入门课程)</a> <p>HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！</p> </div> <a href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div class="artmoretabs flexRow"> <p>相关标签:</p> <div class="mtbs flexRow"> <a class="mtbsa flexRow" title="html" onclick="hits_log(2,'www',this);" href="/zt/15763.html" target="_blank">html</a> <a class="mtbsa flexRow" title="代码规范" onclick="hits_log(2,'www',this);" href="/zt/22852.html" target="_blank">代码规范</a> </div> </div> <p class="statement">本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</p> <div class="lastanext flexRow"> <a class="lastart flexRow" href="/faq/2132429.html" title="HTML邮件开发实战指南：兼容主流邮箱客户端的编码规范"><span>上一篇：</span>HTML邮件开发实战指南：兼容主流邮箱客户端的编码规范</a> <a class="nextart flexRow" href="/faq/2132443.html" title="如何在 iPhone 上高效编辑并运行本地 HTML/JS 测试页面"><span>下一篇：</span>如何在 iPhone 上高效编辑并运行本地 HTML/JS 测试页面</a> </div> </div> <div class="artlef-down "> <div class="authormore "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>作者最新文章</p> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/3389259.html" title="如何防止 HTML Canvas 中新增弹跳球时旧球位置重置"><b></b> <p class="overflowclass">如何防止 HTML Canvas 中新增弹跳球时旧球位置重置</p> </a> <div class="authtime flexRow"><b></b> <p>2026-11-07 10:32</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/3389272.html" title="HTML音频播放列表中索引2的歌曲被跳过的原因与修复方案"><b></b> <p class="overflowclass">HTML音频播放列表中索引2的歌曲被跳过的原因与修复方案</p> </a> <div class="authtime flexRow"><b></b> <p>2026-11-07 10:34</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/3389275.html" title="如何在 Dash 中正确使用 dbc.Row 和 dbc.Col 实现网格布局"><b></b> <p class="overflowclass">如何在 Dash 中正确使用 dbc.Row 和 dbc.Col 实现网格布局</p> </a> <div class="authtime flexRow"><b></b> <p>2026-11-07 10:34</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/3389329.html" title="获取 Go 语言中 Windows 临时目录的跨平台等效方法"><b></b> <p class="overflowclass">获取 Go 语言中 Windows 临时目录的跨平台等效方法</p> </a> <div class="authtime flexRow"><b></b> <p>2026-11-07 10:42</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/3389333.html" title="FastAPI 跨域配置完全指南：从 CORS 错误到生产就绪的解决方案"><b></b> <p class="overflowclass">FastAPI 跨域配置完全指南：从 CORS 错误到生产就绪的解决方案</p> </a> <div class="authtime flexRow"><b></b> <p>2026-11-07 10:42</p> </div> </div> </div> </div> <div class="moreAi "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>热门AI工具</p> </div> <a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a> </div> <div class="moreailist"> <div class="aibtns flexRow"> <a href="/ai/3574" title="立刻MV" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/178599535095695.png" alt="立刻MV" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/3574" title="立刻MV" target="_blank" class="overflowclass abripone">立刻MV</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">立刻MV是一款AI文本写作工具，AI 音乐视频（MV）创作工具。</p> <div class="aidconstab flexRow"> <a title="AI视频创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation" target="_blank" >AI视频创作</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/723" title="DeepSeek" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png" alt="DeepSeek" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/723" title="DeepSeek" target="_blank" class="overflowclass abripone">DeepSeek</a> </div> <p class="overflowclass abriptwo">DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。</p> <div class="aidconstab flexRow"> <a title="AI编程开发" class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI编程开发</a><a title="AI聊天问答" class="aidcontbp flexRow flexcenter" href="/ai/tag/chat" target="_blank" >AI聊天问答</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/3369" title="Laper" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/178599229095415.png" alt="Laper" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/3369" title="Laper" target="_blank" class="overflowclass abripone">Laper</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。</p> <div class="aidconstab flexRow"> <a title="AI文本写作" class="aidcontbp flexRow flexcenter" href="/ai/tag/text" target="_blank" >AI文本写作</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/4297" title="PixTV" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/6abb4764b88b5788.webp" alt="PixTV" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/4297" title="PixTV" target="_blank" class="overflowclass abripone">PixTV</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">PixTV是一款面向AIGC内容创作的AI视频生成工具。</p> <div class="aidconstab flexRow"> <a title="AI视频创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation" target="_blank" >AI视频创作</a><a title="视频生成" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation/video-generate" target="_blank" >视频生成</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/2422" title="花生AI" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/176481836978890.png" alt="花生AI" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/2422" title="花生AI" target="_blank" class="overflowclass abripone">花生AI</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">一款AI视频创作工具，主要用于B站推出的AI视频创作工具，适合需要提升相关任务效率的用户。</p> <div class="aidconstab flexRow"> <a title="AI视频创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation" target="_blank" >AI视频创作</a><a title="视频生成" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation/video-generate" target="_blank" >视频生成</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/726" title="豆包大模型" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/69b379b1c5e3f597.png" alt="豆包大模型" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/726" title="豆包大模型" target="_blank" class="overflowclass abripone">豆包大模型</a> </div> <p class="overflowclass abriptwo">豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。</p> <div class="aidconstab flexRow"> <a title="AI编程开发" class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI编程开发</a><a title="AI大模型" class="aidcontbp flexRow flexcenter" href="/ai/tag/code/large-model" target="_blank" >AI大模型</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/2686" title="WorkBuddy" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/177086639789686.png" alt="WorkBuddy" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/2686" title="WorkBuddy" target="_blank" class="overflowclass abripone">WorkBuddy</a> </div> <p class="overflowclass abriptwo">一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。</p> <div class="aidconstab flexRow"> <a title="AI办公学习" class="aidcontbp flexRow flexcenter" href="/ai/tag/office" target="_blank" >AI办公学习</a><a title="Agent智能体" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/2363" title="墨刀AI" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/6a82db90becd6869.png" alt="墨刀AI" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/2363" title="墨刀AI" target="_blank" class="overflowclass abripone">墨刀AI</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">一款AI图像与设计工具，主要用于产品经理的专属智能体，适合需要提升相关任务效率的用户。</p> <div class="aidconstab flexRow"> <a title="AI设计工具" class="aidcontbp flexRow flexcenter" href="/ai/tag/design" target="_blank" >AI设计工具</a><a title="Agent智能体" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div> </div> </div> <div class="aibtns flexRow"> <a href="/ai/3552" title="SkildArt" target="_blank" class="aibtnimga"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/178599501648236.png" alt="SkildArt" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" /></a> <div class="aibtn-right flexColumn"> <div class="abripone_f"> <a href="/ai/3552" title="SkildArt" target="_blank" class="overflowclass abripone">SkildArt</a> <span class="hot_span">Hot</span> </div> <p class="overflowclass abriptwo">SkildArt是一款AI文本写作工具，一站式 AI 视觉创作平台。</p> <div class="aidconstab flexRow"> <a title="电商工具" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-fuwu/dianshang" target="_blank" >电商工具</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="conRight artdtilRight "> <div class="hotzt artdtzt"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>相关专题</p> </div> <a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a> </div> <div class="hotztuls flexColumn"> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/chrome" class="aClass flexRow hotzta" title="chrome什么意思"><img src="https://img.php.cn/upload/subject/202308/07/2023080713215648025.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="chrome什么意思" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/chrome" class="aClass flexRow hotztra overflowclass" title="chrome什么意思">chrome什么意思</a> <p class="aClass flexRow hotztrp overflowclass">chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">2926</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.08.11</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/chromewfjzcj" class="aClass flexRow hotzta" title="chrome无法加载插件怎么办"><img src="https://img.php.cn/upload/subject/202311/06/2023110614253867874.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="chrome无法加载插件怎么办" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/chromewfjzcj" class="aClass flexRow hotztra overflowclass" title="chrome无法加载插件怎么办">chrome无法加载插件怎么办</a> <p class="aClass flexRow hotztrp overflowclass">chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">6039</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.11.06</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/chromekaiqiwh" class="aClass flexRow hotzta" title="Chrome开启无痕模式"><img src="https://img.php.cn/upload/subject/000/000/075/69c2443783ed7265.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Chrome开启无痕模式" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/chromekaiqiwh" class="aClass flexRow hotztra overflowclass" title="Chrome开启无痕模式">Chrome开启无痕模式</a> <p class="aClass flexRow hotztrp overflowclass">本专题整合了Chrome无痕模式开启相关内容，阅读专题下面的文章了解更多详细教程。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">4307</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2026.03.24</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/csszfloatyf" class="aClass flexRow hotzta" title="css中float用法"><img src="https://img.php.cn/upload/subject/202404/28/2024042816304974406.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css中float用法" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/csszfloatyf" class="aClass flexRow hotztra overflowclass" title="css中float用法">css中float用法</a> <p class="aClass flexRow hotztrp overflowclass">css中float属性允许元素脱离文档流并沿其父元素边缘排列，用于创建并排列、对齐文本图像、浮动菜单边栏和重叠元素。想了解更多float的相关内容，可以阅读本专题下面的文章。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">7447</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2024.04.28</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/cjjzintfloath" class="aClass flexRow hotzta" title="C++中int、float和double的区别"><img src="https://img.php.cn/upload/subject/202510/23/2025102311092756056.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="C++中int、float和double的区别" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/cjjzintfloath" class="aClass flexRow hotztra overflowclass" title="C++中int、float和double的区别">C++中int、float和double的区别</a> <p class="aClass flexRow hotztrp overflowclass">本专题整合了c++中int和double的区别，阅读专题下面的文章了解更多详细内容。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">864</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2025.10.23</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/zhandui" class="aClass flexRow hotzta" title="堆和栈的区别"><img src="https://img.php.cn/upload/subject/202307/18/2023071810241997603.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="堆和栈的区别" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/zhandui" class="aClass flexRow hotztra overflowclass" title="堆和栈的区别">堆和栈的区别</a> <p class="aClass flexRow hotztrp overflowclass">堆和栈的区别：1、内存分配方式不同；2、大小不同；3、数据访问方式不同；4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容，供大家免费下载体验。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">6747</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.07.18</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/dhzdqb" class="aClass flexRow hotzta" title="堆和栈区别"><img src="https://img.php.cn/upload/subject/202308/10/2023081010155831834.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="堆和栈区别" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/dhzdqb" class="aClass flexRow hotztra overflowclass" title="堆和栈区别">堆和栈区别</a> <p class="aClass flexRow hotztrp overflowclass">堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">2788</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.08.10</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/csspositiondw" class="aClass flexRow hotzta" title="CSS position定位有几种方式"><img src="https://img.php.cn/upload/subject/202311/23/2023112313431971209.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="CSS position定位有几种方式" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/csspositiondw" class="aClass flexRow hotztra overflowclass" title="CSS position定位有几种方式">CSS position定位有几种方式</a> <p class="aClass flexRow hotztrp overflowclass">有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">352</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.11.23</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/postmansfrzzm" class="aClass flexRow hotzta" title="Postman身份认证怎么配置"><img src="https://img.php.cn/upload/subject/000/000/085/6aed9e31a595e229.webp?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Postman身份认证怎么配置" class="hotztaimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/postmansfrzzm" class="aClass flexRow hotztra overflowclass" title="Postman身份认证怎么配置">Postman身份认证怎么配置</a> <p class="aClass flexRow hotztrp overflowclass">本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">0</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2026.11.06</p> </div> </div> </div> </div> </div> </div> <div class="hotdownload "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>热门下载</p> </div> <a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a> </div> <div class="hotdownTab"> <div class="hdTabs flexRow"> <div class="check" data-id="onef">网站特效 <b></b> </div> / <div class="" data-id="twof">网站源码 <b></b></div> / <div class="" data-id="threef">网站素材 <b></b></div> / <div class="" data-id="fourf">前端模板 <b></b></div> </div> <ul class="onef"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="登录表单页面js，现代化登录页面模板" href="/xiazai/js/10373"><span>[表单按钮]</span><span>登录表单页面js，现代化登录页面模板</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="注册表单布局HTML代码，登录注册切换js模板" href="/xiazai/js/10372"><span>[表单按钮]</span><span>注册表单布局HTML代码，登录注册切换js模板</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="文字透视变形设计，有趣的css滑动动画" href="/xiazai/js/10371"><span>[文字特效]</span><span>文字透视变形设计，有趣的css滑动动画</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="精美登录注册UI，登录页面设计模板" href="/xiazai/js/10370"><span>[表单按钮]</span><span>精美登录注册UI，登录页面设计模板</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="意境背景图片唯美下载，云破月来花弄影素材" href="/xiazai/js/10369"><span>[图片特效]</span><span>意境背景图片唯美下载，云破月来花弄影素材</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="液体背景制作，创意液体文字动画" href="/xiazai/js/10368"><span>[其它特效]</span><span>液体背景制作，创意液体文字动画</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="html滑块选择器，简单的滑块控制数字表达式" href="/xiazai/js/10367"><span>[其它特效]</span><span>html滑块选择器，简单的滑块控制数字表达式</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="文本闪烁css，文字闪光动图特效" href="/xiazai/js/10366"><span>[其它特效]</span><span>文本闪烁css，文字闪光动图特效</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="css滑块效果，气球移动动画效果图素材" href="/xiazai/js/10365"><span>[其它特效]</span><span>css滑块效果，气球移动动画效果图素材</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="手写字体设计，好看的svg文字特效" href="/xiazai/js/10364"><span>[其它特效]</span><span>手写字体设计，好看的svg文字特效</span></a> </div> </li> </ul> <ul class="twof" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12061" title="CodeIgniter4.6.1"><span>[开发框架]</span><span>CodeIgniter4.6.1</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12060" title="Django Web框架5.2.2"><span>[开发框架]</span><span>Django Web框架5.2.2</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12059" title="NutzFw企业级快速开发框架1.0.3"><span>[开发框架]</span><span>NutzFw企业级快速开发框架1.0.3</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12058" title="go-admin前后端分离权限管理系统脚手架2.2.0"><span>[开发框架]</span><span>go-admin前后端分离权限管理系统脚手架2.2.0</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12057" title="Ember.js3.28.9"><span>[开发框架]</span><span>Ember.js3.28.9</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12056" title="MaxKey单点登录认证系统3.3.3"><span>[开发框架]</span><span>MaxKey单点登录认证系统3.3.3</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12055" title="PHP7框架Phalcon71.2.3"><span>[开发框架]</span><span>PHP7框架Phalcon71.2.3</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12054" title="TimoPHP开发框架1.4.1"><span>[开发框架]</span><span>TimoPHP开发框架1.4.1</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12053" title="猿团YTF框架1.0"><span>[开发框架]</span><span>猿团YTF框架1.0</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12052" title="zentaophp框架3.0"><span>[开发框架]</span><span>zentaophp框架3.0</span> </a> </div> </li> </ul> <ul class="threef" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4941" title="2027新年促销主题艺术字ps素材下载"><span>[网站素材]</span><span>2027新年促销主题艺术字ps素材下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4940" title="秋日湖边小屋插画矢量素材"><span>[网站素材]</span><span>秋日湖边小屋插画矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4939" title="红色风格圣诞彩球元素海报设计下载"><span>[网站素材]</span><span>红色风格圣诞彩球元素海报设计下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4938" title="美式快餐意面冷饮海报矢量模板"><span>[网站素材]</span><span>美式快餐意面冷饮海报矢量模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4937" title="篮球比赛体育复古海报矢量模板"><span>[网站素材]</span><span>篮球比赛体育复古海报矢量模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4936" title="二十四节气立冬背景矢量模板"><span>[网站素材]</span><span>二十四节气立冬背景矢量模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4935" title="2027年新年主题海报PSD源文件下载"><span>[网站素材]</span><span>2027年新年主题海报PSD源文件下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4934" title="本地有机市集水彩海报矢量素材"><span>[网站素材]</span><span>本地有机市集水彩海报矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4933" title="传统茶文化水彩海报背景矢量"><span>[网站素材]</span><span>传统茶文化水彩海报背景矢量</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4932" title="万圣节活动海报矢量模板"><span>[网站素材]</span><span>万圣节活动海报矢量模板</span> </a> </div> </li> </ul> <ul class="fourf" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12112" title="探索文化产业服务机构网站模板"><span>[前端模板]</span><span>探索文化产业服务机构网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12111" title="现代商业数字化服务公司网站模板"><span>[前端模板]</span><span>现代商业数字化服务公司网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板"><span>[前端模板]</span><span>响应式烟草公司HTML5网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12109" title="园艺服务机构响应式网页模板"><span>[前端模板]</span><span>园艺服务机构响应式网页模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12108" title="HTML5日本动画动漫网站模板"><span>[前端模板]</span><span>HTML5日本动画动漫网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12107" title="蛋糕烘焙美食宣传网站模板"><span>[前端模板]</span><span>蛋糕烘焙美食宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12106" title="黑白风格律师个人简历展示网页模板"><span>[前端模板]</span><span>黑白风格律师个人简历展示网页模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12105" title="黑色风格摄影工作室宣传网站模板"><span>[前端模板]</span><span>黑色风格摄影工作室宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12104" title="响应式金融公司HTML5网站模板"><span>[前端模板]</span><span>响应式金融公司HTML5网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/12103" title="HTML5音乐节演唱会宣传网站模板"><span>[前端模板]</span><span>HTML5音乐节演唱会宣传网站模板</span> </a> </div> </li> </ul> </div> <script> $('.hdTabs>div').click(function (e) { $('.hdTabs>div').removeClass('check') $(this).addClass('check') $('.hotdownTab>ul').css('display', 'none') $('.' + e.currentTarget.dataset.id).show() }) </script> </div> <div class="xgarts "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>相关下载</p> </div> <a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a> </div> <div class="xgwzlist "> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="MDPHP(麦迪php框架系统)1.1" href="/xiazai/code/12051">MDPHP(麦迪php框架系统)1.1</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP 多国语言框架2.0" href="/xiazai/code/12046">PHP 多国语言框架2.0</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="ujframe简单快速PHP开发框架1.0" href="/xiazai/code/12045">ujframe简单快速PHP开发框架1.0</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="php轻量型框架1.0" href="/xiazai/code/12044">php轻量型框架1.0</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="MyQEE开源PHP多项目及模块化开发框架3.0 RC2" href="/xiazai/code/12041">MyQEE开源PHP多项目及模块化开发框架3.0 RC2</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="php开源学习型框架CMVC1.2.0" href="/xiazai/code/12040">php开源学习型框架CMVC1.2.0</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP框架Kohana3.3.1" href="/xiazai/code/12039">PHP框架Kohana3.3.1</a></div> </div> </div> <div class="jpkc"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>精品课程</p> </div> <a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a> </div> <div class=" jpkcTab"> <div class=" jpkcTabs flexRow"> <div class="check" data-id="onefd">相关推荐 <b></b> </div> / <div class="" data-id="twofd">热门推荐 <b></b></div> / <div class="" data-id="threefd">最新课程 <b></b></div> </div> <div class="onefd jpktabd"> <div class="ristyA flexRow " > <a target="_blank" href="/course/2119.html" title="GDB 17.2 官方文档集合"> <img src="https://img.php.cn/upload/course/000/000/085/6aa146f9288de428.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="GDB 17.2 官方文档集合" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/2119.html" title="GDB 17.2 官方文档集合" class="rirightp overflowclass">GDB 17.2 官方文档集合</a> <div class="risrdown flexRow"> <p>共0课时 | 0人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1981.html" title="Bootstrap 入门安装配置"> <img src="https://img.php.cn/upload/course/000/000/085/6a671315cd7b9962.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Bootstrap 入门安装配置" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1981.html" title="Bootstrap 入门安装配置" class="rirightp overflowclass">Bootstrap 入门安装配置</a> <div class="risrdown flexRow"> <p>共0课时 | 0人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1723.html" title="38+ PhpStorm 提示和技巧"> <img src="https://img.php.cn/upload/course/000/000/080/69ccc31acdae1956.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="38+ PhpStorm 提示和技巧" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1723.html" title="38+ PhpStorm 提示和技巧" class="rirightp overflowclass">38+ PhpStorm 提示和技巧</a> <div class="risrdown flexRow"> <p>共1课时 | 237人学习</p> </div> </div> </div> </div> <div class="twofd jpktabd" style="display:none;"> <div class="ristyA flexRow " > <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a> <div class="risrdown flexRow"> <p>共6课时 | 12.1万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="risrdown flexRow"> <p>共79课时 | 161.7万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="rirightp overflowclass">phpStudy极速入门视频教程</a> <div class="risrdown flexRow"> <p>共6课时 | 54.7万人学习</p> </div> </div> </div> </div> <div class="threefd jpktabd" style="display:none;"> <div class="ristyA flexRow " > <a target="_blank" href="/course/2231.html" title="Go-zero与XORM网盘项目实战"> <img src="https://img.php.cn/upload/course/000/000/098/6aeae57fba179449.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="Go-zero与XORM网盘项目实战" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/2231.html" title="Go-zero与XORM网盘项目实战" class="rirightp overflowclass">Go-zero与XORM网盘项目实战</a> <div class="risrdown flexRow"> <p>共0课时 | 0人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/2230.html" title="Go编程名库XORM使用教程"> <img src="https://img.php.cn/upload/course/000/000/098/6aeae57fba179449.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="Go编程名库XORM使用教程" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/2230.html" title="Go编程名库XORM使用教程" class="rirightp overflowclass">Go编程名库XORM使用教程</a> <div class="risrdown flexRow"> <p>共0课时 | 0人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/2221.html" title="Starlette，Pydantic 与 FastAPI 框架是什么关系？"> <img src="https://img.php.cn/upload/course/000/000/075/6ae866be8bce2762.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="Starlette，Pydantic 与 FastAPI 框架是什么关系？" class="ristyAimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/2221.html" title="Starlette，Pydantic 与 FastAPI 框架是什么关系？" class="rirightp overflowclass">Starlette，Pydantic 与 FastAPI 框架是什么关系？</a> <div class="risrdown flexRow"> <p>共0课时 | 0人学习</p> </div> </div> </div> </div> <script> $('.jpkcTabs>div').click(function (e) { $('.jpkcTabs>div').removeClass('check') $(this).addClass('check') $('.jpkcTab .jpktabd').css('display', 'none') $('.' + e.currentTarget.dataset.id).show() }) </script> </div> </div> <div class="zxarts "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>最新文章</p> </div> <a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a> </div> <div class="xgwzlist "> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="SVG线性渐变填充进度条的平滑过渡实现教程" href="/faq/3393662.html">SVG线性渐变填充进度条的平滑过渡实现教程</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="SVG线性渐变填充的平滑过渡实现指南" href="/faq/3393661.html">SVG线性渐变填充的平滑过渡实现指南</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何阻止 HTML 表单默认提交并正确操作 DOM 元素" href="/faq/3393656.html">如何阻止 HTML 表单默认提交并正确操作 DOM 元素</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何阻止 HTML 表单默认提交导致页面刷新" href="/faq/3393653.html">如何阻止 HTML 表单默认提交导致页面刷新</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何让输入值与删除按钮并排显示在同一行" href="/faq/3393647.html">如何让输入值与删除按钮并排显示在同一行</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何正确使用 Bootstrap 栅格系统的 offset 类实现图文交错布局" href="/faq/3393640.html">如何正确使用 Bootstrap 栅格系统的 offset 类实现图文交错布局</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="Bootstrap栅格偏移（offset）类的正确使用方法与常见误区解析" href="/faq/3393637.html">Bootstrap栅格偏移（offset）类的正确使用方法与常见误区解析</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="Bootstrap栅格系统中正确使用offset类实现图文交错布局的完整指南" href="/faq/3393635.html">Bootstrap栅格系统中正确使用offset类实现图文交错布局的完整指南</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何正确使用 Bootstrap 的 offset 类实现响应式图文交错布局" href="/faq/3393634.html">如何正确使用 Bootstrap 的 offset 类实现响应式图文交错布局</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="Bootstrap栅格偏移（offset）的正确用法与常见陷阱解析" href="/faq/3393632.html">Bootstrap栅格偏移（offset）的正确用法与常见陷阱解析</a></div> </div> </div> <div class="articlelist_main1R2 fixedbox"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>PDF工具</p> </div> <a class="rititle-more flexRow" target="_blank" href="https://www.pdf.cn/" title="PDF工具"><span>更多</span><b></b></a> </div> <div class="articlelist_main1R2M"> <a title="PDF合并" href="https://www.pdf.cn/merge-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides11.png" alt="PDF合并" /> <span>PDF合并</span> </a> <a title="PDF转换至PDF/A" href="https://www.pdf.cn/pdf-to-pdfa" target="_blank"> <img src="/static/lhimages/header_Ms_hides10.png" alt="PDF转换至PDF/A" /> <span>PDF转PDF/A</span> </a> <a title="PDF转PPT" href="https://www.pdf.cn/pdf-to-ppt" target="_blank"> <img src="/static/lhimages/header_Ms_hides7.png" alt="PDF转PPT" /> <span>PDF转PPT</span> </a> <a title="HTML转PDF" href="https://www.pdf.cn/html-to-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides5.png" alt="HTML转PDF" /> <span>HTML转PDF </span> </a> <a title="PDF删除页面" href="https://www.pdf.cn/delete-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides13.png" alt="PDF删除页面" /> <span>PDF删除页面</span> </a> <a title="Excel转PDF" href="https://www.pdf.cn/excel-to-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides3.png" alt="Excel转PDF" /> <span>EXCEL转PDF</span> </a> <a title="PDF转XML" href="https://www.pdf.cn/pdf-to-xml" target="_blank"> <img src="/static/lhimages/header_Ms_hides14.png" alt="PDF转XML" /> <span>PDF转XML</span> </a> <a title="排列PDF文件" href="https://www.pdf.cn/organize-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides15.png" alt="排列PDF文件" /> <span>排列PDF页面</span> </a> <a title="图片转PDF" href="https://www.pdf.cn/images-to-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides4.png" alt="图片转PDF" /> <span>图片转PDF</span> </a> <a title="PDF转Excel" href="https://www.pdf.cn/pdf-to-excel" target="_blank"> <img src="/static/lhimages/header_Ms_hides8.png" alt="PDF转Excel" /> <span>PDF转EXCEL</span> </a> <a title="编辑PDF" href="https://www.pdf.cn/pdf/" target="_blank"> <img src="/static/lhimages/header_Ms_hides24.png" alt="编辑PDF" /> <span>编辑PDF</span> </a> <a title="Word转PDF" href="https://www.pdf.cn/word-to-pdf" target="_blank"> <img src="/static/lhimages/header_Ms_hides1.png" alt="Word转PDF" /> <span>word转PDF</span> </a> </div> </div> </div> </div> </div>  <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a target="_blank" href="/about/us.html" rel="nofollow" title="关于我们" class="cBlack">关于我们</a> <a target="_blank" href="/about/disclaimer.html" rel="nofollow" title="免责申明" class="cBlack">免责申明</a> <a target="_blank" href="/about/jbzx.html" rel="nofollow" title="举报中心" class="cBlack">举报中心</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a target="_blank" href="https://www.php.cn/teacher.html" rel="nofollow" title="讲师合作" class="cBlack">讲师合作</a> <a target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" title="广告合作" class="cBlack">广告合作</a> <a target="_blank" href="/new/" title="最新文章列表" class="cBlack">最新更新</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br />关注PHP中文网服务号</p> <img src="https://staticw.php.cn/static/images/examples/text16.png" /> </em> </span> <div class="clear"></div> </dd> </dl> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="https://staticw.php.cn/static/images/examples/text17.png" /></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"> <p>Copyright 2014-2026 <a href="https://www.php.cn/">https://www.php.cn/</a> All Rights Reserved | php.cn </p> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3fc525002bf1c4f1d536daef98e9a33c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> layui.use(['element', 'carousel'], function() { var element = layui.element; $ = layui.jquery; var carousel = layui.carousel; carousel.render({ elem: '#test1', width: '100%', height: '330px', arrow: 'always' }); $.getScript('https://staticw.php.cn/static/js/jquery.lazyload.min.js', function() { $("img").lazyload({ placeholder: "https://staticw.php.cn/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false }); }); }); </script> <script src="https://staticw.php.cn/static/js/cdn.js?v=1.0.1"></script>     <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox" > <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div> </body> </html> <script type="text/javascript" src="https://open.php.cn/hitsUp?type=article&id=2132437&time=1794159781"> </script> <script src="https://staticw.php.cn/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1794159781"></script> <script> article_status = "1604084"; </script> <input type="hidden" id="verifycode" value="/captcha.html"> <script type="text/javascript" src="https://staticw.php.cn/static/js/global.min.js?5.5.33"></script> <link rel='stylesheet' id='_main-css' href='https://staticw.php.cn/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='https://staticw.php.cn/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='https://staticw.php.cn/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="https://staticw.php.cn/static/js/jquery.cookie.js"></script> <script> function setCookie(name, value, iDay) { //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for (var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if (name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } </script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '11']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script>  <script> setCookie('is_article', 1, 1); </script> <script> var is_login = "0"; var show = 0; var ceng = getCookie('ceng'); //未登录复制显示登录按钮 if(is_login == 0 && false){ $(".code").hover(function(){ $(this).find('.contentsignin').show(); },function(){ $(this).find('.contentsignin').hide(); }); //不给复制 $('.code').bind("cut copy paste",function(e) { e.preventDefault(); }); $('.code .contentsignin').click(function(){ $(document).trigger("api.loginpopbox"); }) }else{ // 获取所有的 <pre> 元素 var preElements = document.querySelectorAll('pre'); preElements.forEach(function(preElement) { // 创建复制按钮 var copyButton = document.createElement('button'); copyButton.className = 'copy-button'; copyButton.textContent = '复制'; // 添加点击事件处理程序 copyButton.addEventListener('click', function() { // 获取当前按钮所属的 <pre> 元素中的文本内容 var textContent = preElement.textContent.trim(); // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容 var tempTextarea = document.createElement('textarea'); tempTextarea.value = textContent; // 将临时 textarea 添加到文档中 document.body.appendChild(tempTextarea); // 选中临时 textarea 中的文本内容并执行复制操作 tempTextarea.select(); document.execCommand('copy'); // 移除临时 textarea 元素 document.body.removeChild(tempTextarea); // 更新按钮文本为 "已复制" this.textContent = '已复制'; }); // 创建AI写代码按钮 var aiButton = document.createElement('button'); aiButton.className = 'copy-button'; aiButton.textContent = 'AI写代码'; aiButton.style.marginLeft = '5px'; aiButton.style.marginRight = '5px'; // 添加点击事件处理程序 aiButton.addEventListener('click', function() { // Generate a random number between 0 and 1 var randomChance = Math.random(); // If the random number is less than 0.5, open the first URL, else open the second // if (randomChance < 0.5) { // window.open('https://www.doubao.com/chat/?channel=php&source=hw_db_php&type=ziy&theme=bianc', '_blank'); // } else { // window.open('https://click.aliyun.com/m/1000402709/', '_blank'); // } window.open('https://codeflying.cgref.cn/s/p3kqp67eol', '_blank'); }); // 将按钮添加到 <pre> 元素前面 preElement.parentNode.insertBefore(copyButton, preElement); preElement.parentNode.insertBefore(aiButton, preElement); }); } </script>