1. 从零搭一个能调用 API 的 HTML 网页到底难在哪很多人第一次听到「用 HTML 搭网页」时脑子里浮现的是写几行标签、点开浏览器就能看到画面。这没错纯静态页面确实简单。但一旦你想让这个网页「活」起来——比如输入一句话点个按钮页面就能调用大模型返回结果——问题就来了API Key 放哪请求怎么发跨域报错怎么办密钥会不会被看到我见过太多零基础的朋友卡在这一步。他们能照着教程写出一个问候按钮但把fetch一加进去浏览器控制台立刻飘红然后就开始怀疑自己是不是不适合写代码。其实不是能力问题是缺一个「从静态页到可调用 API」的完整骨架。这篇要解决的就是这件事。我会带你用纯 HTML 原生 JavaScript搭一个最小可用的网页页面上有一个输入框、一个按钮、一块结果显示区点击按钮后通过 TaoToken 的统一 Key 通道调用模型接口把返回内容渲染到页面上。全程不需要框架、不需要构建工具一个index.html加一个settings.json就能跑。适合谁看完全没接触过前端、但想亲手跑通一次 API 调用的人或者你已经会写静态页面但一直没搞明白「网页怎么安全地调接口」的人。读完你能得到一个可以直接复制、本地双击就能打开的完整骨架以及一套后续扩展的思路。核心检索词先明确HTML 网页、统一 Key、API 通道、最小可运行骨架。下面按「先讲通道、再给代码、最后排错」的顺序来。2. TaoToken 统一 Key 与 API 通道的前置准备在写代码之前得先把「钥匙」和「门」准备好。TaoToken 在这里扮演的角色是一个统一的 API 接入通道你不需要为每个模型单独申请密钥、记不同的域名和参数格式而是用一套 Key、一个入口地址就能调用多种模型。对新手来说这省掉了大量「配置地狱」。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。进去之后注册账号这一步和普通网站注册没区别邮箱加密码即可。注册完进入控制台创建 API Key。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。在控制台里找到 API Keys 管理页点新建复制那串以sk-开头的字符串。这串东西就是你的身份凭证后面所有请求都要带上它。注意API Key 等同于密码。不要把它提交到公开的 Git 仓库不要贴在论坛或聊天群里。本地练习阶段放在配置文件里没问题但上线前一定要改成后端代理。API 的基础地址是 https://taotoken.net/api 注意这个地址不带任何查询参数是纯粹的接口根路径。请求时通常在这个根路径后面拼接具体的端点比如对话补全的路径。具体端点以接入文档为准文档地址https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果你只是想先在网页上验证模型能不能通不想写代码可以直接用模型对话页面试一句https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。输入一句话看有没有正常返回能返回就说明 Key 和通道都没问题再回来写 HTML 就心里有底了。3. 可直接复制的 index.html 与 settings.json 配置这一节是全文的核心代码可以直接抄。我把它拆成三块页面结构、样式、脚本逻辑。为了让你少踩坑我把配置项单独抽成一个settings.json这样换 Key、换模型时不用翻 HTML。3.1 settings.json 配置片段先建一个settings.json放在和index.html同一个目录下{ apiBase: https://taotoken.net/api, apiKey: sk-你的Key粘贴在这里, model: 你的模型名称, endpoint: /v1/chat/completions }三个字段说明一下apiBase是通道根地址固定不变apiKey换成你在控制台复制的那串model填你要调用的模型标识具体可选项看接入文档endpoint是对话补全的路径以文档为准。注意浏览器直接读取本地settings.json会因为同源策略被拦所以下面的 HTML 里我会把配置内联成一个对象settings.json作为「配置参考」保留方便你后续迁移到后端时使用。这是新手最容易困惑的点先记住结论本地双击打开的页面读不了同目录的 json 文件。3.2 完整 index.html 骨架新建index.html把下面整段复制进去!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title简易 API 调用网页/title style body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 0; } header { background-color: #4CAF50; color: white; text-align: center; padding: 1em 0; } main { padding: 2em; max-width: 720px; margin: 0 auto; } textarea { width: 100%; height: 90px; padding: 0.5em; box-sizing: border-box; font-size: 14px; } button { margin-top: 1em; padding: 0.6em 1.4em; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 15px; } button:hover { background-color: #45a049; } button:disabled { background-color: #9e9e9e; cursor: not-allowed; } #result { margin-top: 1.5em; padding: 1em; background: #fff; border: 1px solid #ddd; min-height: 60px; white-space: pre-wrap; line-height: 1.6; } /style /head body header h1简易 API 调用网页/h1 /header main p输入你的问题/p textarea idpromptInput placeholder例如用一句话解释什么是 HTML/textarea button idsendButton发送请求/button div idresult等待请求……/div /main script // 本地练习用配置上线请改为后端代理 const CONFIG { apiBase: https://taotoken.net/api, apiKey: sk-你的Key粘贴在这里, model: 你的模型名称, endpoint: /v1/chat/completions }; const btn document.getElementById(sendButton); const input document.getElementById(promptInput); const result document.getElementById(result); btn.addEventListener(click, async function () { const prompt input.value.trim(); if (!prompt) { result.textContent 请先输入内容。; return; } btn.disabled true; result.textContent 请求中……; try { const resp await fetch(CONFIG.apiBase CONFIG.endpoint, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer CONFIG.apiKey }, body: JSON.stringify({ model: CONFIG.model, messages: [{ role: user, content: prompt }] }) }); if (!resp.ok) { const errText await resp.text(); result.textContent 请求失败状态码 resp.status \n errText; return; } const data await resp.json(); const content data.choices data.choices[0] data.choices[0].message data.choices[0].message.content; result.textContent content || 返回结构里没有找到内容字段请检查模型响应格式。; } catch (e) { result.textContent 发生异常 e.message; } finally { btn.disabled false; } }); /script /body /html这段代码做了几件事页面有一个文本域收集输入一个按钮触发请求一个div展示结果。脚本里用fetch发 POST 请求请求头带Authorization: Bearer加你的 Key请求体是标准的messages数组结构。返回后从choices[0].message.content里取文本渲染。3.3 关键参数对照表配置项作用示例值apiBase通道根地址https://taotoken.net/apiendpoint对话补全路径/v1/chat/completionsapiKey身份凭证sk-开头字符串model调用的模型标识以文档为准messages对话消息数组[{role:user,content:...}]把CONFIG里的apiKey和model换成你自己的保存文件。4. 本地打开验证与成功结果判断代码写完了怎么确认它真的通了分三步。第一步直接双击index.html浏览器会以file://协议打开。你会看到绿色标题栏、输入框、按钮和结果区。这一步先确认页面渲染正常样式没崩。第二步在输入框里写一句简单的话比如「用一句话解释什么是 HTML」点发送。按钮会变灰结果区显示「请求中……」。如果一切正常一两秒后结果区会显示模型返回的文本。第三步打开浏览器开发者工具按 F12切到 Network 面板再点一次发送。你会看到一条发往taotoken.net的请求状态码 200Response 里是 JSON。这一步是排查问题的关键只要这条请求出现了说明前端逻辑没问题剩下的就是参数或 Key 的问题。成功的结果长这样结果区出现一段通顺的中文回答Network 里那条请求状态 200Response 的choices数组里有内容。如果结果区显示「请求失败状态码 401」那是 Key 不对显示 404多半是endpoint路径写错了显示「发生异常Failed to fetch」通常是网络或跨域问题往下看排错章节。提示本地file://打开时部分浏览器对跨域请求限制较严。如果一直 Failed to fetch可以换用本地静态服务器打开比如在目录下执行python -m http.server 8000然后访问http://localhost:8000。这一步能解决大部分本地调试的跨域困扰。5. 本篇常见错误排查新手在这一步翻车的概率最高我把最常见的几类列出来对着改就行。401 UnauthorizedKey 错了或没带。检查Authorization头是不是Bearer加 Key中间有一个空格检查 Key 有没有多余空格或换行确认 Key 没有过期或被删除。404 Not Found路径拼错。apiBase和endpoint拼起来要正好是完整地址注意apiBase结尾没有斜杠endpoint开头有斜杠别拼成双斜杠或漏斜杠。400 Bad Request请求体格式不对。最常见的是messages写成了字符串而不是数组或者model字段缺失。对照第 3 节的代码检查。Failed to fetch / CORS 报错这是本地调试最烦的问题。原因是从file://发起的请求被浏览器安全策略拦了。解决办法是用本地服务器打开或者把请求逻辑挪到后端。生产环境绝对不能在前端直接放 Key一定要走后端代理。返回内容为空请求成功了但取不到文本。打印一下data看看结构不同模型的响应字段可能略有差异按实际结构调整取值路径。按钮一直灰着说明请求没结束。检查finally块有没有执行或者请求卡住了。可以在 Network 面板看请求是不是一直 pending。排错时如果拿不准回到接入文档对照参数https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。文档里有完整的请求示例和字段说明比猜要快得多。6. 后续扩展与统一 Key 的长期用法跑通这个最小骨架之后你能做的事情就多了。比如把结果区换成流式输出让文字一个字一个字蹦出来比如加一个历史记录区把多轮对话存下来比如把settings.json真正用起来改成后端读取配置、前端只调自己的接口。如果你打算长期做编码类或 Agent 类的项目反复手动配 Key、切模型会很烦。TaoToken 的 Coding Plan 就是为这种场景准备的可以理解为面向长期编码任务的通道方案入口在这里https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它适合那种「我要持续调用、不想每次都折腾配置」的用法。如果你更习惯在编辑器里直接对话式写代码Claude Code 的接入方式也有对应说明https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-codeutm_campaignrewrite 。把统一 Key 配进去就能在编码环境里直接调模型。回到这篇的主题一个 HTML 文件、一段配置、一次点击就能让网页和模型说上话。这个骨架本身很简单但它是后面所有复杂应用的地基。我建议你先原样跑通一遍确认结果区真的出现了模型返回的文字再动手改样式、加功能。跑通那一刻的确定感比看十篇教程都管用。
