Vibe Coding 网页知识
在 Vibe Coding 的世界里，虽然不用精通每一行程序语法，但如果对“网页是如何运作的”缺乏基础理解，就像是想当导演却分不清镜头与灯光。这篇教学将会介绍最核心也最基本的网页知识，让大家在指挥 AI 开发网页时，能更精准地传达指令，并在出错时知道该看哪里。
- 更多参考：Vibe Coding 全方位开发导读
- 如果使用 Vibe Coding 是要学 Python，请先阅读：Vibe Coding Python 必备知识
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
认识网址与路径
当使用提示词告诉 AI“帮我放一张背景图”时，或“超链接到指定网页”，AI 写出的程序码通常会包含一个“路径”。如果路径发生错误，网页就会出现破图 ( 缺少图片 ) 或链接错误的状况，因此必须要先了解下方这些常见的网址和路径知识。
延伸阅读：网页相对路径与绝对路径
网址 ( URL )：就像房子的门牌号码，必须符合规定才找得到网页或资源。
绝对路径：包含开头
http://或https://的完整的网址，精确指向目标，虽然可以都指向特定链接，不过一但有更新，就得修改全部绝对路径。相对路径：使用
./代表“目前这个文件夹”，../代表“往上一层文件夹”，通常网站的开发几乎都会使用相对路径，避免搬移资源时出现无法链接的状况，但这是 Vibe Coding 最常出错的地方。
静态网页 vs 动态网页
在网页的世界里，可概观分成两种网页“静态网页、动态网页”，建议新手从“静态网页”开始，如此一来能够更专注于界面视觉与互动，而不被复杂的数据库逻辑卡住，不过虽然使用 Vibe Coding 的大部分情形都是产生“静态网页”，但仍然必须要了解这些网页种类的差异，才能够更精准的向 AI 许愿。
延伸阅读：关于 HTML 与网页运作原理
| 特性 | 静态网页 ( Static Web Page ) | 动态网页 ( Dynamic Web Page ) |
|---|---|---|
| 定义 | 内容固定，像印刷品，所有人看到的内容都一样 | 内容会变，像互动电视，根据用户或时间显示不同内容 |
| 组成技术 | HTML、CSS、JavaScript ( 前端为主 ) | HTML、CSS、JS + 后端语言 ( Python、PHP ) + 数据库 |
| 加载速度 | 极快 ( 服务器直接传送现成文件 ) | 较慢 ( 需要服务器运算并从数据库抓取数据 ) |
| 互动功能 | 基本互动 ( 点击链接、简单动画 ) | 高度互动 ( 会员登录、购物车、留言系统 ) |
| 安全性 | 高 ( 没有数据库，较难被骇客攻击 ) | 需注意 ( 数据库可能有入侵风险 ) |
| 主机成本 | 低 ( 甚至有许多免费空间，如 GitHub Pages ) | 较高 ( 需要支援后端语言与数据库的服务器 ) |
| 适合场景 | 个人名片、产品介绍、活动一页式网站 | 社群平台、电商网站、内容管理系统 ( WordPress ) |
认识网页三本柱：HTML、CSS、JavaScript
在正式进入网页开发前，必须知道网页是由这三大核心技术组成：CSS、HTML 和 JavaScript，它们各自负责不同的任务，并相互协作以实现完整的网页功能：
- HTML：负责“定义网页的结构和内容”，使用标签来描述网页中的不同元素，可想像成静止的“全裸人体”。
- CSS：负责“控制网页的外观和版面”，使用选择器和属性来定义 HTML 里元素的样式，如颜色、字体、边框等，可想像成替全裸的人体加上“肤色、发色、化妆、衣物...等”装扮。
- JavaScript：负责“实现网页的动态效果和互动性”，透过操作 HTML 和 CSS，实现网页的互动功能或改变网页元素的外观和行为，可想像成赋予人体“认知、社交、互动”等能力。
认识网页 HTML 基本架构
即使 AI 帮你写好网页程序码，最少也要看得懂这 HTML 的基本架构，下方列出一些常用的 HTML 标签：
延伸阅读：HTML 教学、HTML 标签与架构
| 常用标签 | 说明 |
|---|---|
<head> |
网页的脑袋。放标题、字体设定、或是套用 CSS 的链接。放在里面的内容并不是让用户看的 ( 用户看不到 )，主要是让搜索引擎或社群爬虫有参考内容依据，因此对于 SEO 非常重要。 |
<body> |
网页的身体。所有要让用户看的文字、图片和内容都放在这里。 |
<h1> 到 <h6> |
标题，h1 最重要且最大，随后递减。 |
<p> |
段落文字，常用于一般文字内容。 |
<a> |
超链接，例如 <a href="網址">。 |
<img> |
图片，例如 <img src="圖片路徑" alt="圖片說明">。 |
<ul> 与 <li> |
项目列表，用于制作清单或导览列。 |
<table>、<tr>、<td> |
表格元素，用于制作多字段表格。 |
<div> |
块级区块，通常进行排版使用。 |
<span>、<strong>、<em> |
文字类型区块，放在文字里搭配样式强化重点。 |
<nav> |
导览列，语意化区块。 |
<main> |
主要内容，语意化区块。 |
<footer> |
页尾，语意化区块。 |
如何套用 CSS 与 JavaScript？
在网页里面套用 CSS 与 JavaScript 通常有三种形式，能够正确的套用，网页才能具有漂亮的设计感以及正确的功能。
内嵌式 ( Internal )：
直接把样式或指令写在 HTML 中，适合快速原型测试，这也是 Vibe Coding 产生网页程序码的基本写法 ( 因为用户常常会用错相对路径而导致网页无法顺利运作，所以 AI 会采用这种最保险的方法 )。
<head> <style> /* 這裡寫 CSS */ </style> </head> <body> <script> /* 這裡寫 JavaScript */ </script> </body>
外部链接 ( External )：
将样式与逻辑独立出来存放，这种做法不仅弹性好维护，更能保持程序码整洁，是各类型专案或正规开发的标准做法。
<head> <!-- 連結外部 CSS 檔 --> <link rel="stylesheet" href="外部 CSS 路徑"> </head> <body> <!-- 連結外部 JS 檔 --> <script src="外部 JS 路徑"></script> </body>
CDN ( 外部资源库 Content Delivery Network )：
CDN 就像是在全球各地都有“分仓库”，当美国的朋友看网页时，会从距离最近的美国服务器抓数据，而不是从台湾抓，加载速度会快非常多，例如 Google Fonts、Bootstrap 等标准资源都会使用 CDN 的方式，现在的主流部署工具都已经内建了全球 CDN，不需要额外设定就能享有极速。
<head> <!-- 範例：引用 Google Fonts 的字體 --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet"> </head>
认识响应式设计 ( RWD )
RWD 全名为 Responsive Web Design ( 响应式网页设计 )，早期开发者为了让手机用户有更好的体验，通常要制作一套独立的手机版网站，这种做法需要同时维护两份程序码，既费时又容易出错，因此在 2010 年，由设计师 Ethan Marcotte 提出了 RWD 的概念，主张网页应该像水一样，不论倒入什么形状的容器 ( 屏幕 )，都能自动调整布局。
随着移动设备的普及，RWD 也越来越重要，因为 RWD 网页有下列几个优势：
- 不论是桌机、平板还是手机，都共用同一套程序码，大幅降低开发与维护成本。
- 网页会根据屏幕宽度自动重新排列内容，用户不需要辛苦地手动放大缩小，拥有绝佳的用户体验。
- Google 明确指出，采用响应式设计的网站会在搜索结果中获得更好的排名 ( SEO )。
开发 RWD 网页需要有下列几种方式：
Viewport ( 视窗设定 )：
在
<head>撰写标签属性，让手机能正确缩放。<meta name="viewport" content="width=device-width, initial-scale=1.0">Media Queries ( 媒体查询 )：
使用 CSS 中负责“侦测屏幕大小”并改变样式的语法，参考“CSS @media 媒体查询 ( Media Queries )”。
/* 當螢幕寬度小於 600px 時（通常是手機） */ @media (max-width: 600px) { body { font-size: 20px; /* 讓文字變成 20px */ } }
认识常见的网页图片格式
下方列出在网页中常见的图片格式：
| 图形格式 | 副档名 | 透明 | 说明 |
|---|---|---|---|
| JPG ( JPEG ) | .jpg、.jpeg | 不支援 | 适合色彩丰富的照片，相容性最高。 |
| WebP | .webp | 支援渐层透明 | 现代网页首选。体积比 JPG 更小，画质更好。 |
| PNG | .png | 支援渐层透明 | 适合需要“透明背景”的图案或 Logo，画质好但文件较大。 |
| GIF | .gif | 仅单色透明 | 合简单的“动态图”。常用于表达简单的互动流程或幽默图案。 |
| SVG | .svg | 支援渐层透明 | 向量图形。不管怎么放大都不会糊，适合用程序码控制颜色的图示。 |
| Sprites 图形 | 支援各种图档格式 | 根据图档格式 | 将许多小图标拼成一张大图的技术。能大幅减少服务器请求次数，提升加载速度。 |
网页观察与除错
开发网页之后，有两种方式可以观察网页的程序码：
延伸阅读：如何观察 HTML 源代码
检视源代码：
查看网页源代码的方式很简单，使用 Chrome 浏览器打开网页，在网页上按下鼠标右键，选择“检视网页源代码”( Firefox 称作“检视源代码”，Safari 称作“显示网页源代码” )。
点选后就会打开一个新分页，分页里会呈现该网页的源代码，从中可以看到 HTML 的基本架构，以及各种标签组成的网页元素。
透过这个步骤查看的源代码属于“静态网页”源代码，如果网页里有动态内容，则不会透过这种方式显示。
打开浏览器控制台，检查网页：
如果要查看目前网页“真正的源代码”( 最终呈现样貌的源代码 )，则需要使用“检查网页”的方式，使用 Chrome 浏览器打开网页，在网页上按下鼠标右键，选择“检查”( Firefox 称作“检测”，Safari 称作“检阅元件” )。
点选后会在浏览器的下方或右侧 ( 可以点击里面的图示切换位置 )，打开一个可以拖拉大小的显示区块，使用 Chrome 浏览器点击“element”页签，就能看到完整的 HTML 源代码，此时也可使用鼠标点击网页元素，就能看到该元素的样式。
使用 Firebox 浏览器点击“检测器”页签，就能看到完整的 HTML 源代码以及网页元素。
使用 Safari 浏览器点击“元件”页签，就能看到完整的 HTML 源代码以及网页元素。
网页上线的开发环境与部署
在本地开发完成后，最后一步就是将网页部署，让全世界都可以观看这个网页，“部署”表示把网页文件上传到一台全天候运作的服务器，并取得一个专属的网址。如果不部署，网页就只能存在自己的电脑里，别人无法观看，根据的技术成熟度与网页类型，可以选择以下几种方式：
自动化托管平台 ( Vibe Coding 首选 )
目前最推荐给新手的方式，只需要把程序码同步到 GitHub，或直接将文件夹拖进去，网页就自动上线。
- Vercel 或 Netlify：不仅快速，且内建了全球 CDN 与自动 SSL (HTTPS) 凭证，完全免费。
- GitHub Pages：如果你已经学会使用 Git，这是存放个人静态作品集最专业且稳定的选择。
- Google 云端硬盘 + Google App Script：将云端硬盘作为网站服务器，适合简单展示，不适合正式网站。
租用虚拟主机或云端服务器 ( VPS / Cloud )
如果需要架设具备数据库的“动态网页”，或是想拥有完全的控制权，可以选择租用服务器。
- 虚拟主机 ( Shared Hosting )：适合简单的 WordPress 网站。
- VPS ( 虚拟专用服务器 )：如 Linode、DigitalOcean，月租约 5 美金起，需要自己安装系统环境。
- 云端龙头：AWS ( Amazon )、GCP ( Google Cloud )，功能强大但设定复杂，适合大型商业专案。
自己架设服务器 ( Self-hosting )
适合进阶“玩家”或是有安全性考量的企业，用家里的旧电脑、NAS 主机或Raspberry Pi ( 树莓派 )，透过固定 IP 或内网穿透技术开放给外网。
需要自行维护硬件、电费，以及处理最头痛的信息安全防护。
直接用 AI Canvas ( 画布 ) 分享网页的优缺点
在 Vibe Coding 的过程中，各种 AI 工具都有提供内建的 Canvas ( 画布 ) 直接预览与分享，虽然方便使用但有许多局限性，下方列出这种方式的优缺点：
优点：
- 极致速度：不需要额外设定，一键就能让伙伴看到目前的进度。
- 即时反馈：适合在讨论阶段快速确认视觉效果。
缺点：
- 非永久性：链接具有时效性，或仅供当前对话使用。
- 资源限制：无法绑定自定义网域 ( 如 oxxostudio.tw 等 ) ，且对外部图片或大型资源的加载稳定性较低。
- 不适合生产环境：若要作为正式作品集或产品，正式部署网页才是唯一首选。
小结
这篇教学介绍的网页基础知识，是 AI Vibe Coding 的“导航仪”，拥有这些基础知识后，下指令时就能说出更精确的“指令”，而不只是盲目测试，完成网页之后，也才能够正确又顺畅的分享自己的作品。
延伸阅读
Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:
- 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
- Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
- Vibe Coding 重要的准备工作：架构流程图
- Vibe Coding 网页必备知识：开发者的“沟通工具箱”
- Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
- Vibe Coding 固定网页样式：解决样式不一致的恼人问题
- Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
- Vibe Coding 玩家必备的 SVG 进阶操作指南
- Vibe Coding 字体指南：用文字风格定义网页灵魂
- 下载 Vibe Coding 网页程序码，掌握程序码的主导权
- Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
- Vibe Coding 实战：使用 GitHub 部署你的网页作品
- AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
- 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
- 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
- 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
- Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
- Vibe Coding 将 Google Drive 变身最强文件后端
- 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
- Vibe Coding 极速打造 LINE Bot 智能机器人
- Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
- Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
- Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
- Vibe Coding 实战：打造自己的英文单字卡！
微信扫码关注
抖音扫码关注