HTML5网页设计入门教程：零基础也能做个人博客和产品展示页，新手必看常见坑和实用技巧
嘿，朋友！是不是每次看到别人做的网页都特别羡慕，心里想”我也能做一个吗”？答案是——绝对能！今天我就带你从零开始，一步步搞定自己的网页。不用怕，我会把每个知识点掰开了、揉碎了讲清楚，就像朋友聊天一样。
先搞明白：网页到底是什么？
你可以把网页想象成一封信。这封信需要：
- 纸张和内容（HTML，负责结构）
- 颜色和排版（CSS，负责样式）
- 互动功能（JavaScript，负责交互）
我们今天主要聊HTML5，它就是那个”骨架”。
第一步：准备好你的工具
你不需要花一分钱，只需要：
- 一个文本编辑器（推荐 VS Code，免费好用）
- 一个浏览器（Chrome、Edge、Firefox都行）
- 一颗不怕出错的心
打开VS Code，新建一个文件，保存为 index.html，然后我们开始写第一个网页！
第二步：HTML5的基础结构
每个HTML文件都有基本骨架，照着这个写：
<!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>这是我的第一个网页，我做到了！</p>
</body>
</html>
保存后双击打开，你就能看到效果了。别小看这段代码，它包含了网页最核心的几个部分：
<!DOCTYPE html>—— 告诉浏览器”我是HTML5”<html lang="zh-CN">—— 声明语言，对搜索引擎友好<meta charset="UTF-8">—— 解决中文乱码问题，新手最容易忘这个<meta viewport>—— 让网页在手机上也好看
第三步：常用标签，一个一个来
标题标签
HTML有6级标题，从 <h1> 到 <h6>，越大越重要：
<h1>这是最大的标题，一般用于页面主标题</h1>
<h2>这是二级标题，用于分节</h2>
<h3>这是三级标题</h3>
常见坑：不要在页面里写多个 <h1>！只有一个主标题就够了，搜索引擎会据此判断你的页面主题。
段落和换行
<p>这是第一段文字，浏览器会自动给段落之间留间距。</p>
<p>这是第二段文字。</p>
<p>如果我想在同一个段落里换行，就用<br>标签。<br>这就会换行。</p>
文本格式
<p><strong>加粗的文字</strong>，<em>斜体强调的文字</em>，<mark>高亮的文字</mark>。</p>
<p>上标：E=mc<sup>2</sup>，下标：H<sub>2</sub>O</p>
第四步：链接和图片
链接
<a href="https://www.baidu.com" target="_blank">点击访问百度</a>
<a href="about.html">跳转到关于页面</a>
<a href="mailto:example@email.com">给我发邮件</a>
实用技巧：target="_blank" 让链接在新标签页打开，用户不会离开你的网站。
图片
<!-- 基本图片 -->
<img src="photo.jpg" alt="一张美丽的风景照">
<!-- 设置尺寸 -->
<img src="logo.png" alt="网站Logo" width="200" height="100">
<!-- 图片链接 -->
<a href="https://example.com">
<img src="banner.jpg" alt="点击进入">
</a>
⚠️ 新手必看的大坑：alt 属性绝对不能省！它不仅对屏幕阅读器（盲人用的）重要，而且图片加载失败时会显示替代文字，还能帮助SEO。
关于图片路径，记住这些规则：
src="image.jpg"—— 图片和HTML文件在同一文件夹src="images/image.jpg"—— 图片在子文件夹里src="../image.jpg"—— 图片在上一级文件夹src="https://example.com/image.jpg"—— 引用网络图片
第五步：列表——有序和无序
<!-- 无序列表（带圆点） -->
<ul>
<li> HTML5基础</li>
<li> CSS样式</li>
<li> JavaScript交互</li>
</ul>
<!-- 有序列表（带编号） -->
<ol>
<li>打开VS Code</li>
<li>新建HTML文件</li>
<li>保存并打开浏览器</li>
</ol>
<!-- 定义列表（术语解释用） -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，网页的骨架</dd>
<dt>CSS</dt>
<dd>层叠样式表，网页的妆容</dd>
</dl>
第六步：表格——数据展示利器
<table border="1">
<thead>
<tr>
<th>产品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>机械键盘</td>
<td>¥299</td>
<td>50件</td>
</tr>
<tr>
<td>无线鼠标</td>
<td>¥129</td>
<td>120件</td>
</tr>
<tr>
<td>USB集线器</td>
<td>¥79</td>
<td>30件</td>
</tr>
</tbody>
</table>
实际示例：产品展示页的规格参数表就可以用这个结构。记得给表头用 <th>，数据用 <td>，这样对SEO和可访问性都好。
第七步：表单——让用户和你互动
个人博客的评论区、联系方式，都需要表单：
<form action="/submit" method="POST">
<!-- 文本输入 -->
<label for="username">昵称：</label>
<input type="text" id="username" name="username" placeholder="请输入昵称" required>
<!-- 邮箱 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="example@email.com" required>
<!-- 密码 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" minlength="6">
<!-- 单选框 -->
<p>你的身份：</p>
<input type="radio" id="student" name="role" value="student">
<label for="student">学生</label>
<input type="radio" id="worker" name="role" value="worker">
<label for="worker">上班族</label>
<!-- 复选框 -->
<p>兴趣爱好：</p>
<input type="checkbox" id="read" name="hobby" value="read">
<label for="read">阅读</label>
<input type="checkbox" id="travel" name="hobby" value="travel">
<label for="travel">旅行</label>
<!-- 下拉选择 -->
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<!-- 文本域 -->
<label for="message">留言内容：</label>
<textarea id="message" name="message" rows="5" placeholder="请输入留言..." maxlength="500"></textarea>
<!-- 提交按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
新手容易犯的错：
- 忘记给
<input>加name属性，数据提交不上去 - 忘记用
<label>关联输入框，不方便操作 - 表单验证全靠后端，前端该加
required、minlength还是加上
第八步：语义化标签——HTML5的杀手锏
在HTML5之前，大家只会用 <div> 套 <div>，现在我们有更清晰的语义标签：
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>我的第一篇博客</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<p>这是博客正文内容...</p>
<footer>
<span>标签：HTML, 教程</span>
<span>作者：小明</span>
</footer>
</article>
<aside>
<h3>侧边栏</h3>
<p>相关链接、作者介绍等</p>
</aside>
</main>
<footer>
<p>© 2024 我的个人网站</p>
</footer>
为什么要用语义化标签？
- 搜索引擎更容易理解你的页面结构
- 代码可读性强，自己看也不会懵
- 对无障碍访问（屏幕阅读器）更友好
- 是现代网页设计的标准做法
第九步：个人博客页面完整示例
让我们把学过的知识串起来，做一个简洁的个人博客：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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: "Microsoft YaHei", sans-serif;
line-height: 1.8;
color: #333;
background-color: #f5f5f5;
}
header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 2rem;
text-align: center;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
nav {
background: #333;
padding: 1rem;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 1.5rem;
font-size: 1.1rem;
}
nav a:hover {
color: #ffd700;
}
main {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
gap: 2rem;
}
.content {
flex: 3;
}
article {
background: white;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
article h2 {
color: #667eea;
margin-bottom: 0.5rem;
}
article .meta {
color: #888;
font-size: 0.9rem;
margin-bottom: 1rem;
}
aside {
flex: 1;
}
.sidebar-box {
background: white;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.sidebar-box h3 {
color: #667eea;
margin-bottom: 1rem;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}
.sidebar-box ul {
list-style: none;
}
.sidebar-box li {
padding: 0.3rem 0;
}
.sidebar-box a {
color: #555;
text-decoration: none;
}
.sidebar-box a:hover {
color: #667eea;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 2rem;
margin-top: 2rem;
}
/* 手机端适配 */
@media (max-width: 768px) {
main {
flex-direction: column;
}
header h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<header>
<h1>小明的技术博客</h1>
<p>分享技术，记录成长</p>
</header>
<nav>
<a href="#">首页</a>
<a href="#">技术文章</a>
<a href="#">生活随笔</a>
<a href="#">关于我</a>
<a href="#">留言板</a>
</nav>
<main>
<div class="content">
<article>
<h2>HTML5入门：从零开始学网页开发</h2>
<p class="meta">发布于 2024年1月15日 | 分类：Web开发</p>
<p>HTML5是构建网页的基础语言。无论你是想建立个人博客、产品展示页，还是学习前端开发的起点，掌握HTML5都是必不可少的第一步...</p>
<p><a href="#">阅读全文 →</a></p>
</article>
<article>
<h2>CSS布局技巧：Flexbox完全指南</h2>
<p class="meta">发布于 2024年1月10日 | 分类：CSS</p>
<p>Flexbox是现代CSS布局的利器。它让居中对齐、等分宽度、响应式排列变得异常简单。本文将通过实例讲解Flexbox的核心概念...</p>
<p><a href="#">阅读全文 →</a></p>
</article>
<article>
<h2>JavaScript基础：让你的网页"动"起来</h2>
<p class="meta">发布于 2024年1月5日 | 分类：JavaScript</p>
<p>HTML负责结构，CSS负责样式，而JavaScript负责交互。一个会动的网页，才能真正吸引用户...</p>
<p><a href="#">阅读全文 →</a></p>
</article>
</div>
<aside>
<div class="sidebar-box">
<h3>关于我</h3>
<p>你好！我是小明，一名热爱技术的前端开发者。这里是我分享学习和生活感悟的小天地。</p>
</div>
<div class="sidebar-box">
<h3>热门文章</h3>
<ul>
<li><a href="#">VS Code插件推荐清单</a></li>
<li><a href="#">GitHub入门教程</a></li>
<li><a href="#">响应式设计详解</a></li>
<li><a href="#">Git常用命令速查</a></li>
</ul>
</div>
<div class="sidebar-box">
<h3>标签云</h3>
<p>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">Python</a> |
<a href="#">生活</a>
</p>
</div>
</aside>
</main>
<footer>
<p>© 2024 小明的技术博客 | 用 ❤️ 和代码构建</p>
</footer>
</body>
</html>
把这个代码复制到VS Code，保存为 blog.html，用浏览器打开，你就能看到自己的第一个博客页面了！
第十步：产品展示页完整示例
接下来我们做一个简洁美观的产品展示页：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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: "Microsoft YaHei", sans-serif;
background: #f8f9fa;
color: #333;
}
/* 顶部导航 */
.top-bar {
background: #1a1a2e;
color: #fff;
padding: 0.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
.top-bar a {
color: #ffd700;
text-decoration: none;
}
/* 主导航 */
header {
background: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #16213e;
}
.logo span {
color: #e94560;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: #e94560;
}
.cart-btn {
background: #e94560;
color: white;
padding: 0.5rem 1.2rem;
border-radius: 20px;
text-decoration: none;
}
/* 横幅区域 */
.hero {
background: linear-gradient(135deg, #16213e, #0f3460);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-btn {
background: #e94560;
color: white;
padding: 1rem 2.5rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: transform 0.3s, box-shadow 0.3s;
}
.hero-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4);
}
/* 产品分类 */
.categories {
display: flex;
justify-content: center;
gap: 1rem;
padding: 2rem;
flex-wrap: wrap;
}
.cat-tag {
background: white;
padding: 0.6rem 1.5rem;
border-radius: 20px;
text-decoration: none;
color: #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s;
}
.cat-tag:hover, .cat-tag.active {
background: #16213e;
color: white;
}
/* 产品网格 */
.products {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.product-img {
width: 100%;
height: 220px;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #bbb;
}
.product-info {
padding: 1.5rem;
}
.product-tag {
display: inline-block;
background: #e8f4fd;
color: #16213e;
padding: 0.2rem 0.8rem;
border-radius: 10px;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.product-name {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #1a1a2e;
}
.product-desc {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.6;
}
.product-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-price {
font-size: 1.4rem;
color: #e94560;
font-weight: bold;
}
.product-price del {
font-size: 0.9rem;
color: #999;
margin-right: 0.5rem;
}
.buy-btn {
background: #16213e;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
.buy-btn:hover {
background: #e94560;
}
/* 特色服务 */
.features {
display: flex;
justify-content: center;
gap: 3rem;
padding: 3rem 2rem;
background: white;
margin-top: 2rem;
flex-wrap: wrap;
}
.feature-item {
text-align: center;
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.feature-item h4 {
color: #16213e;
margin-bottom: 0.3rem;
}
.feature-item p {
color: #888;
font-size: 0.9rem;
}
/* 页脚 */
footer {
background: #1a1a2e;
color: #ccc;
padding: 3rem 2rem 1rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.footer-section h4 {
color: white;
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #aaa;
text-decoration: none;
}
.footer-section a:hover {
color: #ffd700;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid #333;
font-size: 0.9rem;
}
/* 手机端适配 */
@media (max-width: 768px) {
header {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero h2 {
font-size: 1.8rem;
}
.products {
padding: 1rem;
gap: 1rem;
}
}
</style>
</head>
<body>
<!-- 顶部信息栏 -->
<div class="top-bar">
<span>📞 客服电话：400-123-4567</span>
<span>🚚 全场满199元包邮 | <a href="#">登录 / 注册</a></span>
</div>
<!-- 主导航 -->
<header>
<div class="logo">数码<span>小店</span></div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新品上市</a></li>
<li><a href="#">热销排行</a></li>
<li><a href="#">限时特惠</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<a href="#" class="cart-btn">🛒 购物车 (3)</a>
</header>
<!-- 横幅宣传区 -->
<section class="hero">
<h2>新春特惠，全场低至5折起！</h2>
<p>精选数码好物，品质保证，7天无理由退换</p>
<a href="#" class="hero-btn">立即抢购 →</a>
</section>
<!-- 产品分类标签 -->
<div class="categories">
<a href="#" class="cat-tag active">全部商品</a>
<a href="#" class="cat-tag">手机配件</a>
<a href="#" class="cat-tag">电脑周边</a>
<a href="#" class="cat-tag">智能穿戴</a>
<a href="#" class="cat-tag">音频设备</a>
<a href="#" class="cat-tag">摄影器材</a>
</div>
<!-- 产品展示区 -->
<section class="products">
<!-- 产品1 -->
<div class="product-card">
<div class="product-img">🎧</div>
<div class="product-info">
<span class="product-tag">热销</span>
<h3 class="product-name">无线降噪蓝牙耳机</h3>
<p class="product-desc">主动降噪，40小时续航，舒适佩戴，沉浸音质体验。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥599</del>¥329
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
<!-- 产品2 -->
<div class="product-card">
<div class="product-img">⌨️</div>
<div class="product-info">
<span class="product-tag">新品</span>
<h3 class="product-name">机械键盘 RGB版</h3>
<p class="product-desc">Cherry轴体，全键无冲，1680万色RGB背光， gaming首选。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥899</del>¥599
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
<!-- 产品3 -->
<div class="product-card">
<div class="product-img">🖱️</div>
<div class="product-info">
<span class="product-tag">特惠</span>
<h3 class="product-name">人体工学鼠标</h3>
<p class="product-desc">垂直设计，减轻手腕压力，16000DPI高精度传感器。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥399</del>¥199
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
<!-- 产品4 -->
<div class="product-card">
<div class="product-img">📱</div>
<div class="product-info">
<span class="product-tag">爆款</span>
<h3 class="product-name">磁吸无线充电器</h3>
<p class="product-desc">15W快充，MagSafe兼容，智能温控，夜间柔光指示灯。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥299</del>¥159
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
<!-- 产品5 -->
<div class="product-card">
<div class="product-img">💡</div>
<div class="product-info">
<span class="product-tag">推荐</span>
<h3 class="product-name">智能台灯 Pro</h3>
<p class="product-desc">调光调色，手机APP控制，护眼无频闪，内置时钟。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥459</del>¥299
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
<!-- 产品6 -->
<div class="product-card">
<div class="product-img">⌚</div>
<div class="product-info">
<span class="product-tag">限量</span>
<h3 class="product-name">智能运动手表</h3>
<p class="product-desc">心率监测，GPS定位，100+运动模式，14天超长续航。</p>
<div class="product-bottom">
<div class="product-price">
<del>¥1299</del>¥899
</div>
<button class="buy-btn">加入购物车</button>
</div>
</div>
</div>
</section>
<!-- 服务特色 -->
<section class="features">
<div class="feature-item">
<div class="feature-icon">🚚</div>
<h4>快速发货</h4>
<p>当日15点前下单，当天发出</p>
</div>
<div class="feature-item">
<div class="feature-icon">✅</div>
<h4>正品保障</h4>
<p>所有商品均为品牌正品</p>
</div>
<div class="feature-item">
<div class="feature-icon">🔄</div>
<h4>7天退换</h4>
<p>不满意随时退换货</p>
</div>
<div class="feature-item">
<div class="feature-icon">💬</div>
<h4>在线客服</h4>
<p>7×24小时在线解答</p>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h4>关于数码小店</h4>
<p>我们专注于提供优质数码产品，让科技改变生活。</p>
</div>
<div class="footer-section">
<h4>快速链接</h4>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">所有商品</a></li>
<li><a href="#">促销活动</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
<div class="footer-section">
<h4>客户服务</h4>
<ul>
<li><a href="#">订单查询</a></li>
<li><a href="#">退换货政策</a></li>
<li><a href="#">配送说明</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</div>
<div class="footer-section">
<h4>联系我们</h4>
<ul>
<li>📞 400-123-4567</li>
<li>📧 service@digitmall.com</li>
<li>📍 北京市海淀区中关村</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 数码小店. All Rights Reserved. | <a href="#" style="color:#aaa;">隐私政策</a> | <a href="#" style="color:#aaa;">使用条款</a></p>
</div>
</footer>
</body>
</html>
把这段代码也保存起来，你会得到一个看起来相当专业的产品展示页面！
新手最容易踩的坑，我来帮你避开
坑一：中文乱码
症状：页面显示 浣犲ソ 之类的乱码
原因：没有设置字符编码
解决：在 <head> 里加上这行：
<meta charset="UTF-8">
坑二：图片路径写错
症状：图片不显示，浏览器开发者工具里看到 404 错误
解决：先确认文件结构，比如：
项目文件夹/
├── index.html
├── images/
│ ├── logo.png
│ └── banner.jpg
└── css/
└── style.css
HTML文件里引用图片的正确写法：
<img src="images/logo.png" alt="logo">
坑三：忘了写结束标签
症状：页面样式乱套，布局错乱
解决：养成良好的习惯，写完开始标签马上写结束标签。VS Code 输入 <div> 后会自动补全 </div>，利用这个功能！
坑四：用 <br> 来控制间距
症状：页面看起来很奇怪，调整间距时到处找 <br>
正确做法：用CSS的 margin 和 padding 控制间距，别用 <br> 来凑：
<!-- 错误示范 -->
<p>第一段</p><br><br>
<p>第二段</p>
<!-- 正确做法 -->
<p style="margin-bottom: 20px;">第一段</p>
<p>第二段</p>
坑五：直接在HTML里写大量样式
症状：HTML文件又长又乱，改个颜色要翻半天
正确做法：把样式抽离到CSS文件，用 <link> 引入：
<head>
<link rel="stylesheet" href="style.css">
</head>
坑六：没有做响应式适配
症状：网页在手机上看特别小，要放大才能看清
解决：
- 加上 viewport meta 标签（前面已经讲过了）
- 用CSS媒体查询做适配：
/* 手机屏幕（小于768px） */
@media (max-width: 768px) {
.products {
grid-template-columns: 1fr; /* 一列显示 */
}
}
坑七：链接的 href 写成空字符串
症状：点击链接跳到顶部，页面刷新
解决：暂时没想好链接地址时，用 javascript:void(0) 或者直接注释掉跳转：
<!-- 不推荐，点击会刷新页面 -->
<a href="">联系我们</a>
<!-- 推荐 -->
<a href="contact.html">联系我们</a>
<!-- 或者 -->
<a href="javascript:void(0)">联系我们</a>
坑八：图片没有alt属性
症状：搜索引擎无法识别图片内容，影响SEO，而且图片加载失败时用户体验差
解决：
<!-- 不要这样写 -->
<img src="photo.jpg">
<!-- 要这样写 -->
<img src="photo.jpg" alt="产品外观展示图">
实用技巧汇总
技巧一：善用浏览器开发者工具
按 F12 打开开发者工具，这是你最好的老师：
- Elements：查看页面结构，实时修改HTML/CSS看效果
- Console：查看报错信息
- Network：检查资源加载情况
- Responsive：模拟不同设备的显示效果
技巧二：学习写注释，方便日后维护
<!-- ========== 导航栏 ========== -->
<nav>
<!-- 导航链接 -->
<a href="#">首页</a>
</nav>
<!-- ========== 产品展示区 ========== -->
<section class="products">
<!-- 产品卡片会循环生成 -->
</section>
技巧三：文件命名要规范
✅ 正确：
index.html
style.css
script.js
about.html
images/product-01.jpg
❌ 错误：
新建文件夹（2）\index.html
style_v2_最终版.css
IMG_20240115.JPG
技巧四：先做布局，再做样式，最后加交互
不要一上来就调颜色、调间距。正确的顺序是：
- 骨架阶段：先把HTML结构搭好，内容写进去
- 布局阶段：用CSS确定各个板块的位置
- 美化阶段：调颜色、字体、间距
- 交互阶段：加JavaScript让页面动起来
技巧五：学会用浏览器搜索错误信息
遇到报错不要慌，把错误信息复制到搜索引擎，大概率别人也遇到过，而且已经有解决方案了。
你的学习路径建议
| 阶段 | 学习内容 | 预计时间 |
|---|---|---|
| 第1周 | HTML基本标签，做出一个简单页面 | 3-5天 |
| 第2周 | CSS基础（颜色、字体、盒模型） | 5-7天 |
| 第3周 | CSS布局（Flexbox、Grid） | 5-7天 |
| 第4周 | 制作完整的个人博客页面 | 7-10天 |
| 第5周 | 制作产品展示页，加入响应式适配 | 7-10天 |
| 持续 | 多动手，多模仿，多修改 | 永远 |
最后想说几句
学做网页这事儿，最难的从来不是理解代码本身，而是开始写第一行代码。很多人看了十遍教程，还是没做过一个完整的页面。
我的建议是：边学边做，做完一个就做一个。今天做一个博客页面，明天做一个产品展示页，后天给页面加个导航栏特效。每完成一个小目标，你就进步了一截。
别忘了，你写的每一个网页，都是在向全世界展示你自己。一个干净的、能正常显示的页面，比一百个半成品要有说服力得多。
有任何问题，随时回来翻这篇教程，或者用浏览器的开发者工具自己调试。动手试，比什么都强。
加油，未来的网页设计师！🚀