第一阶段：心态准备与环境搭建 (1-2 天)
在开始写代码之前,我们需要做好准备工作。
树立正确心态
- 不要怕犯错：代码写错是家常便饭，浏览器开发者工具是你的好朋友，它会帮你找出问题。
- 保持耐心：学习是一个循序渐进的过程，不要期望一天就能学会所有东西。
- 多动手，少看：看十遍教程，不如自己亲手敲一遍代码，遇到问题，解决问题，这个过程才是学习。
准备工作：三件套
你只需要电脑上安装一个现代浏览器（如 Chrome、Firefox、Edge）和一个简单的文本编辑器。
- 浏览器：推荐 Google Chrome，它自带的 开发者工具 非常强大，是我们调试和学习的好帮手。
- 文本编辑器：不要用记事本！推荐使用专业的代码编辑器，它们有语法高亮、自动补全等功能，能极大提升效率。
- 强烈推荐：Visual Studio Code (VS Code)：免费、强大、插件丰富，是目前前端开发的主流选择。
- 其他选择：Sublime Text, Atom (已停止维护，不推荐新手)。
第二阶段：HTML5 基础入门 (1-2 周)
这是核心学习阶段,你需要理解 HTML 是什么，以及它的基本结构。
第 1 步：认识你的第一个 HTML 文件
- 在你的电脑上新建一个文件夹,比如命名为
my-first-webpage。 - 用 VS Code 打开这个文件夹。
- 在 VS Code 中，新建一个文件，命名为
index.html。.html后缀非常重要，它告诉浏览器这是一个网页文件。 - 在
index.html文件中，输入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>
保存文件,然后用 Chrome 浏览器打开它（可以直接在文件上右键 -> 用 Chrome 打开），恭喜你，你创建了第一个网页！
第 2 步：理解代码结构
<!DOCTYPE html>：告诉浏览器使用 HTML5 标准来解析这个文档。<html>：根元素，所有其他元素都包含在其中。lang="zh-CN"声明了网页的语言是中文。<head>：头部，包含网页的元信息（比如标题、字符编码、引入的 CSS 等），这些内容不会直接显示在页面上。<title>：网页的标题，会显示在浏览器标签页上。<body>：主体，包含所有在网页上可见的内容，比如文字、图片、链接等。
第 3 步：学习常用 HTML 标签
这是学习的重点,HTML 的本质就是用“标签”来“标记”内容的结构和含义。
| 标签名称 | 描述 | 示例 |
| :--- | :--- | :--- || <h1> 到 <h6>，表示六级标题，<h1> 最重要 | <h1>主标题</h1> |
| 段落 | <p>，定义一个文本段落 | <p>这是一个段落。</p> |
| 链接 | <a>，用于创建超链接 | <a href="https://www.google.com">访问谷歌</a> |
| 图片 | <img>，在页面上显示图片，src 是图片地址，alt 是替代文本 | <img src="image.jpg" > |
| 列表 | <ul> (无序列表), <ol> (有序列表), <li> (列表项) | <ul><li>苹果</li><li>香蕉</li></ul> |
| 按钮 | <button>，创建一个可点击的按钮 | <button>点击我</button> |
| 换行 | <br>，强制换行 | 第一行<br>第二行 |
| 水平线 | <hr>，创建一条水平分割线 | |
| 强调 | <strong> (重要强调，通常显示为粗体), <em> (文本强调，通常显示为斜体) | <strong>重要内容</strong> |
动手练习：尝试用这些标签组合成一个简单的个人介绍页面。
第三阶段：HTML5 语义化与新增标签 (1 周)
HTML5 引入了许多新的语义化标签，让代码结构更清晰，对搜索引擎和屏幕阅读器更友好。
核心语义化标签
这些标签用来替代以前滥用 <div> 的场景，让页面结构一目了然。
| 描述 | |
|---|---|
<header> |
页面或区域的头部，通常包含 logo、导航等。 |
<nav> |
导航链接的容器。 |
<main> |
页面的主要内容，一个页面中只有一个 <main>。 |
<article> |
单元，比如一篇博客文章、一条新闻。 |
<section> |
文档中的一个区域，通常包含一个主题。 |
<aside> |
侧边栏或与主要内容相关但可以独立分离的内容。 |
<footer> |
页面或区域的底部，通常包含版权信息、联系方式等。 |
动手练习：把你之前做的个人介绍页面，用这些语义化标签重新组织一下。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的个人主页</title>
</head>
<body>
<header>
<h1>张三的个人主页</h1>
<nav>
<a href="#about">关于我</a> | <a href="#contact">联系方式</a>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<p>你好，我是张三，一名热爱编程的学生...</p>
</section>
</main>
<footer>
<p>© 2025 张三. All rights reserved.</p>
</footer>
</body>
</html>
第四阶段：表单与多媒体 (2-3 天)
网页不只是展示信息,还需要与用户交互。
表单
表单用于收集用户输入,核心是 动手练习：创建一个简单的注册表单。 HTML5 让在网页中嵌入音视频变得非常简单。 动手练习：找一个 当你掌握了以上内容后,就可以开始下一步了。 HTML 只是负责，一个完整的网页还需要： CSS (层叠样式表)： JavaScript： 自学 HTML5 的路径可以概括为： 搭建环境 -> 理解基本结构 -> 掌握常用标签 -> 学习语义化 -> 练习表单和多媒体 -> 查阅文档 -> 动手做项目 -> 学习 CSS 和 JavaScript 保持好奇心,多动手，多思考，你一定能成功！祝你学习愉快！<form>
<form>：定义表单。
action：表单提交后数据发送到的 URL。method：提交方法，通常是 get (数据在 URL 中) 或 post (数据在请求体中，更安全)。<input>：最常用的输入控件。
type 属性决定了输入框的类型：text (文本), password (密码), email (邮箱), number (数字), checkbox (复选框), radio (单选框), submit (提交按钮) 等。<label>：为输入控件提供标签，点击标签可以聚焦到输入框，对用户更友好。<textarea>：多行文本输入框。<select> 和 <option>：下拉列表。<form action="/register" method="post">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">注册</button>
</form>
多媒体
<video>：嵌入视频。
src：视频文件地址。controls：显示播放控件。width / height：设置尺寸。<audio>：嵌入音频。
src：音频文件地址。controls：显示播放控件。.mp4 视频文件和一个 .mp3 音频文件，尝试将它们嵌入到你的网页中。
第五阶段：学习路径与进阶建议
如何持续学习？
接下来学什么？
