1. 为什么我放着 PPT 不用偏要用 HTML 做演示说个最近发生的事。上周要跟几个合作方对齐一个数据产品的方案我提前把内容整理成了 PPT按公司模板套了封面、目录、过渡页前后折腾了快半天。到了会议室投影一打开字体变了、图表错位了、有个透明底的 logo 直接变黑块。那一刻我真的有点绷不住当场打开浏览器把前几天用 HTML 写的内部讨论稿全屏展示出来——页面干净、图表是活的、还能当场点开筛选器看不同维度的数据。对面负责人看了直接问了一句这个是怎么做的比我们平时的 PPT 清楚多了。其实HTML 某种程度上替代 PPT这件事在 Web 前端圈子里早就不新鲜了。很多发布会的大屏演示、技术分享的幻灯片、甚至产品官网的介绍页本质上都是 HTML 写的。我自己这几年也陆续用 HTML CSS JS 做过不少演示和汇报越用越觉得这玩意儿在特定场景下真的能顶掉 PPT而且顶得很漂亮。当然要说完全替代那肯定是不现实的PPT 能在办公领域活这么多年自有它的道理。所以这篇文章不打算站队喊口号只想把我在实际项目里用 HTML 做演示、做汇报、做展示的经验和思考完整摊开来讲。你如果是个经常要做演示的人或者正在纠结要不要学 HTML 来做幻灯片又或者纯粹好奇这两种形式孰优孰劣那这篇文章应该能给你一个比较清晰的答案。里面会涉及一些直接能用的代码、踩过的坑、以及我自己总结的选型判断标准希望能帮到你。2. 先聊聊 HTML 做演示这件事的底层逻辑2.1 为什么 HTML 天然适合做幻灯片很多人一想到 HTML脑子里浮现的还是网页网站这些词很少把它跟演示联系起来。但从本质上看HTML 做的页面天然就具备做幻灯片的几个关键特性。首先是全屏展示能力。浏览器按一个 F11 就能进入无干扰的全屏模式再配合一个简单的脚本就能把鼠标操作变成翻页操作。这个体验跟 PPT 的放映模式几乎是一样的。其次是排版自由度。CSS 的布局能力非常强flex、grid、定位、变换这些属性可以让你几乎不受任何模板限制地摆放内容。比如你要做一张时间轴样式的幻灯片PPT 里得慢慢拖文本框、调对齐HTML 里几行 CSS 就能搞定一个相当精致的排列。第三是交互能力。引用一句我常跟人打的比方——PPT 是一本装订好的书而 HTML 是一个能跟你对话的白板。你在 PPT 里点击一个图表它顶多切换动画但在 HTML 里点击图表你可以让它跳转、筛选、放大、关联、实时刷新数据这就是活和死的区别。第四是分发成本极低。一个 HTML 文件就是一个完整的展示不用安装任何额外的软件任何带浏览器的设备都能打开哪怕换了操作系统也不怕格式错乱。2.2 某种程度这四个字才是关键标题里那某种程度四个字并不是我加上去凑字数的而是这段时间用下来最真实的体感。HTML 不是要全面取代 PPT而是在某些应用场景、某些使用人群、某些内容类型下表现出明显的优势。打个比方PPT 像是宜家的成品家具搬回来就能用风格统一、搭配顺手适合大多数人HTML 像是从木材加工开始自己打家具前期成本高、需要技能但你能做出一张完全贴合墙角的桌子还能在桌面嵌一个无线充电板。你不能说宜家的家具不行但某种程度上定制家具确实更适配特定需求。这个定位很关键后面所有关于HTML 能不能替代 PPT的讨论其实都是围绕这某种程度来展开的。说 HTML 完全替代 PPT那是外行的狂话说 HTML 做演示完全没必要那就是对这个工具的可能性和边界不够了解。2.3 打破一个误解HTML 做演示不等于做个网页我见过不少人包括一些技术背景的同事在听到用 HTML 做演示时的第一反应是那我直接打开一个网页链接不就行了吗这里有一个很微妙的区别。HTML 做演示重点不在网页而在演示体验——你需要控制单屏内容的信息量、决定翻页交互、考虑文字在投影上的可读性、规划整个演示的节奏。这其实是一个界面设计 信息设计 交互设计的综合问题不是简单地写个页面放点文字就能完事的。我一开始也犯过这个毛病把HTML 版演示写成了带导航栏的长网页结果在演示的时候只能靠滚动条上下滑观感很拉胯。后来才慢慢摸索出 HTML 演示的正确打开方式一屏一个主题、内容就地呈现、翻页逻辑清晰、视觉跟随节奏。从某种意义上说HTML 演示不是网页的缩小版而是幻灯片的增强版。3. 一套能直接落地的 HTML 演示方案3.1 先确定你要的翻页体验做 HTML 演示第一个要想清楚的问题就是交互方式。这里我根据自己的实践梳理出三种主流方案你可以按需挑选。方案一纯 CSS 滚动 scroll-snap。这是最轻量的一种方式。每个页就是一个满屏高度的 section配合 CSS 的 scroll-snap 属性让滚动自动对齐到每一页。优点是零 JavaScript 依赖代码简单移动端体验也自然缺点是翻页动效比较普通而且需要靠滚动操作方向感弱一些。方案二键盘/按钮控制的内容切换我最常用的方式。用 JavaScript 监听键盘方向键、空格键或者点击事件切换显示不同的页面容器。类似于幻灯片里的上一页/下一页展示节奏更可控。这也是绝大多数 HTML 演示框架的核心逻辑。方案三CSS 动画驱动的自动播放。设置好每个页的展示时长和过渡动画让演示自己一页一页播下去。适合展览、大屏轮播这种不需要人操作的场景。对我来说最顺手的是方案二因为它最接近 PPT 的使用习惯观众心理预期也好建立。3.2 一个最小可用的 HTML 演示模板直接上代码。这是我常用的一个非常轻量的演示基础结构不带任何框架依赖纯手写也完全可行。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的 HTML 演示/title style * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: system-ui, sans-serif; } /* 演示区域每个 .slide 都是满屏的一页 */ .slide { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px; background: #f7f8fa; border-bottom: 1px solid #e0e0e0; text-align: center; } .slide h1 { font-size: 3rem; margin-bottom: 24px; color: #1f2329; } .slide p { font-size: 1.4rem; line-height: 1.8; color: #444; max-width: 800px; } /* 隐藏非当前页方案二 */ .slide { display: none; } .slide.active { display: flex; } /* 底部控制条 */ .controls { position: fixed; bottom: 20px; right: 30px; display: flex; gap: 10px; z-index: 100; } .controls button { padding: 8px 18px; font-size: 1rem; border-radius: 6px; border: none; background: #1f6feb; color: #fff; cursor: pointer; } .page-num { position: fixed; bottom: 24px; left: 30px; font-size: 0.9rem; color: #888; z-index: 100; } /style /head body div classslide active h1数据产品方案/h1 p内部讨论版 · 2024.12/p /div div classslide h1背景与机会/h1 p这里写这一页的核心观点控制信息量越聚焦越好。/p /div div classslide h1整体架构/h1 p可以用图、表格、或者关键指标来支撑。/p /div div classcontrols button idprevBtn上一页/button button idnextBtn下一页/button /div div classpage-num span idpageNow1/span / span idpageTotal3/span /div script const slides document.querySelectorAll(.slide); const pageNow document.getElementById(pageNow); const pageTotal document.getElementById(pageTotal); let current 0; pageTotal.textContent slides.length; function render() { slides.forEach((slide, idx) { slide.classList.toggle(active, idx current); }); pageNow.textContent current 1; } document.getElementById(nextBtn).addEventListener(click, () { if (current slides.length - 1) current; render(); }); document.getElementById(prevBtn).addEventListener(click, () { if (current 0) current--; render(); }); document.addEventListener(keydown, (e) { if (e.key ArrowRight || e.key ArrowDown || e.key ) { if (current slides.length - 1) current; render(); } if (e.key ArrowLeft || e.key ArrowUp) { if (current 0) current--; render(); } // 按 Home 键回到第一页按 End 键跳最后一页 if (e.key Home) { current 0; render(); } if (e.key End) { current slides.length - 1; render(); } }); // 支持点击左右两侧区域翻页 document.addEventListener(click, (e) { if (e.target.closest(.controls)) return; if (e.clientX window.innerWidth / 2) { if (current 0) current--; } else { if (current slides.length - 1) current; } render(); }); /script /body /html这段代码的核心逻辑就是每个.slide是一张幻灯片默认隐藏通过.active类来控制展示键盘方向和页面两侧点击都能翻页UI 上保留了一个页码指示器让观众知道当前进度。复制到本地保存成.html文件浏览器打开按 F11 全屏就已经是一个很干净的演示环境了。3.3 如果不想从零手写有哪些现成框架可用手写模板虽然轻量但如果你需要更丰富的效果转场动画、代码高亮、嵌套块、演讲者备注从零自己写成本会比较高。这种时候我的建议是直接用专门为 HTML 演示设计的开源框架。我用过的几个里最顺手的分别是这老三样框架特点适合场景Marp基于 Markdown 写幻灯片编译输出为 HTML、PPT、PDF语法简单快速产出、纯内容类演示Slidev用 Vue 驱动的幻灯片框架支持代码高亮、图表、动画、演讲者视图技术演讲、开源主题分享reveal.js经典老牌 HTML 演示框架插件生态强支持嵌套幻灯片追求自定义效果、复杂排版的演示Marp 和 Slidev 我都实际用过不止一次。Marp 适合那种内容为王、不折腾样式的场景一句话一行一个观点编译出来就是非常干净的 HTML。Slidev 则更适合技术分享你可以直接在幻灯片里嵌入 Vue 组件、动态图表、甚至实时运行的代码块演示的效果会让人眼前一亮。不过坦白说这些框架的学习成本都不算低如果你的需求非常简单直接手写基础模板反而更合适。框架解决的是复杂度问题不是有没有问题。4. 什么场景下 HTML 演示稿能真正压过 PPT4.1 数据可视化场景HTML 是降维打击这是我认为 HTML 最值回票价的领域。做数据汇报的人应该都有这种经历PPT 里放图表要么是截图要么是复制粘贴的图表对象。截图无法交互复制对象一旦数据更新还得重新贴一遍。最尴尬的是当现场有人问一句这个数据按地区拆一下是多少你只能尴尬地说这块我后面补充。HTML 完全没有这个问题。你可以在演示里直接嵌入 ECharts 这样的可视化库做成一个可以实时交互的图表卡片。让我用一个具体案例来说明。之前做一个经营分析汇报我写了一个 HTML 页面里面放了一个订单趋势图。这个图不是静态的而是带了一个日期范围选择器和一个城市多选框。现场汇报的时候有负责人问深圳的订单最近两周有没有变化我当场在页面上点选深圳图表立刻重新渲染出对应曲线所有在场的人都能看到数据变化的过程。这种当场验证一个假设的演示体验PPT 是无论如何也给不了的。4.2 产品 Demo 和技术演示让演示稿直接成为可操作的产品还有一个我特别用的场景是产品演示。原来做产品方案评审我得先放十几页 PPT 讲产品思路完了再打开测试环境一步步操作给评委看。这个流程最大的痛点是 PPT 讲的和操作演示之间是割裂的——PPT 里描述的交互在真实系统里可能长得完全不一样。后来我想了个办法直接用 HTML 做一个高保真原型把主要界面的交互用 HTML/CSS/JS 实现出来让这个原型本身就是演示的主体。讲逻辑的时候点开对应界面讲交互的时候直接操作讲数据流的时候让产品原型调 mock 接口展示结果。评委看的是能点能跑的东西讨论的颗粒度完全不一样了。有些朋友可能会说这种高保真原型本来就可以用专门的工具比如 Figma、Axure来做。这话没错但 HTML 的优势在于还原度最高——你写的 HTML 就是未来前端开发的底子不存在原型跟成品两回事的问题而且还能顺手验证技术方案的可行性。4.3 跨设备、跨系统分发的场景前文提过一个 HTML 文件本身就是一个完整应用。这个特性在公司内部跨平台分发场景下特别香。行政发通知、培训发课件、汇报发参考资料经常面临这样一个困境发 PPT 吧有的同事用 WPS、有的用 Office还有的老电脑装的版本太旧打开以后排版全乱发 PDF 吧信息是静态的没法交互也不能改。我后来在做一个跨部门项目介绍的时候直接把全套项目背景、组织架构、里程碑、当前风险、下阶段计划写进了一个 HTML 单文件外链了必要的样式和图表库发给各条线负责人。结果所有人在浏览器里打开都是同一个样子没有任何兼容性问题还有几位同事说这个比 PPT 看着高级。4.4 需要频繁改稿的项目跟 PPT 相比HTML 在版本管理上的优势也特别明显。如果你用 Git 来管理演示稿那么每一版改动都留下了痕迹想回退随时能回退PPT 在这方面就比较吃亏改来改去容易产生最终版v3_终版_reallyfinal.pptx这种文件。这个优势在评审意见密集轰炸的场景下价值巨大。经常是周五评审领导提了十来条修改意见周六加班改稿周日上午又临时推翻两个结论——如果用 PPT你得小心地在不同版本之间反复横跳用 HTML每次修改就是一次代码变更哪一版是什么逻辑清清楚楚。4.5 网络热词里的启发从生日祝福代码到教师节 HTML看到的可能性这里想顺带说一个我在整理资料时注意到的现象最近网络上跟 HTML 相关的词条里除了html网页制作html标签html表单这类技术学习内容还出现了一个很有意思的品类——html生日祝福代码教师节代码html。这说明什么说明已经有很多人拿 HTML 做锦上添花的展示物了。给朋友做一个生日祝福网页给老师做一个教师节感谢页面既有心意又有创意比打印一张贺卡或者发一段祝福文字要有仪式感得多。我甚至见过有人用 HTML 做了电子邀请函代替了传统的 PPT 婚礼介绍。这些场景严格来说不是演示而是展示但它们共同说明了 HTML 作为表达载体的灵活性是超出很多人预料的。当你可以控制颜色、字体、动画、交互时你做的就不仅仅是一份幻灯片而是一个带有个人印记的呈现物。5. 哪些场景下 HTML 替代不了 PPT千万别硬上前面说了不少 HTML 的优势但如果有人因为这些就兴冲冲地把公司所有汇报材料都改成 HTML那我得泼一盆冷水了。HTML 做演示有几个非常明显的短板在这些场景下硬上只会给自己找麻烦。5.1 协作编辑场景PPT 仍然是团队协同的标准答案这是 HTML 目前最大的一块硬伤。一个团队三四个人共同做一份方案用 PPT 协同工具不管是 Office 365 还是 WPS 云协作大家可以在同一份文件上实时编辑、回复评论、分配任务。HTML 呢除非你把代码托管到 Git 仓库里让团队代码协作否则普通业务同事根本没有能力参与编辑。每次想到这个差异我都会用写论文来比喻——如果几个人要合著一篇论文最好的工具永远是支持协同批注的文档平台而不是各自用 LaTeX 写好再合并。HTML 演示也是一样的道理它的天然受众是一个人能掌控全场的使用者。5.2 模板依赖型场景PPT 的模板生态仍然领先很多公司对对外材料有严格的 VI 规范封面用哪个背景、正文用什么字体、页脚怎么排、图表配色是什么都有明确要求。PPT 的模板生态对这种需求支持得很成熟行政或市场同事只要把内容往母版里一套就行。HTML 当然也能通过 CSS 变量和公共样式实现模板化但那基本是前端开发的工作量。要让一个不写代码的同事像套 PPT 模板一样套 HTML 模板目前还不现实。5.3 需要打印 or 离线阅读的场景还有一个经常被忽视的细节打印。有些汇报材料不仅要在屏幕上演示还要打印出来装订给参会者。PPT 在这方面天然支持页面就是一个固定的版式一键打印预览、输出 PDF、调整页码都很方便。HTML 的默认输出是流式文档打印支持需要额外的 CSS 打印样式和分页设计。我自己做 HTML 演示稿时为了输出打印版 PDF经常要额外写一套media print样式控制每个 slide 正好占一页纸、隐藏控制按钮、调整字号——麻烦程度不亚于重新做一版。如果你的工作流里打印是不可或缺的环节那还是老老实实用 PPT。5.4 非技术团队的知识传承场景最后一点是我最近深刻体会到的HTML 演示的学习和移交成本要比 PPT 高得多。PPT 扔给一个实习生他半天就能上手HTML 扔给一个实习生他要么完全不会改要么改一处代码崩了全局。你的岗位一变动这套 HTML 演示从资产就变成了负债。我前阵子帮一个业务部门做了一个 HTML 的月度数据汇报模板当时觉得是帮了忙。等我调岗后接手的人看着那些代码完全无从下手最后只能重新去做 PPT。从那以后我逐渐养成了一个原则——HTML 演示给自己、给自己的技术同学用可以但如果是给非技术团队做可长期维护的资产务必要三思。6. HTML 演示稿实战中的常见坑与优化细节如果你决定上手试试 HTML 演示下面这些坑是我替你蹚过的值得认真看看。6.1 字体问题换台电脑就变丑HTML 的字体渲染依赖于操作系统一个网页在 Windows 上显示微软雅黑很正常但拿到 Mac 上就变成了苹方再拿到 Linux 上可能直接回退为默认无衬线字体。整个排版的感觉可能会完全不同。我现在的习惯是给 body 设置一个稳妥的字体栈font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;这个字体栈的意思是让浏览器优先使用当前系统最合适的中英文字体避免为了一种字体而统一指定。如果你的演示里需要展示代码块代码区域单独设置等宽字体栈code, pre { font-family: JetBrains Mono, Fira Code, Consolas, Courier New, monospace; }6.2 屏幕比例适配4:3 还是 16:9做演示前一定要先确认投影设备或大屏的比例否则你精心设计的页面很可能会被裁切或被拉伸变形。我常用的做法是在.slide容器上使用百分比布局加 flex 居中让内容在纵向尽量自适应。如果要求严一点可以加上媒体查询在特殊比例下调整字号media screen and (max-aspect-ratio: 4/3) { .slide h1 { font-size: 2.4rem; } .slide p { font-size: 1.2rem; } }6.3 图片资源内嵌别让必须联网成为断点用 HTML 做演示最容易忽略的事情就是资源依赖。如果你在页面里直接外链了网上的图片、图标库、甚至 CDN 上的图表脚本到了没有网络的环境整页的内容都会失联。我的建议是在正式演示之前把所有必要的资源本地化。图片转成 base64 内嵌是最笨但最保险的办法就是文件体积会增加一些图表库可以下载后放本地目录字体文件如果非用不可也最好下载下来用font-face引入。一次演示可能很短但现场出net::ERR_INTERNET_DISCONNECTED的尴尬项目方是不会理解的。6.4 用「一键返回顶部」这类热词提到的逻辑处理长演示如果你做的 HTML 演示页数很多比如超过 30 页那跳到上一页和逐页翻都不够高效。每次演示的时候你可能会想快速跳回开头。这就是网络热词里html一键返回顶部算法的用途变体。我在较大型的演示项目里一般会加两个快捷键// 按 Home 键回到第一页 // 按 End 键跳转到最后一页同时还可以做一个缩略图导航栏把每个 slide 的标题列出来点击即可跳转。这在 QA 环节特别有用——观众问刚才第三部分提到的问题能再展开吗你鼠标一点缩略图就切回去了不用狂按十几下上一页。6.5 在 HTML 演示中嵌入图表库的注意事项如果你决定在演示里放可交互图表目前最主流的搭配是 ECharts。ECharts 的引入方式很简单通过 CDN 或者 npm 都行但演示场景我更推荐本地引入方法上节提到过。图表的数据要确保是演示时的真实快照不能当场拉取实时接口——万一接口抖动或者登录态过期结果就是白屏。还有一个小技巧让图表在页面从隐藏变为显示时主动调用一下resize()方法。因为很多图表库在页面隐藏状态下初始化宽度计算会出错导致显示错位const chartDom document.getElementById(chart1); const myChart echarts.init(chartDom); // 切页到本页时触发 window.addEventListener(resize, () myChart.resize());我经常会在.slide.active变化时观察图表容器是否可见不可见则延迟初始化可见则触发 resize这个细节能让图表永远保持正确的比例和位置。7. 从HTML 某种程度替代 PPT延伸出去不只是演示还有更大的展示空间最后想跳出演示这个框聊一聊 HTML 在内容展示上的更广泛应用。因为说到底HTML 的能力不是一个PPT 替代品能概括的。7.1 内部知识库和团队门户我见过不少团队把内部技术文档、运维手册、新人指南用 HTML 做成一个轻量知识库页面。相比于 Word 文档和 PPTHTML 的优势是检索方便、导航清晰、可以嵌入截图和演示视频还能像网页一样被浏览器收藏、分享链接。有些团队甚至用 VuePress 或 VitePress 这类静态站点生成器把 Markdown 文档直接转成 HTML 站点维护成本极低。7.2 数据报表和大屏这两年数据大屏的概念很火很多公司和项目都需要在办公室墙面上挂一个大屏实时展示业务数据。这种需求用 PPT 根本没法实现因为数据是动态变化的。但用 HTML 图表库就非常顺手——数据源更新页面自动刷新渲染丝绸般顺滑。前面热词里还有一个pyqt5显示html这其实也印证了一个趋势就算你是做桌面应用的也可以借助 HTML 来做富文本、图表和复杂界面的渲染然后用 PyQt5 的QWebEngineView嵌入到应用窗口中。这是 HTML 作为一种通用渲染方案在跨界使用中的体现。7.3 邮件和通知页面html邮件也是网络热词中的高频词。规范的 HTML 邮件可比纯文本邮件和截图PPT有表现力多了产品更新公告、活动邀请函、周报邮件模板都可以用 HTML 来写。虽然邮件客户端的 HTML 支持比较古老table 布局、inline style但掌握基本要领之后效果远超纯文本。7.4 个人博客、简历、作品集今天这个时代个人品牌和技术沉淀越来越重要。用 HTML/CSS/JS 做一个个人网站或者作品集既能展示你的内容也让你的技术能力本身成为内容的一部分。这比用 PPT 做自我介绍要更有说服力——我的设计理念就在我的页面里。从这些延伸场景就能看出HTML 的某种程度替代远远不止 PPT它是一种底层的内容呈现基础设施。你把它当作简单的PPT 竞品那格局就小了。8. 我的真实体会与选型建议聊到这里想认真总结一下我自己在HTML 代替 PPT这件事上的选型判断希望能给你一个可以落地的参考。先明确一个结论如果你是独立完成演示内容且对排版有较高要求或者演示中需要交互、数据可视化、跨平台切换并且你的演示对象更看重内容质量和呈现效果而不是模板规范那 HTML 一定值得你尝试。反之如果演示稿需要多人长期协作、公司有严格的 VI 模板规范、需要频繁打印那 PPT 还是更稳妥的选择。我的个人习惯是两者并存、按场景调取。对外正式度高的汇报用 PPT因为要过品牌和合规审核对内技术讨论、数据周报、产品评审用 HTML因为要响应灵活、信息密度高、可以动手交互验证公开演讲和分享也偏向 HTML因为可以做出更有记忆点的视觉呈现而且能顺手埋点统计访客的浏览行为——这一点 PPT 永远做不到。从时间成本来说如果你已经会一点 HTML/CSS/JS那么第一次做一份 10 页左右的 HTML 演示大约需要 2-3 个小时如果你完全零基础可能得先花一周补基础语法。这个投入在演示需求较多的朋友身上回报会特别明显——因为你做一次模板后面所有同类演示都只需要改内容和数据排版和交互都可以直接复用。关于工具链再补充一点。我自己用得最多的是手写 HTML/CSS/JS 基础模板 ECharts 图表 简单的 reveal.js在有复杂嵌套需求时。如果你已经有 Markdown 写作习惯Marp 是一个很好的低成本起点几乎零代码成本就能输出比较像样的 HTML 演示。无论是哪条路线先跑通一个最小方案再根据自己的场景去加功能效率最高。回到标题那个问题——HTML 到底能不能替代 PPT我的答案依然是某种程度能。这个某种程度取决于你的工作流、你的团队协作方式、你的内容类型以及你最看重的是什么。形式永远是服务于内容的HTML 和 PPT 都只是载体。真正重要的是你有没有把想表达的东西清楚地传递给了观众。工具是死的人是活的PPT 能做到的事HTML 大部分也能做到甚至做得更好HTML 做不到的事PPT 补上就好。两者从来不是擂台上你死我活的对手更多时候它们应该在你的工具箱里和平共处。如果你正想试试用 HTML 做一份演示别纠结于会不会太难。就从我上面那份最小模板开始替换成你自己的内容哪怕只是在本机打开自己看看效果也迈出了第一步。等你在浏览器里按下 F11 的那一刻你会立刻理解这种某种程度的分量。