学习路径概览
这个路径分为四个阶段,循序渐进，让你从“小白”成长为“熟练工”。
（图片来源网络，侵删）
第一阶段：准备工作与环境搭建 (约1-2小时)
在开始写代码之前,你需要准备好两样东西：
- 一个浏览器：你已经在用的 Chrome、Firefox 或 Edge 都可以，它们都有强大的开发者工具，是学习前端必备的。
- 一个代码编辑器：这是一个专门用来写代码的工具，它能让你的代码更清晰、更高效，并提供错误提示。
- 强烈推荐：Visual Studio Code (简称 VS Code)
- 优点：免费、强大、插件丰富、社区活跃，是目前前端开发最主流的编辑器。
- 安装：去 Visual Studio Code 官网 下载并安装即可。
- 基础配置：安装一些插件，如
Live Server（可以实时预览你的网页）、Chinese (Simplified) Language Pack（中文界面）。
这个阶段的目标是：打开 VS Code，新建一个文件，保存为 index.html，并能看到里面的内容。
第二阶段：HTML 基础语法与核心标签 (约5-8小时)
这是学习的核心部分,你需要掌握HTML的“骨架”和“血肉”，推荐按以下顺序学习：
-
HTML 简介与第一个网页
（图片来源网络，侵删）- 什么是HTML？它的作用是什么？
- 网页的基本结构：
<!DOCTYPE html>,<html>,<head>,<body>。 - 如何用VS Code的
Live Server插件运行你的第一个网页。
-
标签
- 标题：
<h1>到<h6>（最重要，用于SEO和结构） - 段落：
<p> - 换行：
<br> - 水平线：
<hr> - 文本格式化：
<strong>（强调）、<em>（斜体）、<mark>（标记）、<del>（删除线）等。
- 标题：
-
列表
- 无序列表：
<ul>+<li> - 有序列表：
<ol>+<li> - 定义列表：
<dl>+<dt>+<dd>
- 无序列表：
-
链接与图片
- 链接：
<a>标签（href属性是核心） - 图片：
<img>标签（src和alt属性是核心，alt对SEO和无障碍访问非常重要）
- 链接：
-
语义化标签
（图片来源网络，侵删）- 现代HTML的重点！ 使用
<header>,<footer>,<nav>,<main>,<article>,<section>等标签来构建网页结构。 - 为什么重要？ 提高代码可读性、对搜索引擎友好、方便维护。
- 现代HTML的重点！ 使用
-
表格
<table>,<tr>,<td>,<th>,<thead>,<tbody>,<caption>。- 虽然现在不常用来布局,但在展示结构化数据（如课程表、成绩单）时依然非常有用。
-
表单
<form>（action和method属性）- 输入框：
<input>（type属性决定输入类型，如text,password,email,submit等） - 文本域：
<textarea> - 下拉列表：
<select>+<option> - 按钮：
<button>
第三阶段：实战项目练习 (约10-15小时)
理论学完后,必须通过项目来巩固知识。
项目1：个人简介页面
- 目标：综合运用标题、段落、列表、图片、链接、语义化标签，创建一个关于你自己的网页，包含你的照片、姓名、爱好、技能列表、个人博客链接等。
项目2：仿写一个简单的静态网站
- 目标：模仿一个你喜欢的简单网站（如电影介绍页、产品介绍页），使用HTML标签尽可能完整地还原其结构和内容，这个练习能极大地提升你对网页结构的理解。
第四阶段：进阶与下一步 (持续学习)
当你能独立完成静态页面后,就可以进入下一步了。
- CSS (层叠样式表)：HTML负责结构，CSS负责“美”，学习如何设置颜色、字体、布局、响应式设计等。
- JavaScript：负责“交互”，让你的网页“活”起来，比如实现按钮点击、表单验证、动态内容加载等。
- 学习工具：使用浏览器的“开发者工具”（F12）来调试和检查你的网页。
优秀视频教程推荐
以下推荐的教程都是免费、高质量且适合初学者的。
国内推荐 (中文，适合零基础)
-
B站 - 遇见狂神说
- 课程：HTML零基础入门
- 优点：狂神的教学风格非常有趣，节奏快，信息密度高，能快速带你入门，建立信心，非常适合作为第一门入门课。
-
B站 - 尚硅谷
- 课程：HTML+CSS基础入门
- 优点：尚硅谷的课程非常系统和严谨，讲解细致，配有PPT和笔记，适合喜欢系统化学习、追求扎实基础的同学。
-
B站 - 黑马程序员
- 课程：HTML5+CSS3基础入门
- 优点：同样是老牌培训机构，课程质量有保障，讲解清晰，案例丰富，跟着敲一遍会有很大收获。
国外推荐 (英文，有中文字幕，质量极高)
-
freeCodeCamp
- 课程：Responsive Web Design 证书课程
- 优点：强烈推荐！ 完全免费，项目驱动式学习，你不需要看完所有视频，而是通过完成一个个小项目来学习，它不仅教你HTML，还整合了CSS和JavaScript，让你在实战中掌握前端三件套，社区支持非常好。
-
Traversy Media
- 课程：HTML Crash Course For Absolute Beginners
- 优点：Brad Traversy 是YouTube上的知名编程导师，这个视频非常精炼，大约2小时就能带你过完HTML的核心知识点，节奏快，适合有一定学习能力、想快速上手的人。
-
The Net Ninja
- 课程：HTML Tutorial
- 优点：课程被分成一个个短小精悍的视频（每个5-10分钟），非常适合利用碎片时间学习，讲解清晰，循序渐进，非常适合初学者。
学习小贴士
- 一定要动手敲代码：看视频十遍，不如自己动手敲一遍，不要只看不练，这是学习编程的大忌。
- 多使用开发者工具：在浏览器中按
F12打开开发者工具，你可以实时修改HTML和CSS，并立即看到效果，这是最高效的学习和调试方式。 - 学会查文档：遇到不认识的标签或属性，第一反应不是去搜视频，而是去查官方文档，推荐 MDN Web Docs，它是前端开发者的“新华字典”，权威且准确。
- 不要怕犯错：代码报错是常态，学会阅读错误信息，并用搜索引擎解决问题，这是程序员的核心技能之一。
祝你学习愉快,早日成为前端大神！
