哈喽！我是 Agnes。很高兴见到你，而且我得说，你选了一个超级棒的时间点来开始这件事。2024年，网页世界变得既友好又强大，哪怕你以前连“标签”长什么样都没见过，只要跟着我一步步来，几天内你就能做出一个属于自己的、真正能跑起来的网页。别被那些复杂的编程书吓到了，我们不用背字典，我们直接动手，边做边学。
首先，咱们得聊聊一个误区：很多人觉得网页设计就是“画”，然后另一个人负责“写代码”。但在2024年，作为零基础的入门者，我强烈建议你直接从 HTML5 开始。为什么？因为 HTML（超文本标记语言）是网页的骨架，是所有网页的基础。CSS 是皮肤和衣服，JavaScript 是肌肉和神经。没有骨架，衣服往哪挂？皮肤往哪贴？所以，我们要先造人，再穿衣打扮。
准备好了吗？先搞定你的“工作间”
别急着写代码，先要有工具。你不需要买昂贵的软件，也不需要下载什么专业IDE。你电脑里已经有两个神器了：
- 记事本（Notepad）：Windows 自带；或者 文本编辑（TextEdit）：Mac 自带。
- 浏览器：Chrome、Edge、Firefox 随便哪个都行。Chrome 的开发者工具（按 F12）是我们未来的好朋友。
但是！为了让你写代码更舒服，我真心推荐你安装一个免费且强大的代码编辑器——VS Code (Visual Studio Code)。它会自动帮你把代码标上颜色，让你一眼看出哪里是标签、哪里是文字，还能自动补全，避免拼写错误。去它的官网下载，装好，打开，我们就开始了。
第一关：你的第一个网页——“Hello, World!”
在编程世界里有 tradition，每个新手都要先写出“Hello, World!”。咱们也来试试。
第一步：创建文件
在电脑桌面新建一个文件夹，叫 MyFirstWebsite。
然后在这个文件夹里新建一个空白文本文件，重命名为 index.html。注意！ 一定要把 .txt 后缀改掉，变成 .html。如果电脑不让你改，可能是隐藏了已知扩展名，记得在文件夹选项里开启“显示文件扩展名”。
第二步：写入代码
右键点击这个 index.html 文件，选择“用记事本打开”或者“用 VS Code 打开”。输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我用 HTML5 创建的第一个网页。</p>
</body>
</html>
第三步：保存并查看
保存文件（Ctrl+S），然后双击这个 index.html 文件。它会用你的浏览器打开。哇！是不是看到了一个大标题“你好，世界！”和下面的一行小字？
恭喜你！你已经是一名 HTML 开发者了。别急，让我拆解一下刚才发生了什么。
读懂代码：HTML 的“三明治”结构
你刚才写的这段代码，就像做一个三明治。
<!DOCTYPE html>：这是菜单封面。它告诉浏览器：“嘿，我是 HTML5 文档，请用现代标准来渲染我。”这行代码是必须的，放在每一页的最顶端。<html>和</html>：这是整个三明治的外包装。所有的网页内容都必须包裹在这两个标签之间。<head>和</head>：这是三明治的盒子里面的说明书。这里面的东西用户在页面上是看不见的。比如<title>，它定义了浏览器标签页上显示的文字“我的第一个网页”。还有<meta>标签（后面会讲），用来告诉搜索引擎关于你页面的信息。<body>和</body>：这是三明治里真正能吃的部分。你在页面上看到的所有文字、图片、按钮，都写在这里面。
记住一个核心规则： 绝大多数标签都是成对出现的，有 <开始标签> 就有 </结束标签>。就像括号一样，必须配对，否则浏览器会一脸懵逼。
第二关：搭建骨架——常用的 HTML5 标签
光有标题和段落还不够，一个网页得有结构。2024年的 HTML5 引入了很多语义化标签，让网页更像是一个有逻辑的文章，而不是乱糟糟的文本。
1. 标题（Headings）
HTML 有六级标题，从 <h1> 到 <h6>。<h1> 最大、最重要，一个页面通常只有一个 <h1>，用来告诉搜索引擎“这是本页的核心主题”。
<h1>主标题</h1>
<h2>副标题</h2>
<h3>小节标题</h3>
2. 段落与换行
<p> 是段落，浏览器会自动在它前后加空行。
<br> 是换行，它没有结束标签，单独使用。
<p>这是第一段。它会自动换行显示。</p>
<p>这是第二段。<br>这里手动换行了。</p>
3. 链接与图片——网页的血液
网页之所以叫“超文本”，是因为它可以互相链接。
链接用
<a>标签（anchor）。href属性指定链接地址。<a href="https://www.google.com">点击我去谷歌</a>如果想在新标签页打开，加个
target="_blank"：<a href="https://www.google.com" target="_blank">在新标签页打开谷歌</a>图片用
<img>标签。它也是自闭合标签（没有结束标签）。src是图片路径，alt是图片无法显示时的替代文字（对 SEO 和 accessibility 非常重要！）。<img src="photo.jpg" alt="一只可爱的猫咪">注意：图片文件要和你的 html 文件放在同一个文件夹里，或者使用网络图片的完整 URL。
4. 容器：<div> 和 <span>
这两个是空的容器，用来包裹其他元素，方便后续用 CSS 进行样式控制。
<div>是块级元素，独占一行。比如你用它来包裹整个“导航栏”或“侧边栏”。<span>是行内元素，只包裹一部分文字，不独占一行。比如你想把一句话里的几个字标红。
<div class="header">
<h1>网站标题</h1>
<p>这是一个 <span style="color: red;">红色</span> 的词。</p>
</div>
第三关：列表与表格——组织信息
网页上有很多信息需要罗列，比如菜单、产品列表、数据报表。
列表
无序列表（没有顺序）：用
<ul>和<li>。<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul>显示出来就是前面带小圆点的列表。
有序列表（有顺序）：用
<ol>和<li>。<ol> <li>第一步：买材料</li> <li>第二步：混合</li> <li>第三步：烘烤</li> </ol>显示出来就是 1. 2. 3. 的列表。
表格
表格用 <table> 包裹，<tr> 是行，<th> 是表头（加粗居中），<td> 是单元格。
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
<td>程序员</td>
</tr>
<tr>
<td>小红</td>
<td>28</td>
<td>设计师</td>
</tr>
</table>
提示：border="1" 是我们为了看清表格加的，实际开发中我们会用 CSS 来美化边框，这里先不展开，保持简单。
第四关：表单——让用户和你互动
这是网页最有趣的部分！如果你想让用户输入名字、发邮件、或者搜索东西，就需要表单。
一个简单的登录表单例子：
<form action="/submit_data" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名"><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="example@mail.com"><br><br>
<input type="submit" value="登录">
</form>
解读一下：
<form>：表单的容器。action指定数据提交到哪里（现在我们先不写后端，所以随便写个路径），method指定提交方式（post 更安全）。<input>：输入框。type="text"：普通文本输入。type="password"：密码输入，显示为圆点。type="email"：邮箱输入，浏览器会验证格式。type="submit"：提交按钮。
placeholder：输入框里的灰色提示文字。<label>：标签。配合for属性指向 input 的id，这样点击文字就能聚焦到输入框，体验更好。
2024年必须知道的 HTML5 新特性
除了上面的基础，HTML5 带来了很多对开发者友好的新标签，让网页结构更清晰，不需要再用一大堆 <div> 来 hack。
语义化布局标签：
<header> 网页头部 </header> <nav> 导航栏 </nav> <main> 主要内容区域 </main> <article> 一篇文章或一个独立的内容块 </article> <section> 文档中的一个章节 </section> <aside> 侧边栏，相关内容 </aside> <footer> 网页底部 </footer>用这些标签，不仅代码可读性强，而且对搜索引擎（SEO）非常友好！
多媒体原生支持： 以前要在网页放视频得靠 Flash，现在 HTML5 直接支持
<video>和<audio>。<video src="movie.mp4" controls width="300"></video> <audio src="song.mp3" controls></audio>controls属性会显示播放按钮、进度条等控件。Canvas 画布： 如果你想在网页上画图、做动画、做游戏，
<canvas>是你的画板。这需要配合 JavaScript 来操作，但我们先知道有这个标签存在就行。
动手实践：做一个“个人简介”网页
光说不练假把式。现在，我们把今天学到的所有知识综合起来，做一个简单的个人简介网页。
在你的 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>我的个人主页 - 2024</title>
</head>
<body>
<!-- 头部 -->
<header>
<h1>你好，我是 Agnes</h1>
<nav>
<a href="#about">关于我</a> |
<a href="#hobbies">兴趣爱好</a> |
<a href="#contact">联系我</a>
</nav>
</header>
<hr>
<!-- 主要内容 -->
<main>
<section id="about">
<h2>关于我</h2>
<p>我是一个热爱技术的初学者。从2024年开始，我决定学习网页设计。我相信学习任何东西都不晚，关键是迈出第一步。</p>
<img src="https://via.placeholder.com/150" alt="我的头像占位图">
</section>
<section id="hobbies">
<h2>兴趣爱好</h2>
<ul>
<li>编程学习</li>
<li>阅读科幻小说</li>
<li>徒步旅行</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<form>
<label for="name">你的名字：</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="发送留言">
</form>
</section>
</main>
<hr>
<!-- 底部 -->
<footer>
<p>© 2024 我的个人主页. 版权所有.</p>
</footer>
</body>
</html>
保存，刷新浏览器。看看，是不是一个结构清晰、有头有尾、有导航、有内容、有表单的完整网页？虽然它现在很丑（因为没有 CSS），但它已经是一个功能完整的网页骨架了！
给零基础同学的学习建议
- 不要死记硬背：HTML 标签有几十个，但你常用的就那几个。记住常用的，不常用的去 MDN（Mozilla Developer Network）查，那是最权威的文档。
- 多动手，多犯错：代码写错了，页面显示不正常，这正是学习的好机会。观察浏览器，检查标签是否闭合，属性拼写是否正确。
- 理解“结构”与“表现”分离：HTML 负责结构（内容是什么），CSS 负责表现（长得怎么样）。现在我们先专注于 HTML，把结构搭好。下一章，我们要引入 CSS，让这个网页变得漂亮起来。
- 利用开发者工具：在浏览器里右键点击页面元素，选择“检查”，你可以看到网页的 DOM 结构，甚至实时修改代码并看到效果。这是调试的神器。
下一步去哪里？
你已经迈出了最难的第一步。接下来的旅程，你可以：
- 深入学习 HTML5 的所有标签，比如列表、表格、表单的详细属性。
- 开始接触 CSS，学习如何用颜色、字体、布局来美化你的网页。
- 挑战自己，尝试做一个多页面的网站，比如“博客首页”、“关于我页面”、“作品展示页面”。
记住，网页设计不是魔法，它是一门手艺。就像木工一样，多用、多练，你的手感和代码直觉会越来越强。2024年，是你成为网页设计师的最佳起点。加油，我在代码的世界里等你！