来源：https://github.com/datawhalechina/vibe-vibe

这些是做网页/应用时会遇到的技术术语。

HTML

全称：HyperText Markup Language（超文本标记语言）

一句话解释：定义网页「有什么内容」。

类比：就像房子的结构——哪里是客厅、哪里是卧室、哪里是厨房。

长什么样：

<h1>这是标题</h1>
<p>这是一段文字</p>
<button>这是按钮</button>

CSS

全称：Cascading Style Sheets（层叠样式表）

一句话解释：定义网页「长什么样」。

类比：就像房子的装修——墙壁什么颜色、沙发多大、灯放在哪。

长什么样：

h1 {
  color: blue;      /* 字体颜色 */
  font-size: 24px;  /* 字体大小 */
}

JavaScript

简称：JS

一句话解释：让网页「能动」，有交互。

类比：就像房子里的电器和开关——点开关灯会亮，按按钮电视会开。

长什么样：

// 点击按钮后弹出提示
button.onclick = function() {
  alert('你点击了按钮！');
}

HTML + CSS + JS 的关系

flowchart LR
    A[HTML] -->|结构| D[完整网页]
    B[CSS] -->|样式| D
    C[JavaScript] -->|交互| D

LocalStorage

一句话解释：浏览器提供的本地存储空间，数据保存在用户电脑上。

类比：就像你房间里的抽屉，东西放进去，关了门下次开门还在。

特点：

• 只存在用户自己的浏览器里
• 刷新页面、关闭浏览器数据都还在
• 换个浏览器或电脑数据就没了
• 适合存简单的用户偏好、记录等

使用示例：

// 存数据
localStorage.setItem('name', '小明');

// 取数据
const name = localStorage.getItem('name');  // '小明'

// 删数据
localStorage.removeItem('name');

JSON

全称：JavaScript Object Notation

一句话解释：一种数据格式，用来存储和传输数据。

类比：就像一种通用的「表格格式」，大家都能看懂。

长什么样：

{
  "name": "小明",
  "age": 25,
  "hobbies": ["读书", "跑步", "编程"]
}

常见用途：

• API 返回的数据
• 配置文件
• LocalStorage 存储复杂数据

环境变量

一句话解释：存放敏感信息（如密钥、密码）的地方，不会被写进代码里。

类比：就像保险箱。密码放在保险箱里，而不是贴在门上。

为什么重要：

• 密钥写在代码里，一旦代码公开，密钥就泄露了
• 环境变量不会被上传到 GitHub
• 是安全的最佳实践

通常的用法：

1. 创建 .env 文件存放敏感信息
2. 代码中通过 process.env.XXX 读取
3. .env 文件加入 .gitignore，不上传

域名

一句话解释：网站的地址，让人能找到你的网站。

类比：就像你家的门牌号。有了地址，别人才能找到你家。

结构：

https://www.example.com/about
  │       │      │      │
协议    子域名  主域名  路径

获取域名：

• 去域名注册商（如阿里云、腾讯云）购买
• 连接到你的部署平台

响应式设计

一句话解释：让网页在不同尺寸的屏幕上都能正常显示。

类比：就像水，能适应不同形状的容器。

实现方式：

• 使用百分比而不是固定像素
• 使用媒体查询针对不同屏幕写样式
• 使用 Flexbox/Grid 布局

为什么重要：
现在人们用手机、平板、电脑访问网站，响应式设计让所有用户都有好的体验。