HelloCard 网页贺卡生成器 —— 一个第一次发帖的萌新用华为云码道CodeArts2 小时造了一张能转发的网页祝福不是大佬不是工程师就是一个周末闲着没事、想做点小东西的普通人。如果你也是新手这篇文章可能正好是你需要的第一份能跟着抄完的实战。这次想搞个什么事情是这样的️ 周六下午下雨没事干。 朋友说“我下周生日能不能发我个特别点的祝福” 我心想朋友圈那种复制粘贴长文太敷衍了我得搞点新意。 灵光一现做一张能用网址转发的网页贺卡—— 朋友点开链接就是一张飘彩纸的卡片上面写着我对 TA 说的话。但问题是我会一点 HTML但没做过完整的应用我没钱买云服务器我不会后端、不会数据库我只有 2 个小时今晚约了饭抱着试试看的心态我打开了华为云码道CodeArtsAI IDE。结论先说2 小时 7 分钟后我把链接发给朋友了。朋友的反馈第一句是卧槽这是你做的总成本~3 元 Token 几乎为零的 OBS 存储费下面是这 2 小时的全程记录新手向能跟着复刻。1. 先聊聊网页贺卡是个啥为什么不需要后端这一段对资深的人是常识但对新人可能是关键认知。核心思路把祝福内容塞进 URL网址本身。像这样https://xxxxxx.obs.example.com/index.html?to小明from神秘人msg生日快乐theme朋友点开这个网址浏览器就能把?后面的内容读出来拼成一张卡片显示给 TA。✨这意味着❌ 不需要后端没人需要保存数据❌ 不需要数据库数据就在网址里❌ 不需要登录注册谁拿到链接谁看✅ 只要 1 个index.html文件就够了 那我就有信心了 —— 我会的那点 HTML 知识刚好够用。2. 进码道先和它约法三章打开码道华为云开发者空间里直接开网页版免下载。新建空项目HelloCard。 这一步关键中的关键先写 AGENTS.md再开口说话。这是码道4-5 月新特性「新增 AGENTS.md 文件支持」—— 简单说就是把我是谁、我喜欢什么、不要给我整啥花活写进一个文件AI 就会按这个规矩说话。我之前没用码道的时候AI 一上来就推荐我用 React让我装 Node结果一晚上没跑起来 。这次先写 AGENTS.md后面就再没翻过车。我在项目根目录新建AGENTS.md把游戏规则摆出来# HelloCard · AGENTS.md ## 一句话规则 只要 1 个 index.html 能搞定的绝不分文件、绝不引入框架、绝不上 npm。 ## 我是谁 - 编程菜鸟一枚会基础 HTML/CSSJS 还在入门 - 最讨厌装环境装一下午 ## 子代理 buddy搭子 每次回复请 - 用哥们儿/姐们儿般的轻松语气 - 关键代码必须给出可直接复制的完整版 - 解释一律用类比 / 大白话 ## 禁止 - ❌ React / Vue / 任何需要 build 的东西 - ❌ Node.js 后端 我把 AI 子代理叫做buddy搭子。一旦我 它码道就会用我设定的搭子语气回话比官方的严肃工程师模式亲切多了。保存。码道左下角弹了一行字✅ 已加载项目规约AGENTS.md子代理buddy已就位。OK开整 ✊。3. 直播实录 · 第 1 小时从零搭出能用的雏形接下来全是我和buddy的真实对话节选。〔我〕代表我说的话〔buddy〕代表 AI 的回复精简版。3.1 第一句话不要怂〔我〕buddy 我想做一个网页贺卡。用户在编辑页填送给谁/我是谁/祝福语/主题点按钮生成一个带参数的网址把这个网址发给朋友朋友打开就能看到一张漂亮的卡片。一个 index.html 搞定。先给我把骨架搭起来。〔buddy〕行嘞 ✌️。咱要的核心思路是编辑模式 展示模式 共用一个文件靠 URL 有没有参数来区分。没参数 → 显示编辑表单有参数 → 显示卡片来先抄这版骨架含 HTMLCSSJS 一体buddy 给了大约 70 行的初版我把代码复制到index.html双击打开。 屏幕上出现一个粉色背景中间一个白色卡片里面有 4 个输入框和一个生成专属链接按钮。 比我心里想的好看。3.2 让按钮真的能生成网址〔我〕我点了按钮没反应啊应该跳到带 ?toxxx 那个网址才对吧〔buddy〕对是我藏了个坑笑。我先让你看看 UI逻辑得自己加。来抄这段functionbuildUrl(data){constspnewURLSearchParams();Object.entries(data).forEach(([k,v])vsp.set(k,v));returnlocation.originlocation.pathname?sp.toString();}document.getElementById(gen).addEventListener(click,(){consttodocument.getElementById(to).value.trim();constfromdocument.getElementById(from).value.trim();constmsgdocument.getElementById(msg).value.trim();constthemedocument.getElementById(theme).value;if(!to||!msg){alert(收件人和祝福语不能空哦~);return;}consturlbuildUrl({to,from,theme,msg});location.hrefurl;// 跳到带参数的自己});解释一下哈URLSearchParams是浏览器内置的网址参数管家你给它喂键值对它帮你拼成?toxxxfromyyy自动处理中文转码不然中文会变乱码。location.href url让浏览器跳转等于跳到带参数的自己触发咱们下一步要写的展示模式。复制粘贴刷新。填了 “to朋友A” “msg生日快乐”点按钮。网址变了...index.html?to朋友Amsg%E7%94%9F%E6%97%A5%E5%BF%AB%E4%B9%90theme%7C生日快乐但是页面还显示编辑框 —— 因为我还没写展示模式。3.3 让页面判断自己该显示啥〔我〕现在网址变了但页面没变。怎么让它看到 ?toxxx 就切换成卡片〔buddy〕这就是启动判断的活儿加在script最开头functionreadParams(){constspnewURLSearchParams(location.search);return{to:sp.get(to)||,from:sp.get(from)||,theme:sp.get(theme)||,msg:sp.get(msg)||,};}constparamsreadParams();if(params.toparams.msg){showCard(params);// 有完整内容 → 展示卡片}else{bindEditor();// 否则 → 编辑模式}location.search就是网址里?开头的那一段。咱拿到to和msg有就切卡片没有就让用户编辑。逻辑像不像门口的保安看你有没有票决定让你进剧场还是去售票处。我笑出声这比喻好懂啊。3.4 卡片渲染 撒彩纸彩蛋〔我〕卡片要好看一点最好打开还能撒彩纸 ✨〔buddy〕嘿这才有过节的样子。来看showCard完整版functionshowCard(p){document.getElementById(editor).style.displaynone;document.getElementById(card).style.displayblock;const[emoji,greet](p.theme|||你好).split(|);document.getElementById(cEmoji).textContentemoji;document.getElementById(cGreet).textContent${escapeHtml(p.to)}${escapeHtml(greet)};document.getElementById(cMsg).textContentp.msg;document.getElementById(cFrom).textContentp.from?——${p.from}:;confetti();// 撒彩纸}撒彩纸用纯 CSS 动画 JS 生成 40 个小色块就行完整代码在文末。零依赖、纯原生符合咱 AGENTS.md 的死规矩。我刷新 —— 朋友 A 的卡片显示出来了40 片彩纸从屏幕顶部哗啦啦飘下来 第一次用代码做出过节感太爽了。4. 翻车现场朋友把我网页黑了得意洋洋发给朋友 B 试试。朋友 B 是个程序员10 秒后回我一句“你这有 XSS 漏洞 ” 一个新链接。我点开 ——页面弹出一个alert(被我黑啦)框。〔我〕buddy 朋友输入了scriptalert(被我黑啦)/script结果真弹框了怎么办〔buddy〕哥们儿别慌正常的成长痛 。这玩意儿叫XSS跨站脚本攻击打个比方你开了家面馆菜单上写客人写啥我就照做啥。客人写了把店关了你真去关店没了 —— 这就是 XSS。修法用户输入的字永远不要直接当 HTML 塞进页面。我看了下你的代码大部分地方我用的是.textContent自动转义安全但cGreet里我用了模板字符串拼接需要手动 escape 一下。加个工具函数functionescapeHtml(s){returnString(s).replace(/[]/g,c({:amp;,:lt;,:gt;,:quot;,:#39;}[c]));}然后凡是用户输入的东西在拼 HTML 之前都包一层escapeHtml(...)。我修完让朋友 B 再试 ——这次页面只是显示一行文字scriptalert(被我黑啦)/script不再执行了。️ 朋友 B 回“行及格了。”这一段是我整个 2 小时学到最值钱的东西之前以为 XSS 是大网站才有的事原来个人小项目稍不注意就中招AI 不仅修了还讲清了为啥会犯 怎么防范5. 第 2 小时用上记忆模块让搭子真的懂我 这一段我想专门聊聊码道的**「记忆模块」新特性** —— 第一次用震撼到我了。事情是这样我做完核心功能后把页面截图发给闺蜜看。她说颜色再粉一点、再温柔一点。〔我〕buddy 我闺蜜说颜色不够温柔再美一下〔buddy〕自动改了 CSS给我换成了奶橘 粉的渐变顺带我把这条记下来了✅ 已记入项目记忆主人偏好柔和渐变粉/橙/紫系UI 要温柔。 等等它把我的偏好记下来了下午我又开了新会话让buddy加一个复制链接按钮。它生成的代码里 ——按钮颜色直接用了我之前的粉色没问我一个字。〔我〕你怎么知道用粉色〔buddy〕记忆里写着呢哥们儿 。你之前说过温柔粉橙紫我默认就按这个来。第一次有AI 真的认识我的错觉。这就是码道的记忆模块不是只在这个对话里记住是写到项目里下次新开对话也认得不用我每次都重复我喜欢粉色、不要太正经…6. Skill 复用让复制按钮功能 30 秒就完成还有一个新特性叫Skills技能我也试了一下挺神奇。需求在卡片下方加一个 复制链接按钮点了就把当前网址复制到剪贴板。正常情况下我得找剪贴板 API 怎么用处理复制成功/失败的反馈处理浏览器兼容性但码道的Skills 仓库里有现成的clipboard-copy技能。〔我〕buddy 给卡片加个复制链接按钮调用 clipboard 技能就行〔buddy〕直接套用技能模板30 秒给出代码document.getElementById(copy).addEventListener(click,async(){try{awaitnavigator.clipboard.writeText(location.href);alert(已复制到剪贴板~);}catch{alert(请手动选中链接复制);}});这个技能我已经用过 200 次了直接套就行。try/catch是兜底用户用老浏览器没这个 API咱让 ta 手动选 —— 不让任何一个用户卡住。Skill 的价值把重复轮子沉淀下来新手不用从零学剪贴板 API、CORS、错误兜底站在前人肩膀上写代码。7. 部署上线华为云 OBS2 块钱不到 现在网页只在我电脑上能开朋友怎么访问最便宜的方案华为云 OBS 静态网站托管。 价格扫盲按官网当前价标准存储约0.0099 元 / GB / 月我这个index.html才 6 KB可以忽略流量按访问量算朋友圈分享几十次也就几分钱7 步搞定小白照搬登录华为云控制台 → 搜 「对象存储 OBS」创建桶桶名随便起但必须全网唯一比如hellocard-小写英文-数字区域选离你近的北京/上海/广州存储类别标准存储桶策略公共读进入桶 → 点上传对象→ 把index.html拖进去左侧菜单 →基础配置 → 静态网站托管 → 启用默认主页填index.html在「概览」页找到「访问域名」浏览器打开这个域名编辑一张贺卡试试把生成的链接发给朋友 ✅我的真实账单项目数据上传对象1 个文件6 KB当月预估存储费 0.01 元朋友圈预计访问量30 次左右当月预估流量费 0.5 元总计不到 1 块钱这意味着你做一个能上线的小项目月成本可能比一杯奶茶的零头还少。8. 真实演示把链接发给朋友是什么体验朋友 A 的生日卡链接化名https://hellocard-xxxx.obs.cn-xxxx.example.com/index.html?to朋友Afrom神秘人theme%7C生日快乐msg祝你新的一岁所有好运都不期而至所有想去的地方都顺利抵达。朋友 A 的真实反馈已经过她同意分享“卧槽这是你做的我以为你买了什么会员”“彩纸我看了 3 遍 哈哈哈哈”“把链接发给我老公他也想要一个” 那种“代码改善了一段真实关系”的感觉比写 100 个练习题都爽。9. 一个新人从这 2 小时里学到的 8 件事AGENTS.md 是新手最大的护身符。把别给我整 React写进去AI 就乖乖给你纯 HTML。URL 参数是个很被低估的伪后端。不需要数据库照样能做分享链接。URLSearchParams自动处理中文转码比手写encodeURIComponent省心。textContent比innerHTML安全。前者自动转义后者会执行 HTML是 XSS 元凶。XSS 不是大公司的事。哪怕个人小玩具朋友随手就能让你弹框。彩纸动画不需要任何库。CSSkeyframes 40 个div搞定。navigator.clipboard要包 try/catch。老浏览器没这 API得给用户手动复制的兜底路径。OBS 静态托管是新人部署最便宜的方案。花一杯奶茶钱够你的小网页跑半年。10. 给新人的 4 个建议别等学完才动手。我 HTML 才看了几节课照样做出能转发的小作品。开始本身就是最大的学习。第一句话先写 AGENTS.md。3 分钟的事能省后面 3 小时。每次让 AI用人话讲讲为什么。比代码本身重要 100 倍。做的东西要有人会用。朋友收到我贺卡的那一刻是我学代码以来最有成就感的瞬间。但我真的想说一句AI 编程工具的意义不是让程序员更快而是让原本不写代码的人也能创造点什么。闺蜜不会写代码但她下个月会用我教的方法给她爸做一张父亲节贺卡。朋友 A 已经把链接发给老公了。朋友 B 让我帮他做求婚倒计时页面我还没接怕翻车 。这些用代码改善关系的瞬间是我学习路上最大的奖励。如果你也是新手看到这里 —— 试试吧。打开华为云码道写一句buddy 我想做个 XX让它带你做。第一个能跑起来、能分享出去的小东西会改变你看代码的方式。 祝你做出第一张属于自己的贺卡。
HelloCard 网页贺卡生成器 —— 一个第一次发帖的萌新，用华为云码道（CodeArts）2 小时造了一张能转发的“网页祝福“
HelloCard 网页贺卡生成器 —— 一个第一次发帖的萌新用华为云码道CodeArts2 小时造了一张能转发的网页祝福不是大佬不是工程师就是一个周末闲着没事、想做点小东西的普通人。如果你也是新手这篇文章可能正好是你需要的第一份能跟着抄完的实战。这次想搞个什么事情是这样的️ 周六下午下雨没事干。 朋友说“我下周生日能不能发我个特别点的祝福” 我心想朋友圈那种复制粘贴长文太敷衍了我得搞点新意。 灵光一现做一张能用网址转发的网页贺卡—— 朋友点开链接就是一张飘彩纸的卡片上面写着我对 TA 说的话。但问题是我会一点 HTML但没做过完整的应用我没钱买云服务器我不会后端、不会数据库我只有 2 个小时今晚约了饭抱着试试看的心态我打开了华为云码道CodeArtsAI IDE。结论先说2 小时 7 分钟后我把链接发给朋友了。朋友的反馈第一句是卧槽这是你做的总成本~3 元 Token 几乎为零的 OBS 存储费下面是这 2 小时的全程记录新手向能跟着复刻。1. 先聊聊网页贺卡是个啥为什么不需要后端这一段对资深的人是常识但对新人可能是关键认知。核心思路把祝福内容塞进 URL网址本身。像这样https://xxxxxx.obs.example.com/index.html?to小明from神秘人msg生日快乐theme朋友点开这个网址浏览器就能把?后面的内容读出来拼成一张卡片显示给 TA。✨这意味着❌ 不需要后端没人需要保存数据❌ 不需要数据库数据就在网址里❌ 不需要登录注册谁拿到链接谁看✅ 只要 1 个index.html文件就够了 那我就有信心了 —— 我会的那点 HTML 知识刚好够用。2. 进码道先和它约法三章打开码道华为云开发者空间里直接开网页版免下载。新建空项目HelloCard。 这一步关键中的关键先写 AGENTS.md再开口说话。这是码道4-5 月新特性「新增 AGENTS.md 文件支持」—— 简单说就是把我是谁、我喜欢什么、不要给我整啥花活写进一个文件AI 就会按这个规矩说话。我之前没用码道的时候AI 一上来就推荐我用 React让我装 Node结果一晚上没跑起来 。这次先写 AGENTS.md后面就再没翻过车。我在项目根目录新建AGENTS.md把游戏规则摆出来# HelloCard · AGENTS.md ## 一句话规则 只要 1 个 index.html 能搞定的绝不分文件、绝不引入框架、绝不上 npm。 ## 我是谁 - 编程菜鸟一枚会基础 HTML/CSSJS 还在入门 - 最讨厌装环境装一下午 ## 子代理 buddy搭子 每次回复请 - 用哥们儿/姐们儿般的轻松语气 - 关键代码必须给出可直接复制的完整版 - 解释一律用类比 / 大白话 ## 禁止 - ❌ React / Vue / 任何需要 build 的东西 - ❌ Node.js 后端 我把 AI 子代理叫做buddy搭子。一旦我 它码道就会用我设定的搭子语气回话比官方的严肃工程师模式亲切多了。保存。码道左下角弹了一行字✅ 已加载项目规约AGENTS.md子代理buddy已就位。OK开整 ✊。3. 直播实录 · 第 1 小时从零搭出能用的雏形接下来全是我和buddy的真实对话节选。〔我〕代表我说的话〔buddy〕代表 AI 的回复精简版。3.1 第一句话不要怂〔我〕buddy 我想做一个网页贺卡。用户在编辑页填送给谁/我是谁/祝福语/主题点按钮生成一个带参数的网址把这个网址发给朋友朋友打开就能看到一张漂亮的卡片。一个 index.html 搞定。先给我把骨架搭起来。〔buddy〕行嘞 ✌️。咱要的核心思路是编辑模式 展示模式 共用一个文件靠 URL 有没有参数来区分。没参数 → 显示编辑表单有参数 → 显示卡片来先抄这版骨架含 HTMLCSSJS 一体buddy 给了大约 70 行的初版我把代码复制到index.html双击打开。 屏幕上出现一个粉色背景中间一个白色卡片里面有 4 个输入框和一个生成专属链接按钮。 比我心里想的好看。3.2 让按钮真的能生成网址〔我〕我点了按钮没反应啊应该跳到带 ?toxxx 那个网址才对吧〔buddy〕对是我藏了个坑笑。我先让你看看 UI逻辑得自己加。来抄这段functionbuildUrl(data){constspnewURLSearchParams();Object.entries(data).forEach(([k,v])vsp.set(k,v));returnlocation.originlocation.pathname?sp.toString();}document.getElementById(gen).addEventListener(click,(){consttodocument.getElementById(to).value.trim();constfromdocument.getElementById(from).value.trim();constmsgdocument.getElementById(msg).value.trim();constthemedocument.getElementById(theme).value;if(!to||!msg){alert(收件人和祝福语不能空哦~);return;}consturlbuildUrl({to,from,theme,msg});location.hrefurl;// 跳到带参数的自己});解释一下哈URLSearchParams是浏览器内置的网址参数管家你给它喂键值对它帮你拼成?toxxxfromyyy自动处理中文转码不然中文会变乱码。location.href url让浏览器跳转等于跳到带参数的自己触发咱们下一步要写的展示模式。复制粘贴刷新。填了 “to朋友A” “msg生日快乐”点按钮。网址变了...index.html?to朋友Amsg%E7%94%9F%E6%97%A5%E5%BF%AB%E4%B9%90theme%7C生日快乐但是页面还显示编辑框 —— 因为我还没写展示模式。3.3 让页面判断自己该显示啥〔我〕现在网址变了但页面没变。怎么让它看到 ?toxxx 就切换成卡片〔buddy〕这就是启动判断的活儿加在script最开头functionreadParams(){constspnewURLSearchParams(location.search);return{to:sp.get(to)||,from:sp.get(from)||,theme:sp.get(theme)||,msg:sp.get(msg)||,};}constparamsreadParams();if(params.toparams.msg){showCard(params);// 有完整内容 → 展示卡片}else{bindEditor();// 否则 → 编辑模式}location.search就是网址里?开头的那一段。咱拿到to和msg有就切卡片没有就让用户编辑。逻辑像不像门口的保安看你有没有票决定让你进剧场还是去售票处。我笑出声这比喻好懂啊。3.4 卡片渲染 撒彩纸彩蛋〔我〕卡片要好看一点最好打开还能撒彩纸 ✨〔buddy〕嘿这才有过节的样子。来看showCard完整版functionshowCard(p){document.getElementById(editor).style.displaynone;document.getElementById(card).style.displayblock;const[emoji,greet](p.theme|||你好).split(|);document.getElementById(cEmoji).textContentemoji;document.getElementById(cGreet).textContent${escapeHtml(p.to)}${escapeHtml(greet)};document.getElementById(cMsg).textContentp.msg;document.getElementById(cFrom).textContentp.from?——${p.from}:;confetti();// 撒彩纸}撒彩纸用纯 CSS 动画 JS 生成 40 个小色块就行完整代码在文末。零依赖、纯原生符合咱 AGENTS.md 的死规矩。我刷新 —— 朋友 A 的卡片显示出来了40 片彩纸从屏幕顶部哗啦啦飘下来 第一次用代码做出过节感太爽了。4. 翻车现场朋友把我网页黑了得意洋洋发给朋友 B 试试。朋友 B 是个程序员10 秒后回我一句“你这有 XSS 漏洞 ” 一个新链接。我点开 ——页面弹出一个alert(被我黑啦)框。〔我〕buddy 朋友输入了scriptalert(被我黑啦)/script结果真弹框了怎么办〔buddy〕哥们儿别慌正常的成长痛 。这玩意儿叫XSS跨站脚本攻击打个比方你开了家面馆菜单上写客人写啥我就照做啥。客人写了把店关了你真去关店没了 —— 这就是 XSS。修法用户输入的字永远不要直接当 HTML 塞进页面。我看了下你的代码大部分地方我用的是.textContent自动转义安全但cGreet里我用了模板字符串拼接需要手动 escape 一下。加个工具函数functionescapeHtml(s){returnString(s).replace(/[]/g,c({:amp;,:lt;,:gt;,:quot;,:#39;}[c]));}然后凡是用户输入的东西在拼 HTML 之前都包一层escapeHtml(...)。我修完让朋友 B 再试 ——这次页面只是显示一行文字scriptalert(被我黑啦)/script不再执行了。️ 朋友 B 回“行及格了。”这一段是我整个 2 小时学到最值钱的东西之前以为 XSS 是大网站才有的事原来个人小项目稍不注意就中招AI 不仅修了还讲清了为啥会犯 怎么防范5. 第 2 小时用上记忆模块让搭子真的懂我 这一段我想专门聊聊码道的**「记忆模块」新特性** —— 第一次用震撼到我了。事情是这样我做完核心功能后把页面截图发给闺蜜看。她说颜色再粉一点、再温柔一点。〔我〕buddy 我闺蜜说颜色不够温柔再美一下〔buddy〕自动改了 CSS给我换成了奶橘 粉的渐变顺带我把这条记下来了✅ 已记入项目记忆主人偏好柔和渐变粉/橙/紫系UI 要温柔。 等等它把我的偏好记下来了下午我又开了新会话让buddy加一个复制链接按钮。它生成的代码里 ——按钮颜色直接用了我之前的粉色没问我一个字。〔我〕你怎么知道用粉色〔buddy〕记忆里写着呢哥们儿 。你之前说过温柔粉橙紫我默认就按这个来。第一次有AI 真的认识我的错觉。这就是码道的记忆模块不是只在这个对话里记住是写到项目里下次新开对话也认得不用我每次都重复我喜欢粉色、不要太正经…6. Skill 复用让复制按钮功能 30 秒就完成还有一个新特性叫Skills技能我也试了一下挺神奇。需求在卡片下方加一个 复制链接按钮点了就把当前网址复制到剪贴板。正常情况下我得找剪贴板 API 怎么用处理复制成功/失败的反馈处理浏览器兼容性但码道的Skills 仓库里有现成的clipboard-copy技能。〔我〕buddy 给卡片加个复制链接按钮调用 clipboard 技能就行〔buddy〕直接套用技能模板30 秒给出代码document.getElementById(copy).addEventListener(click,async(){try{awaitnavigator.clipboard.writeText(location.href);alert(已复制到剪贴板~);}catch{alert(请手动选中链接复制);}});这个技能我已经用过 200 次了直接套就行。try/catch是兜底用户用老浏览器没这个 API咱让 ta 手动选 —— 不让任何一个用户卡住。Skill 的价值把重复轮子沉淀下来新手不用从零学剪贴板 API、CORS、错误兜底站在前人肩膀上写代码。7. 部署上线华为云 OBS2 块钱不到 现在网页只在我电脑上能开朋友怎么访问最便宜的方案华为云 OBS 静态网站托管。 价格扫盲按官网当前价标准存储约0.0099 元 / GB / 月我这个index.html才 6 KB可以忽略流量按访问量算朋友圈分享几十次也就几分钱7 步搞定小白照搬登录华为云控制台 → 搜 「对象存储 OBS」创建桶桶名随便起但必须全网唯一比如hellocard-小写英文-数字区域选离你近的北京/上海/广州存储类别标准存储桶策略公共读进入桶 → 点上传对象→ 把index.html拖进去左侧菜单 →基础配置 → 静态网站托管 → 启用默认主页填index.html在「概览」页找到「访问域名」浏览器打开这个域名编辑一张贺卡试试把生成的链接发给朋友 ✅我的真实账单项目数据上传对象1 个文件6 KB当月预估存储费 0.01 元朋友圈预计访问量30 次左右当月预估流量费 0.5 元总计不到 1 块钱这意味着你做一个能上线的小项目月成本可能比一杯奶茶的零头还少。8. 真实演示把链接发给朋友是什么体验朋友 A 的生日卡链接化名https://hellocard-xxxx.obs.cn-xxxx.example.com/index.html?to朋友Afrom神秘人theme%7C生日快乐msg祝你新的一岁所有好运都不期而至所有想去的地方都顺利抵达。朋友 A 的真实反馈已经过她同意分享“卧槽这是你做的我以为你买了什么会员”“彩纸我看了 3 遍 哈哈哈哈”“把链接发给我老公他也想要一个” 那种“代码改善了一段真实关系”的感觉比写 100 个练习题都爽。9. 一个新人从这 2 小时里学到的 8 件事AGENTS.md 是新手最大的护身符。把别给我整 React写进去AI 就乖乖给你纯 HTML。URL 参数是个很被低估的伪后端。不需要数据库照样能做分享链接。URLSearchParams自动处理中文转码比手写encodeURIComponent省心。textContent比innerHTML安全。前者自动转义后者会执行 HTML是 XSS 元凶。XSS 不是大公司的事。哪怕个人小玩具朋友随手就能让你弹框。彩纸动画不需要任何库。CSSkeyframes 40 个div搞定。navigator.clipboard要包 try/catch。老浏览器没这 API得给用户手动复制的兜底路径。OBS 静态托管是新人部署最便宜的方案。花一杯奶茶钱够你的小网页跑半年。10. 给新人的 4 个建议别等学完才动手。我 HTML 才看了几节课照样做出能转发的小作品。开始本身就是最大的学习。第一句话先写 AGENTS.md。3 分钟的事能省后面 3 小时。每次让 AI用人话讲讲为什么。比代码本身重要 100 倍。做的东西要有人会用。朋友收到我贺卡的那一刻是我学代码以来最有成就感的瞬间。但我真的想说一句AI 编程工具的意义不是让程序员更快而是让原本不写代码的人也能创造点什么。闺蜜不会写代码但她下个月会用我教的方法给她爸做一张父亲节贺卡。朋友 A 已经把链接发给老公了。朋友 B 让我帮他做求婚倒计时页面我还没接怕翻车 。这些用代码改善关系的瞬间是我学习路上最大的奖励。如果你也是新手看到这里 —— 试试吧。打开华为云码道写一句buddy 我想做个 XX让它带你做。第一个能跑起来、能分享出去的小东西会改变你看代码的方式。 祝你做出第一张属于自己的贺卡。
