技术负责类比
HTML内容结构房子的框架
CSS外观样式房子的装修
JavaScript行为交互房子的电器

LocalStorage

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

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

特点：

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

使用示例：javascript

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

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

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

JSON

全称：JavaScript Object Notation

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

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

长什么样：json

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

常见用途：

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

环境变量

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

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

为什么重要：

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

通常的用法：

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

域名

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

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

结构：

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

获取域名：

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

响应式设计

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

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

实现方式：

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

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