HTML 基础
记录网页结构、常用标签、图片、链接、列表、语义化标签等内容。
- 页面基本结构
- 标题、段落、图片、链接
- header / main / section / footer
记录方式
Obsidian + 网页整理
先在 Obsidian 记录过程，再把重要内容整理到个人网站。
Categories
笔记分类
CSS 样式
记录颜色、间距、圆角、阴影、Flex、Grid、响应式和动画效果。
- margin / padding
- Flex 和 Grid 布局
- 深色模式和玻璃拟态
JavaScript 交互
记录点击事件、classList、localStorage、主题切换和设置面板逻辑。
- querySelector
- addEventListener
- localStorage 保存设置
Project Log
项目日志
第 1 阶段
创建个人主页
完成 index.html、style.css 和基础个人介绍区域。
第 2 阶段
添加导航、项目和时间线
页面结构从简单卡片升级成完整个人主页。
第 3 阶段
加入主题系统和视觉效果
实现深浅色、跟随系统、调色板、玻璃拟态设置面板、背景光斑和彩虹头像圈。
第 4 阶段
创建项目详情页和学习笔记页
网站开始从单页主页升级成多页面学习记录站。