嘿，朋友！
看到你搜这个标题，我猜你大概是这样的人：
想做个网页，但连HTML是啥都不知道，网上教程看了又看，越看越懵，最后放弃了。
别担心，我当年也是这样过来的。今天这篇教程，就是写给你看的。不扯虚的，不堆术语，咱们一步一步来，到最后你能真的做出一个能看的响应式网页。
准备好了吗？咱们开始。
第一课：网页到底长什么样？
先别急着写代码，咱们先理解一件事：
网页 = 一座房子的结构说明书
HTML 就是这个”结构说明书”。你写一些标签，浏览器读了之后，就知道：”哦，这里是个标题，这里是段文字，这里是一张图”。
想象一下你搭积木：
┌─────────────────────────────┐
│ 🏠 我的第一个网站 │ ← 这是标题
├─────────────────────────────┤
│ 👋 你好，世界！ │ ← 这是段落
│ 今天天气真好~ │
├─────────────────────────────┤
│ 🖼️ [一张图片] │
├─────────────────────────────┤
│ 🔗 点我看看 │ ← 这是链接
└─────────────────────────────┘
这就是一个最简单的网页。咱们现在就来搭它。
第二课：你只需要两个东西
做网页不需要买软件，不需要花钱。你电脑里已经有了一切。
| 你需要的 | 是什么 | 怎么找到 |
|---|---|---|
| 文本编辑器 | 写代码的地方 | 推荐用 VS Code（免费），实在不想装就用电脑自带的”记事本” |
| 浏览器 | 看效果的地方 | Chrome、Edge、Firefox 都行 |
我强烈建议你去 code.visualstudio.com 下载 VS Code，它会把你的代码标上颜色，写错的地方还会红色波浪线提示你，对新手超级友好。
第三课：第一个网页——3分钟搞定
打开 VS Code，新建一个文件，名字写：
index.html
注意： 文件名必须是 index.html，后缀 .html 不能少。index 是网页的”主页”默认名字，所有网站的第一步都是它。
然后把下面这些代码原封不动地复制进去：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我用HTML写的第一段文字。</p>
<p>感觉怎么样？其实网页也没那么难对吧？</p>
<img src="https://picsum.photos/400/200" alt="一张随机图片">
<a href="https://www.baidu.com">去百度看看</a>
</body>
</html>
保存，然后双击这个文件，它会用你的浏览器打开。
如果你看到这样的页面——
你好，世界！
这是我用HTML写的第一段文字。
感觉怎么样？其实网页也没那么难对吧？
[一张图片]
去百度看看
恭喜你！你已经是一个网页开发者了。 🎉
第四课：拆解一下——每行代码是什么？
别嫌我啰嗦，看懂这些是你以后自己写代码的基础。
<!DOCTYPE html>
告诉浏览器：”喂，我是个现代网页，用HTML5的规矩来解析我。”
这行代码必须写在第一行，少写了浏览器可能会”装傻”，页面效果乱掉。
<html lang="zh-CN"> 和 </html>
整个网页的”根”。lang="zh-CN" 是说这个网页是中文的，对搜索引擎和屏幕阅读器很重要。
所有其他代码，都必须包在这两个标签中间。
<head> 和 </head>
这里是网页的”后台信息”，用户看不到，但很重要。
<head>
<meta charset="UTF-8"> <!-- 解决中文乱码问题 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title> <!-- 浏览器标签页上显示的名字 -->
</head>
重点讲一下 viewport 这行，这是响应式网页的”命门”，后面会详细说。现在你只要知道：没有这行，手机上看网页会变形。
<body> 和 </body>
这里是网页的”前台内容”，用户能看到的全部都写在这里。
<h1> — 标题
<h1>你好，世界！</h1>
h1 是最大的标题。HTML 有 6 级标题：h1 ~ h6，数字越小，字越大。
<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>
<p> — 段落
<p>这是我用HTML写的第一段文字。</p>
p 就是 paragraph（段落）的缩写。每一段文字用一对 <p> 包起来。段落之间会自动有空行，不用你自己加。
<img> — 图片
<img src="https://picsum.photos/400/200" alt="一张随机图片">
img 是自闭合标签（没有结束标签），注意写法：
src是图片的地址，可以是本地路径，也可以是网络链接alt是图片的描述文字——这行不能省，对SEO和屏幕阅读器很重要
<a> — 链接
<a href="https://www.baidu.com">去百度看看</a>
href是要跳到的地址- 中间的文字是”点击显示的内容”
第五课：必备标签全家桶
你已经学了6个标签了，但网页里常用的标签远不止这些。我把新手必须会的全部列出来：
文本相关
<!-- 加粗 -->
<p>这段文字<b>是粗体</b></p>
<!-- 斜体 -->
<p>这段文字<i>是斜体</i></p>
<!-- 下划线 -->
<p>这段文字<u>有下划线</u></p>
<!-- 删除线 -->
<p>这段文字<s>被划掉了</s></p>
列表
<!-- 无序列表（圆点） -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- 有序列表（1.2.3.） -->
<ol>
<li>第一步：打开电脑</li>
<li>第二步：打开浏览器</li>
<li>第三步：开始学习</li>
</ol>
区块容器——div 和 span（超级重要！）
<!-- div：块级容器，独占一行 -->
<div>
<p>这是一个div块</p>
<p>这是同一个div里的另一段</p>
</div>
<!-- span：行内容器，不独占一行 -->
<p>我喜欢<span style="color:red">红色</span>和<span style="color:blue">蓝色</span></p>
为什么要学这个？ 因为 div 是网页布局的”积木块”，后面学CSS全靠它。你可以把 div 理解为：
一个装东西的盒子，你想在里面放什么都行。
语义化标签——HTML5 的加分项
<header>页面顶部的标题区域</header>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
<main>页面主体内容</main>
<section>
<h2>这是第一个章节</h2>
<p>章节内容...</p>
</section>
<aside>侧边栏内容</aside>
<footer>页面底部</footer>
这些标签叫”语义化标签”，意思是：标签名字本身就告诉浏览器这段内容是什么。对搜索引擎友好，也方便别人（和未来的你）看懂你的代码。
第六课：表单——让用户能”输入”东西
网页不只是展示内容，有时候还要让用户填东西。比如登录、搜索、留言。
最简单的表单
<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" placeholder="写点什么..."></textarea>
<button type="submit">提交</button>
</form>
input 的类型——别只记得 type=“text”
<!-- 普通文本框 -->
<input type="text" name="name">
<!-- 密码框（输入内容会变成 ●●●●） -->
<input type="password" name="pwd">
<!-- 邮箱（手机键盘会自动变成带@的键盘） -->
<input type="email" name="email">
<!-- 数字 -->
<input type="number" name="age" min="1" max="120">
<!-- 日期 -->
<input type="date" name="birthday">
<!-- 单选（只能选一个） -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<!-- 多选（可以选多个） -->
<input type="checkbox" name="hobby" value="reading"> 读书
<input type="checkbox" name="hobby" value="coding"> 编程
<input type="checkbox" name="hobby" value="gaming"> 游戏
<!-- 下拉选择 -->
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
完整表单示例
<form action="#" method="POST">
<fieldset>
<legend>注册账号</legend>
<div>
<label for="reg-name">姓名：</label>
<input type="text" id="reg-name" required placeholder="必填">
</div>
<div>
<label for="reg-email">邮箱：</label>
<input type="email" id="reg-email" required>
</div>
<div>
<label for="reg-pwd">密码：</label>
<input type="password" id="reg-pwd" minlength="6" required>
<small>密码至少6位</small>
</div>
<div>
<label>性别：</label>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
</div>
<div>
<label>兴趣：</label>
<label><input type="checkbox" name="interest" value="tech"> 科技</label>
<label><input type="checkbox" name="interest" value="art"> 艺术</label>
<label><input type="checkbox" name="interest" value="sport"> 运动</label>
</div>
<div>
<label for="reg-city">城市：</label>
<select id="reg-city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</div>
<button type="submit">立即注册</button>
</fieldset>
</form>
required表示必填，minlength表示最少几位，这些是HTML5自带的校验，不用写一行JS。
第七课：表格——展示数据
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</tbody>
</table>
<table>：整个表格<thead>：表头区域<tbody>：表体区域<tr>：一行（table row）<th>：表头单元格（默认加粗居中）<td>：普通单元格
第八课：响应式网页是什么？为什么一定要学？
好，干货来了。
响应式 = 网页能自动适应不同屏幕大小
你用手机看网站，和用电脑看网站，体验应该一样好——字不能太小，布局不能错位，图片不能撑爆屏幕。
这就是响应式要做的事。
核心原理就一句话：
告诉浏览器：”我的网页是按真实尺寸设计的，请按屏幕宽度来缩放。”
这靠的就是前面那行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
拆开来看：
width=device-width：网页宽度 = 设备屏幕宽度initial-scale=1.0：初始缩放比例 = 100%（不缩放）
没有这行，手机上的网页会按桌面尺寸渲染，然后被强行缩小，字小到看不清。
响应式的三个技术支柱
1. 百分比宽度（替代固定像素）
/* ❌ 不好：固定宽度，手机会撑爆 */
.box { width: 900px; }
/* ✅ 好：百分比，自动适应屏幕 */
.box { width: 90%; }
2. Flexbox 布局——让元素自动排列
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 280px; /* 最小280px，自动放大，可以换行 */
}
这段CSS的意思是：每个盒子至少 280px 宽，屏幕宽了就并排多列，屏幕窄了就自动换行。不需要写媒体查询，它就自动响应了。
3. 媒体查询——针对特定屏幕做调整
/* 屏幕小于768px时（手机） */
@media (max-width: 768px) {
.sidebar {
display: none; /* 手机端隐藏侧边栏 */
}
h1 {
font-size: 24px; /* 标题调小 */
}
}
/* 屏幕大于1024px时（电脑） */
@media (min-width: 1024px) {
.main-content {
max-width: 900px;
margin: 0 auto; /* 内容居中 */
}
}
第九课：完整实战——做一个响应式个人主页
光说不练假把式。现在我把前面学的全部串起来，做一个真正的响应式网页。
完整代码如下，复制粘贴，保存为 index.html，然后双击打开：
”`html <!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人主页</title>
<style>
/* ===== 全局重置 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
/* ===== 导航栏 ===== */
header {
background: #2c3e50;
color: white;
padding: 16px 24px;
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;