Make Your Pages

如何定制你的OC网页

写给有世界观但没碰过代码的人

你将学到

网页三件套是什么、怎么组织文件、三种建站方式、如何免费上线

前置要求

无。零基础。

预计用时

阅读 15 分钟

一个网页是什么

你在浏览器里看到的每一个页面，本质上就是三样东西：

名字干什么类比文件格式
HTML 内容骨架：文字、图片、链接、按钮 毛坯房（墙、门、窗户） .html
CSS 视觉样式：颜色、字体、间距、布局 装修（刷墙、铺地板、摆家具） .css
JS 交互行为：点击、切换、弹窗、动画 智能家居（开关灯、语音控制） .js
没有 CSS 和 JS 的网页也能打开——只是很丑、不能交互。很多 OC 展示页其实只需要 HTML + CSS。

HTML · 内容骨架

HTML 全称 HyperText Markup Language（超文本标记语言）。它用标签来描述内容：

<!DOCTYPE html>          <!-- 我是 HTML5 -->
<html>
  <head>                 <!-- 这是我（HTML5） 的头部 -->
    <meta charset="utf-8">        <!-- 这是编码（让中文不乱码） -->
    <title>我的OC站</title>        <!-- 这是名字，它会出现在浏览器顶部 -->
  </head>
  <body>                 <!-- 这是身体（给访问者看的） -->
    <h1>欢迎来到我的世界</h1>      <!-- 这是标题 -->
    <p>这是一段介绍文字</p>        <!-- 这是段落 -->
    <img src="oc.png">            <!-- 这里有张图片 -->
    <a href="page2.html">下一页</a> <!-- 这里有个链接 -->
  </body>
</html>

也许你会需要的常用标签速查

标签用途例子
<h1>~<h6>标题（h1最大，h6最小）<h1>角色介绍</h1>
<p>段落<p>灯儿是STEM首席研究员。</p>
<img>图片<img src="insden.png">
<a>链接<a href="https://...">点这里</a>
<div>容器（装其他元素的盒子）<div class="card">...</div>
<ul> <li>无序列表<ul><li>项目一</li></ul>

Have a try!

你可以修改左边（上方）的 HTML 代码，然后点击「运行」看右边（下方）的效果：

HTML 盒子

CSS · 视觉样式

CSS 全称 Cascading Style Sheets（层叠样式表），所有 CSS 都是同一个格式：

选择器 {
  属性: 值;
}

选择器 = 选择你需要改的 属性 = 改什么 值 = 改成什么样

你应该也会需要的选择器速查表

写法选中什么例子
h1所有 h1 标签h1 { color: red; }
.card所有 class="card" 的元素.card { padding: 16px; }
#headerid="header" 的那一个元素#header { height: 60px; }
.card pcard 里面的 p 标签.card p { color: gray; }
a:hover鼠标悬停时的链接a:hover { color: orange; }

HTML盒子

每个HTML元素都是一个盒子！从内到外：内容 → padding（内边距） → border（边框） → margin（外边距）

┌─────────── margin ──────────┐
│ ┌──────── border ────────┐  │
│ │ ┌───── padding ─────┐  │  │
│ │ │                    │  │  │
│ │ │    你的内容在这     │  │  │
│ │ │                    │  │  │
│ │ └────────────────────┘  │  │
│ └─────────────────────────┘  │
└──────────────────────────────┘

Have a try!

修改 CSS 属性值查看变化：

CSS 盒子

JavaScript · 交互行为

JavaScript 的作用是让页面「动起来」 核心逻辑：找到元素 → 对它做点什么。

// 例如：找到 id 为 btn 的按钮，点击时弹窗
document.getElementById('btn').onclick = function() {
  alert('你好！');
};

// 尝试修改页面上的文字
document.getElementById('name').textContent = '灯儿';

// 根据条件做不同的事
if (temperature < 20) {
  console.log('Tower A 八楼正常温度');
}

Have a try！

JavaScript 盒子

文件是怎么组织的

最简单的静态网页：

My Pages/
├── index.html      ← 首页（浏览器默认打开这个）
├── style.css       ← 样式
└── oc.png          ← 图片

再复杂一点！（比如这是一个论坛）：

My pages/
├── index.html      ← 入口页面
├── css/
│   └── style.css   ← 全局样式
├── js/
│   ├── app.js      ← 主逻辑
│   ├── data.js     ← 数据（帖子、角色、回复）
│   └── api.js      ← 支持接入AI 的聊天接口
└── assets/         ← 图片、字体
index.html 是特殊文件名——当你访问 xxx.pages.dev 时，服务器自动找这个文件。所以首页必须叫这个名字。

Java ≠ JavaScript

JavaJavaScript
诞生1995，Sun Microsystems1995，Netscape 浏览器
关系完全无关。名字像是因为蹭热度。
用在哪安卓App、银行后端、企业系统网页交互、网页动画、网页一切
类比正式公文便利贴
做OC网站× 不需要！✓ 就是它！
JavaScript 原名叫 Mocha，后来改叫 LiveScript，最后因为 Java 当年很火，Netscape 为了蹭热度硬改成了 JavaScript。这个营销决策祸害了整个行业三十年。

JSON 是什么

JSON = JavaScript Object Notation。一种数据格式，长得像 JS 但不是代码：

JavaScript 对象JSON
var oc = {
  name: "这是一个名字",
  age: 27
};
 
{
  "name": "这是一个名字",
  "age": 27
}

区别：JSON 的键名必须加上双引号，不能有注释、不能执行，它只是一张纸条:)

API 是什么

API = 两个程序之间说话的方式。你输入文字 → 通过 API 发给 AI → AI 返回结果。

详细的 API 使用教程会在「Vibe Coding」章节中展开。

做网页需要后端吗

前端后端
跑在哪用户的浏览器里服务器上
语言HTML / CSS / JSPython / Node / Java…
能做什么展示页面、交互存数据、处理请求、登录验证
OC网站需要吗✓ 永远需要× 大概率不需要
你的静态网页站几乎（肯定）是纯前端——它的所有内容都写在 HTML/JS 文件里，不需要服务器，也正是因为这个它有免费部署在 Cloudflare Pages 上的机会

施工中 · 后续章节：Obsidian + Digital Garden / Astro / Vibe Coding / 部署教程