Web 前端学习手记，算是一个随时查阅的基础文档。
概览
从零开始学习前端开发，涵盖 HTML 基础、CSS 样式与布局、JavaScript 编程三大模块。
HTML & CSS 基础
入门阶段，了解网页的基本结构与 CSS 样式基础。
CSS 布局与定位
深入学习盒子模型、定位方式以及现代布局技术。
CSS 动画与交互
使用 CSS 实现过渡动画与复杂形态变换。
JavaScript 基础
学习 JavaScript 的变量、条件、循环、函数等核心概念。
主要内容
| 章节 | 标题 | 内容简介 |
|---|---|---|
| 01 | 掌握盒子模型 | HTML 文档结构、常用标签、CSS 基础语法与属性 |
| 02 | CSS选择器 | 基础选择器、复合选择器、伪类与伪元素选择器 |
| 03 | 盒子模型与布局 | 盒子模型详解、元素显示类型、浮动布局 |
| 04 | 深入理解盒子模型 | 外边距折叠、盒子模型计算、box-sizing 属性 |
| 05 | 相对定位 | position: relative 的使用与偏移原理 |
| 06 | 绝对定位 | position: absolute 的定位上下文与包含块 |
| 07 | 固定定位 | position: fixed 实现固定导航栏等效果 |
| 08 | Flex布局 | 弹性盒子模型、主轴与交叉轴、常用属性 |
| 09 | Grid布局 | 网格布局、行列定义、网格区域与对齐 |
| 10 | 多列布局 | column 属性实现报刊杂志式多列排版 |
| 11 | transition属性制作CSS交互动画 | transition 过渡动画、时间函数与触发方式 |
| 12 | transfrom属性是元素位移及形变 | translate、rotate、scale、skew 变换 |
| 13 | 使用animation实现复杂形态过渡动画 | @keyframes、animation 属性与动画控制 |
| 14 | 网页与JavaScript | DOM 操作、事件处理、JavaScript 入门 |
| 15 | JavaScript变量与运算 | 变量声明、数据类型、运算符 |
| 16 | JavaScript条件语句与循环语句 | if/else、for、while 等流程控制 |
| 17 | JavaScript switch语句 | switch/case 语句与应用场景 |
| 18 | JavaScript函数 | 函数定义、参数、作用域、闭包 |
| 19 | JavaScript 数组，二维数组与对象 | 数组方法、二维数组、对象与 JSON |
TIP
文档内容以实践为主，建议配合代码练习加深理解。