企业官网建设流程全解析

第二次HTML+CSS作业，往往是前端入门路上第一道正式的坎。第一次作业可能只是写几个标签、改两段样式，到了第二次，通常就要完整做一个静态页面了——导航栏、图文列表、表单、页脚……要求一下子多了不少。今天这篇就跟你说说，面对这种“web前端第二次作业”，正确的打开方式是什么，以及我作为过来人踩过哪些坑、总结过哪些套路。

我会按一个完整的实操流程来讲：先讲拿到作业后怎么拆需求，再讲HTML结构怎么搭才规范，然后讲CSS布局和样式的核心用法，接着专门花一章讲样式“不生效”的排查思路，最后给你一份提交前的自查清单。文章里所有示例都是可以直接照抄的，你抄完再按自己的内容改，就能少走很多弯路。

1. 动手写代码之前：把作业需求拆成一页纸

1.1 “读完题目”比“会写代码”更重要

第二次作业最容易翻车的地方，不是技术不会，而是需求没看明白就开写。比如题目要求做“个人主页”，有的同学直接做了个“产品介绍页”，结构全不对；再比如要求“包含表单页面”，结果只做了展示页，注册按钮点了没反应，直接扣分。

我的习惯是把作业要求里的每一条单独拎出来，转成一个个可以验收的小功能。你可以在草稿纸上画一张这样的表：

把这张表拍下来或者贴在屏幕边上，写代码的时候随时对照。别小看这一步，它能让你少做很多无用功。

1.2 在纸上画线框图：用“盒子思维”拆页面

HTML和CSS最核心的想法，是把整个页面看成一层一层摞起来的“盒子”。每个盒子有自己的宽、高、内边距、外边距和边框。所以动手写代码之前，强烈建议你拿一支笔，在纸上先画一个线框图。

不需要画得多好看，就是把页面的轮廓画出来。拿“个人主页”举例，通常长这样：

• 顶部：网站标题 + 导航栏（横排链接）
• 中部：一个展示照片和简介的横幅区域
• 中部：三列卡片，每张卡片是一段介绍或一个项目
• 底部：版权信息和社交链接

这一步最大的价值，是让你提前知道页面应该分成几块、每块里面有什么、哪块和哪块是并列关系。等你写HTML的时候，其实就是在把这些盒子一个个填进去；写CSS的时候，就是给这些盒子设置位置和外观。线框图即是你的施工图。

1.3 目录结构与命名：从第一次作业就养成好习惯

很多同学第一次写前端，习惯把所有代码堆在一个index.html里，CSS全写在style标签里，图片直接丢在桌面。这次真的别再这样了。

推荐的最小目录结构是这样：

my-project/ ├── index.html ├── css/ │ └── style.css └── images/ ├── avatar.jpg └── project-01.png

这样的好处有三个：

1. 作业交给老师后，对方双击index.html就能正常打开，图片不会因路径问题全部裂掉。
2. CSS和HTML分离，是第二次作业的硬性要求——至少在我见过的大多数课程里，“外部样式表”是明确扣分项对应点，不分离直接扣分。
3. 后续你学JavaScript、学了需要打包构建的项目，这个结构习惯能无缝迁移。

命名上，HTML文件一般就叫index.html（这是默认首页），图片文件名别用中文、别带空格，统一用英文小写加连字符，比如about-me.png，而不是“我的头像.png”。很多在线代码托管平台和服务器对中文文件名极不友好，这个坑现在避开，以后能省很多事。

2. HTML不要写成“div套娃”：标签选型与结构规范

2.1 语义化标签：不只是“显得专业”

第二次作业筛选优秀的标准，往往不是页面多炫，而是结构多清楚。所谓“语义化”，就是“用合适的标签表达内容的本意”。

拿导航栏举例，新手最喜欢写：

<div class="header"> <div class="nav"> <a href="#">首页</a> <a href="#">项目</a> </div> </div>

看着没毛病，但浏览器、搜索引擎和屏幕阅读器都不会认为这一组链接是“导航”。换成语义化标签之后就清楚多了：

<header> <nav> <a href="#home">首页</a> <a href="#projects">项目</a> </nav> </header>

页面主体同理。一段独立完整的文章内容应该用<article>，一个侧边栏应该用<aside>，页脚用<footer>。这些都是HTML5里现成的标签，为什么放着不用呢？

还有一个很容易被忽略的细节：一个页面里h1标题只能有一个。h1相当于文章的“主标题”，搜索引擎据此判断页面主题。很多同学一上来写好几个h1，虽然页面看着没区别，但在语义上等于一篇论文有好几个题目，很混乱。建议的结构是“h1（整个页面主题）→ h2（每个板块标题）→ h3（板块里的小标题）”，逐级往下，不要跳级。

2.2 图片、链接和路径：作业里扣分最密集的地方

图片和链接看着简单，实际上我第一次看到学生作业时，最常见的bug就是“图片显示不出来”和“点击链接没反应”。

先说图片。img标签里有三个属性要养成肌肉记忆：

<img src="images/avatar.jpg" alt="个人头像照">

• src是图片路径，用相对路径，从当前HTML文件的角度去找文件。
• alt是图片无法加载时显示的文字，也是屏幕阅读器读给视障用户的内容。这个属性是很多作业评分表里的验收点，别留空。
• width/height先别急着写死在HTML里，放到CSS里管更灵活。

再说链接。导航里的a标签，除了href="#"这种占位写法，更规范的姿势是使用锚点跳转。比如导航里的“项目”希望跳到页面中间的项目板块，就可以这样写：

<nav> <a href="#projects">项目</a> </nav>

对应的板块上加一个id：

<section id="projects"> ... </section>

这样点导航就会自动滚动到对应区域。注意多个链接不能共用同一个id，id在同一个页面里必须唯一。

2.3 表格和表单：第二次作业里最容易被写乱的两种东西

第二次作业经常要求做一个表单或表格，很多同学是用div硬拼出来的，其实HTML原生标签就够了，而且代码量更少、结构更清晰。

表单的核心结构长这样：

<form action="#" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="username" placeholder="请输入姓名"> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> <button type="submit">提交</button> </form>

这里有个新手极容易踩的坑：label的for属性要和input的id完全一致，比如for="name"对应id="name"。这样点击“姓名：”这几个字时，对应的输入框会自动获得焦点，体验好，评分也容易拿。

表格的核心结构长这样：

<table> <thead> <tr> <th scope="col">项目名称</th> <th scope="col">完成时间</th> </tr> </thead> <tbody> <tr> <td>个人主页</td> <td>2024-05-20</td> </tr> </tbody> </table>

thead包表头，tbody包数据行，th是表头单元格，td是普通单元格。表格的边框和间距不要用HTML属性写（比如border="1"），而是放到CSS里控制，这也是外部样式表的价值体现。

2.4 class和id命名：让老师一步看懂你的代码

命名这件事，很多同学不重视。随手写class="box1"、class="box2"，或者class="a"、class="b"，代码能跑，但毫无信息量。

我自己检查和改作业时，最怕看到这种命名，因为完全猜不到这个元素是干嘛的。推荐的做法是“内容导向命名”：这个元素是什么，就叫什么。

命名的价值在单人小作业里不明显，但等你写复杂页面，或者跟同学合作开发时，这一条就是“代码能不能维护”的分水岭。而且很现实的一点是，规范的命名在作业评分里通常会被单独表扬。

3. CSS别死记硬背选择器：把布局逻辑串起来理解

3.1 选择器：搞清楚“谁在改谁”比记住一大堆规则更关键

CSS的语法核心只有一句话：选择器 + 声明块。选择器决定了“我要改页面上哪些元素”，声明块决定了“我要把这些元素改成什么样”。

第二次作业最常用的选择器就这几类：

/* 元素选择器：选中所有p标签 */ p { color: #555; } /* 类选择器：选中class="nav"的元素 */ .nav { display: flex; } /* id选择器：选中id="header"的元素 */ #header { background: #f8f9fa; } /* 后代选择器：选中导航里面的所有a标签 */ .nav a { text-decoration: none; margin-right: 16px; }

很多同学搞不清“类选择器写点”和“id选择器写井号”的来历，其实很好记：class在英文里是“类”，你给它起名字，相当于打个标签，用点号表示；id是“身份证号”，全页面唯一，用井号表示。

选择器权重是另外一个常问的问题。简单记一个规则：id > 类 > 元素。比如：

<p id="intro" class="text">一行文字</p>

#intro { color: red; } .text { color: blue; } p { color: green; }

最终这行文字是红色，因为id选择器权重最高。这条规则在排查“为啥我写的样式没生效”时特别有用，后面专门说。

3.2 盒模型：页面排版错乱的九成原因都在这里

所有HTML元素都是“盒子”，每个盒子从内到外一共四层：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

新手最常问的问题是“为什么我设置了宽度，元素的实际宽度却比预期大”。我们来看一个常见的翻车现场：

<div class="box">内容</div>

.box { width: 300px; padding: 20px; border: 5px solid #333; }

这个盒子的实际占用宽度是多少？很多人以为是300px，但其实按默认的box-sizing: content-box来算，是：

300（内容宽） + 20*2（左右内边距） + 5*2（左右边框） = 350px

这一下就比预期宽了50px，如果旁边还有别的盒子，布局就会错乱。

解决办法是把全页面统一改成“边框盒”模型：

* { box-sizing: border-box; }

这样上面那个盒子不管padding和border怎么加，实际宽度都固定是300px。border-box在真实项目里的使用率几乎是100%，我强烈建议把它当成默认习惯，而不是需要刻意记忆的知识点。

3.3 Flex布局：解决“怎么排成一排”这个经典问题

第二次作业常见的布局无非这么几种：水平导航、三列卡片、图片+文字并排。这些用传统float也能做，但容易踩塌陷的坑；用Flex布局，几乎是一行代码的事。

三列卡片的核心代码：

<div class="cards"> <div class="card">卡片一</div> <div class="card">卡片二</div> <div class="card">卡片三</div> </div>

.cards { display: flex; gap: 20px; /* 卡片之间的间距 */ justify-content: space-between; } .card { flex: 1; /* 三张卡片等宽 */ padding: 24px; border: 1px solid #eee; border-radius: 8px; }

这里最关键的两个属性：

• display: flex：让容器里的子元素变成“弹性盒子”，默认水平排列。
• justify-content：控制主轴方向的对齐方式，space-between让第一个贴左、最后一个贴右、中间的均分空隙，正好是卡片布局最常见的需求。

flex: 1的意思是“按剩余空间的比例扩大”，三张卡片都写flex: 1，它们就自动三等分。

如果你要做导航栏，就再加一个垂直居中：给容器加上align-items: center，导航里的文字和Logo就会在垂直方向上对齐，不用再手动算行高。

3.4 字体、颜色和单位：一眼看上去“干净”的页面是怎么调出来的

很多同学的页面功能都对，但一眼看过去就是“不舒服”，问题基本集中在字体、颜色和间距上。

先看单位。第二次作业阶段，掌握“px为主、rem为辅”就够了。px是绝对单位，1px就是1像素；rem是相对单位，相对的是根元素（html）的字体大小。浏览器默认根字号是16px，所以1rem = 16px。

如果你想让整个页面的字体大小可以统一缩放，可以这样设置：

html { font-size: 16px; } body { font-size: 1rem; /* 即16px */ line-height: 1.6; /* 行高设为字号1.6倍，阅读更舒适 */ }

颜色方面，别再一张页面用七八种颜色了。新手最容易让页面变“脏”的原因，就是用了一堆大红大绿。推荐一个很偷懒但非常有效的做法：选一个主色，一个辅色，再加一个中性色。比如：

:root { --primary: #2c3e50; /* 深蓝灰，用于标题和导航 */ --accent: #e74c3c; /* 红色，用于强调和按钮 */ --bg: #f8f9fa; /* 浅灰，用于页面背景 */ }

这就是CSS自定义属性（也叫CSS变量），好处是你想换主题色时，只改一处，全页面跟着变。这个技巧说简单但也确实超出很多第二次作业的水平，属于性价比很高的“加分项”。

4. 样式为什么“没生效”：最常见的几个翻车现场

4.1 从“文件路径”到“缓存刷新”：先排除这些低级但高发的问题

作业写完了，打开浏览器一看，页面全裸——HTML内容都在，但所有CSS样式全丢了。这种时候不要慌，按下面的顺序排查：

1. 外部样式表有没有正确引入。检查index.html里这行代码的位置和路径：

   <link rel="stylesheet" href="css/style.css">

   href里的路径是相对于当前HTML文件的位置。如果目录结构是“css文件夹在index.html的同级”，就写css/style.css；如果样式表在上一级，就要写../css/style.css。路径写错是最常见的原因。

2. 文件有没有保存。听起来很傻，但真的有人改完CSS忘记按Ctrl+S，或者CSS文件保存了、HTML没保存。我排查学生问题时，“先保存再刷新”这句话说了不下几十遍。

3. 浏览器缓存。如果你改了CSS但页面始终是旧效果，大概率是缓存。按F12打开开发者工具，切到Network（网络）面板，勾选Disable cache（禁用缓存），再刷新一次。这是最标准的调试姿势。

4. 有没有中文标点或漏写分号。CSS里每个声明后面必须有英文分号。这类问题很难一眼看出来，可以把代码复制到代码编辑器里看有没有红色波浪线。

4.2 选择器权重与覆盖顺序：为什么后写的样式反而没生效

还有一种更隐蔽的情况：样式文件引入了、内容也匹配，但就是不生效。这时候八成是“优先级”问题。

看这个经典例子：

<p class="text">文字</p>

p { color: red; } .text { color: blue; }

最终文字是什么颜色？答案是蓝色，因为类选择器的权重高于元素选择器。如果你写的是：

#main .text { color: blue; } .text { color: green; }

那么前一条生效，因为id + 类的权重远大于单个类。

有个很实用的排查口诀：先看选没选中（匹配度），再看谁更重要（权重），最后看谁的顺序在后（同等权重下后写的覆盖先写的）。这个排查链路能解决90%的“样式没生效”。

4.3 经典布局翻车：图片空隙、外边距合并、父级高度塌陷

第二次作业里，有三个“看着奇怪但几乎人人都会遇到”的布局问题，这里一次性说透。

第一个，图片下方多出一条白线。img默认是行内元素，行内元素的底部会跟文字基线对齐，所以图片下方会留下一段空隙。解决方式一行代码：

img { display: block; }

第二个，两个相邻盒子的上下margin叠在一起。比如上面的盒子设置了margin-bottom: 30px，下面的盒子设置了margin-top: 20px，你以为间距是50px，实际只有30px。这就是“外边距合并”（父子、上下兄弟之间都会发生）。解决方式：要么只用一个margin（推荐），要么给父容器加overflow: hidden。

第三个，浮动元素的父级高度塌陷。如果你还在用float做多列布局，子元素浮动后父容器会“认为“自己没有高度，导致背景和边框塌缩。最稳妥的解决方式是：彻底放弃float排版，改用Flex。这也是现代前端的主流做法，考试作业里用Flex布局不仅代码更少，还更不容易出bug。

5. 交作业之前，按这个清单自查一遍

5.1 功能性检查：每个链接、每张图片、每个表单字段都要过一遍

很多同学写完直接打包提交，结果导航的锚点没对齐、表单字段点击没反应、图片裂了好几张，这些问题其实在提交前花十分钟就能全部发现。

可以按下面这张表格逐项打钩：

这里特别说一下最后一项。很多同学在编辑器里打开预览没问题，但把整个文件夹发给别人后，别人双击index.html发现图片全裂了、样式全丢了。原因基本都是用了“绝对路径”或者“没有把文件夹一起打包发送”。提交时应当把整个项目文件夹压缩成一个zip，而不是只发一个index.html。

5.2 代码可读性：老师未必会读你的代码，但读了就一定知道深浅

作业评分时，老师通常先看页面效果，然后再看代码。代码注释和缩进对你的成绩没有直接加分，但能影响老师对“这个学生到底理解了没有”的判断。

建议做到最基础的两点：

1. 用统一的两空格或四空格缩进，不要按下Tab键不松手乱跳。

2. 在关键区块上写一行中文注释，解释这部分的用途。比如：

/* ========== 导航栏 ========== */ nav { display: flex; justify-content: space-between; } /* ========== 项目卡片区 ========== */ .cards { display: flex; gap: 20px; }

写注释不是给浏览器看的，浏览器会忽略它们；注释是给“读代码的人”看的，包括未来的自己。你两个月后再打开这个文件，如果没有注释，大概率想不起来当时为什么要这么写。

5.3 适配不同窗口宽度：最少要会一招响应的入门写法

第二次作业一般只要求桌面端的正确展示，但如果你能顺手做一点响应式适配，页面在老师的小屏笔记本或缩放窗口下不产生横向滚动条，就很加分。

最入门的一招是给容器设置最大宽度并居中：

.container { max-width: 1200px; margin: 0 auto; }

这样窗口超过1200px时页面不会撑满整屏，窄于1200px时容器跟随变窄，不会出现横向滚动条。

更进一步，可以用一个最简单的媒体查询，让小屏幕下三列卡片变成一列：

@media (max-width: 768px) { .cards { flex-direction: column; } }

意思就是“屏幕宽度小于768px时，卡片改成一列竖排”。站在第二次作业的角度，这句已经足够“秀肌肉”了。

5.4 一个可复用的完整小页面骨架

讲了这么多，最后给你一个可以直接抄的迷你页面骨架，把上面的知识点串在一起。HTML结构用语义化标签，CSS用Flex布局加统一盒模型，路径按本项目目录写：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人主页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav class="nav"> <span class="logo">My Site</span> <div class="nav-links"> <a href="#about">关于</a> <a href="#projects">项目</a> <a href="#contact">联系</a> </div> </nav> </header> <main> <section id="about" class="about"> <h1>你好，我是A同学</h1> <p>一名正在学习Web前端开发的初学者，这是我的第二个页面作业。</p> </section> <section id="projects" class="projects"> <h2>我的项目</h2> <div class="cards"> <div class="card">项目一</div> <div class="card">项目二</div> <div class="card">项目三</div> </div> </section> <section id="contact" class="contact"> <h2>联系我</h2> <form action="#" method="post"> <label for="name">姓名</label> <input type="text" id="name" name="name"> <label for="email">邮箱</label> <input type="email" id="email" name="email"> <button type="submit">提交</button> </form> </section> </main> <footer> <p>© 2024 A同学</p> </footer> </body> </html>

配套的CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; } .main { max-width: 1200px; margin: 0 auto; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #2c3e50; color: #fff; } .nav-links a { color: #fff; text-decoration: none; margin-left: 20px; } .about { padding: 80px 24px; text-align: center; } .projects { padding: 40px 24px; } .cards { display: flex; gap: 20px; justify-content: space-between; } .card { flex: 1; padding: 32px; background: #fff; border: 1px solid #eee; border-radius: 8px; } .contact { padding: 40px 24px; } input { display: block; width: 100%; margin-bottom: 12px; padding: 8px; } footer { text-align: center; padding: 24px; background: #2c3e50; color: #fff; }

这个骨架包含了一篇达标作业所需的全部要素：语义化结构、导航锚点跳转、表单、外部样式、Flex布局、统一盒模型、卡片式排版。你可以把它当成出发点，往里面填自己的真实内容，再根据作业要求增删模块。

最后说点个人的体会。做第二次HTML+CSS作业时，遇到最多的问题其实是“看着会了，一写就废”。我的建议是别一上来就追求花哨的动画、渐变、阴影，先把一个结构清晰、内容完整、样式整洁的页面稳稳交出来。基础打得牢，后面学JavaScript才会真正施展得开。第一次做得慢没关系，第二次就是用来把第一次的坑填平的。