“我要自学网”这个平台（现在通常指 51self.com）确实提供了一些免费的HTML5视频教程，可以作为你入门的起点，我建议你采用一个更系统、更全面的“组合拳”学习方法,这样效果会更好。
下面我为你量身打造一份详细的HTML5自学路线图和资源推荐，从入门到进阶,希望能帮助你高效学习。
第一阶段：准备工作与基础认知 (1-2周)
这个阶段的目标是搭建好学习环境,并理解网页最基本的概念。
学习目标：
- 了解HTML是什么,它在网页开发中的作用。
- 掌握基本的网页结构。
- 学会使用最核心的文本标签。
核心概念：
- HTML (HyperText Markup Language): 超文本标记语言，用标签来描述网页内容的结构和含义，而不是样式。
<h1>表示这是标题，<p>表示这是一个段落。 - CSS (Cascading Style Sheets): 层叠样式表，负责网页的视觉表现，比如颜色、字体、布局，虽然你现在主要学HTML,但必须知道它的存在。
- 浏览器: 用户查看网页的软件（如 Chrome, Firefox, Edge, Safari）,你需要一个现代浏览器来运行你的代码。
- 开发者工具: 按下
F12(或在浏览器中右键 -> 检查) 打开，这是你学习HTML/CSS最强大的工具,可以实时查看和修改网页代码。
必备工具：
- 代码编辑器： 不要用记事本！强烈推荐使用 Visual Studio Code (VS Code)，它免费、强大、插件丰富，是前端开发的事实标准。
- 推荐插件：
Live Server(可以实时预览你的网页修改，非常方便)。
- 推荐插件：
- 浏览器： Google Chrome 或 Microsoft Edge,它们的开发者工具功能最完善。
“我要自学网”上的资源：
- 你可以搜索 “HTML5入门教程” 或 “HTML5基础” 相关的视频课程。
- 学习重点： 仔细看视频里如何创建第一个HTML文件，如何写出
<!DOCTYPE html>,<html>,<head>,<body>这些基本结构，跟着视频敲一遍代码,感受一下。
第二阶段：HTML5核心标签与语义化 (2-3周)
这是HTML学习的核心,你需要熟练掌握各种标签。
学习目标：
- 熟练使用文本、列表、链接、图片等基础标签。
- 理解并掌握HTML5的语义化标签。
- 学会创建表单,与用户进行简单交互。
- 文本与排版：
<h1>-<h6>(标题),<p>(段落),<strong>(强调),<em>(斜体),<br>(换行),<hr>(水平线)。 - 列表：
<ul>(无序列表),<ol>(有序列表),<li>(列表项)。 - 链接与图片：
<a>(超链接),<img>(图片)。 - HTML5语义化标签（非常重要！）：
<header>: 页眉或区块的头部。<nav>: 导航链接区域。<main>: 页面的主要内容。<article>: 独立的文章内容。<section>: 文档中的独立区域。<aside>: 侧边栏或相关内容。<footer>: 页脚或区块的底部。- 为什么重要？ 代码可读性高、利于SEO（搜索引擎优化）、对屏幕阅读器等辅助技术更友好。
- 多媒体：
<video>(视频),<audio>(音频)，这是HTML5的一大亮点,告别了Flash！ - 表单：
<form>,<input>(各种类型如text, password, email, radio, checkbox),<button>,<label>,<select>,这是用户与网站交互的关键。
学习方法：
- 看视频 + 敲代码： 在“我要自学网”或下面推荐的网站上学习每个标签的用法，然后自己动手写一个简单的页面来实践,用语义化标签做一个个人简介页面。
- 多查文档： 遇到不记得的标签，不要只依赖视频，学会查阅 MDN Web Docs，这是最权威、最全面的Web技术文档。
第三阶段：实战项目与CSS入门 (2-3周)
理论学完后，必须通过项目来巩固,并开始学习CSS来美化你的页面。
学习目标：
- 能够独立完成一个静态的、内容丰富的网页。
- 掌握CSS的基本选择器和常用属性。
项目实践：
- 项目1：个人作品集/简历页面
- 使用你在第二阶段学的所有HTML5语义化标签来构建页面结构。
- 内容包括：个人介绍、技能列表、项目展示、联系方式等。
- 项目2：仿写一个简单的网站
- 找一个你喜欢的、结构简单的静态网站（比如某个电影介绍页、公司官网首页）。
- 尝试用HTML5标签把它“抄”下来,这个过程会让你对页面结构有更深的理解。
CSS基础入门：
- 选择器： 元素选择器 (
p), 类选择器 (.class), ID选择器 (#id),这是CSS的核心。 - 常用属性：
- 文本：
color,font-size,font-family。 - 盒模型：
margin(外边距),padding(内边距),border(边框)。 - 布局：
display(特别是block,inline,inline-block),float(浮动，虽然有些过时但仍需了解)。
- 文本：
- “我要自学网”上的资源：
- 在学HTML的同时，可以开始同步看 “CSS入门教程”，HTML是骨架，CSS是衣服,两者结合才能看到效果。
第四阶段：进阶与拓展 (持续学习)
当你能熟练做出静态页面后,就可以进入更高级的领域了。
学习目标：
- 掌握现代CSS布局技术。
- 了解JavaScript的基本交互。
- 学习版本控制工具。
- 现代CSS布局：
- Flexbox (弹性布局): 一维布局神器，用于对齐和分布容器内的项目,必须掌握！
- Grid (网格布局): 二维布局神器，用于构建复杂的页面整体布局,必须掌握！
- JavaScript基础：
- HTML负责结构，CSS负责样式，JavaScript负责行为（交互）。
- 学习变量、数据类型、函数、条件判断、循环等基本语法。
- 学习如何用JS操作DOM（文档对象模型），比如点击按钮后改变页面内容，这是让网页“活”起来的关键一步。
- 版本控制 Git：
- 学习使用
Git和GitHub，这是程序员协作和代码管理的必备工具，从git init,git add,git commit,git push这些基本命令开始。
- 学习使用
强烈推荐的学习资源（超越“我要自学网”）
“我要自学网”适合快速入门，但想要学得更深、更透,强烈建议你结合以下资源：
-
MDN Web Docs (Mozilla开发者网络)
- 网址： https://developer.mozilla.org/zh-CN/
- 特点： Web技术的“百科全书”，权威、准确、全面，遇到任何标签、属性、API，第一反应就应该是查这里,每个概念都有详细的解释和示例。
-
freeCodeCamp
- 网址： https://www.freecodecamp.org/chinese/
- 特点： 完全免费，项目驱动式学习，从HTML/CSS开始，一路讲到前端框架，每学完一个知识点，都要通过完成项目来检验,非常适合自学。
-
W3Schools
- 网址： https://www.w3schools.com/html/
- 特点： 非常适合初学者，内容简洁明了，每个知识点都有“试一试”的在线编辑器,可以立刻看到效果。
-
Bilibili (B站)
- 特点： 有大量免费且高质量的教学视频，搜索“HTML5零基础教程”、“CSS从入门到精通”等,可以找到很多UP主的系列课程。
- 推荐UP主（可以搜索看看）： 黑马程序员、尚硅谷、狂神说 等机构的公开课质量都非常高,系统且全面。
学习心态与建议
- 多敲代码，少看视频： 看视频只是输入，亲手敲代码才是真正的掌握，不要只看不练,那等于白学。
- 学会使用搜索引擎和开发者工具： 遇到bug，先尝试用
F12查看错误信息，然后复制错误信息去Google或百度搜索,这是程序员最重要的技能之一。 - 不要怕犯错： 编程就是在不断试错中进步的,每个错误都是一个学习机会。
- 保持耐心，循序渐进： 不要指望一周就成为大神，按照路线图，一步一个脚印,把基础打牢。
祝你学习顺利，早日成为前端高手！如果在学习过程中遇到具体问题,随时可以再来提问。
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
