前端网页开发学习（HTML + CSS + JS）——实战向学习路径
这是一篇极简但完整的实战向学习路径，目标是让你在 1–3 个月内（每天 2–4 小时）从零到能独立完成中高级响应式网页、常见交互效果和动态页面。
一、先明确目标与学习顺序（非常重要）
最有效的顺序（不要打乱）：
- HTML 基础 + 语义化（1 周）
- CSS 基础 → 布局 → 现代写法（2–4 周）
- CSS 进阶 + 响应式 + 常见特效（2–3 周）
- JavaScript 基础 + DOM 操作（3–4 周）
- JavaScript 进阶 + 事件 + 异步（3–4 周）
- 综合项目 + 真实案例（持续进行）
二、核心知识清单（带掌握标准）
1. HTML（目标：写出结构清晰、语义良好的页面）
必须掌握：
- 基本结构：
<!DOCTYPE html>、<html>、<head>、<body> - 常用语义标签：
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> - 表单：
<form>、<input type="...">、<label>、<select>、<textarea>、<button> - 多媒体：
<img>（srcset、sizes）、<picture>、<video>、<audio> - meta 标签（charset、viewport、SEO 相关）
- 字符实体 & 特殊符号
- HTML5 新增：
<canvas>、<svg>、<datalist>、<progress>、<meter>
掌握标准：能手写一个标准的博客页面结构（含 header/nav/main/article/aside/footer），语义正确。
2. CSS（目标：能做出任何主流网页布局和常见视觉效果）
阶段 1：基础语法与盒模型
- 选择器（id、class、后代、子代、相邻、属性、伪类、伪元素）
- 盒模型（width/height、padding、border、margin、box-sizing）
- 颜色（hex、rgb、rgba、hsl、hsla、currentColor）
- 字体（font-family、font-weight、font-size、line-height）
- 文本（text-align、text-decoration、text-transform、letter-spacing、word-spacing）
- background（颜色、图片、渐变、定位、大小）
- display（block、inline、inline-block、none）
- 定位（position：static/relative/absolute/fixed/sticky）
阶段 2：现代布局（必须精通）
- Flexbox（最常用布局方式）
