企业官网建设流程全解析

第一次接到HTML作业的时候，我盯着一个空白的记事本文件发呆了好一会儿。相信很多人都有过这个阶段：老师讲的时候感觉自己全听懂了，什么<html>、<body>、<h1>，每个标签都认识，可真要交一份“像样”的作业出来，手就停下了——不知道先写哪行，不知道该做成什么样子，更不知道做成什么样才算达标。这篇东西就是写给当时的自己，也写给正在为第一份HTML作业发愁的人：我会把从拿到题目到交作业的完整过程拆开，包括工具选择、页面骨架、常见翻车点和交作业前的自查清单。看完你可以直接动手，不说能写出多惊艳的页面，但至少能交出一份结构规范、思路清晰、经得起老师打开浏览器检查的作业。

1. 先把作业想清楚：第一次HTML作业到底在考什么

很多人的第一个误区是上来就找模板，或者急着想“做得好看一点”。但第一次HTML作业，老师真正想看的东西其实很简单：你有没有理解网页的基本结构，能不能用标签把内容组织得语义清晰，代码是不是你自己一行行写出来的。审美当然重要，但那不是第一份作业的核心。

1.1 作业的常见三种形态

以我看到的经验来说，第一份HTML作业大致逃不出下面三种：

• 个人介绍页：要求包含照片、自我介绍、兴趣爱好、联系方式等，本质是练文本排版和基础标签。
• 静态内容页：给定一篇文字材料，要求用标题、段落、列表、图片把内容呈现出来，本质是练信息结构分层。
• 小型主题页：比如做一个“我的家乡”或者“我最喜欢的运动”页面，通常会要求使用超链接、图片、表格或简单表单，本质是练多元素组合。

不管是哪种，核心考察点高度重合：标题层级是否合理、段落是否清晰、图片能不能显示、链接能不能点、代码格式是否整洁。如果你能把这几点做扎实，分数一定不会差。

1.2 评分标准背后的潜台词

我后来帮老师收过几次作业，发现评分时真正扣分的点往往不是“做得不够花哨”，而是一些低级问题：乱码、图片裂掉、链接点不动、代码挤成一团、标签关系混乱。所以你在写的时候，别只盯着视觉效果，要把更多注意力放在“代码本身是否健康”上。

记住一个原则：第一份作业的及格线不是“好看”，是“规范”。样式可以简单，但结构不能乱；配色可以朴素，但浏览器打开不能报错、乱码、缺图。

1.3 别急着写代码，先搭信息框架

拿到题目后，我建议先不要打开编辑器，而是用纸笔把页面上要放的内容列出来。比如做个人介绍页，就先写：

页面大标题：关于我 一、基本信息（姓名、学校、专业/正在学什么） 二、我的照片 三、兴趣爱好（列表） 四、想说的话（一个段落） 五、友情链接（超链接）

这一步看起来很原始，但特别管用。因为你一旦开始写HTML，注意力很容易被标签细节带走，写着写着就忘记整体结构。先画框架，你脑子里就有一条清晰的线，写代码只是把这条线翻译成标签而已。

2. 开写之前：工具、文件和最基本的页面骨架

准备环节我多说几句，因为第一份作业翻车最频繁的地方，往往不在标签记没记住，而在工具和文件的细节上。

2.1 工具选择：从记事本到编辑器

理论上，用系统自带的记事本就能写HTML，因为HTML本质就是纯文本文件。但我不建议你用记事本，不是不能写，而是它没有语法高亮，标签、属性、内容全是同一个颜色，写错一个尖括号都不容易看出来。

推荐新手用一个带语法高亮的编辑器。VS Code、Sublime Text、Notepad++都行，如果不想折腾，直接选VS Code，免费、插件多、对新手友好。装好之后不用配任何复杂环境，新建一个文件，把后缀改成.html就可以开始写了。它的颜色区分会让你第一时间发现拼写错误。

2.2 文件命名与存放位置

这一节听起来很琐碎，但真的能救命：

• 文件名用英文小写，不要用中文。比如about.html、index.html，别叫个人介绍.html。
• 首页统一命名index.html，这是Web服务器的默认访问页面，也方便老师直接双击打开。
• 图片、CSS、JS分别建子文件夹，比如images、css，网页文件和图片放在同级目录下，后面写路径会非常省心。

我之前见过有同学把图片放在桌面，网页文件放在D盘某个文件夹里，然后写src="C:/Users/..."的绝对路径，结果拷给老师之后图片全裂了。老老实实做本地相对路径，才不容易出问题。

2.3 最基础的页面骨架，逐行拆给你听

无论做什么页面，HTML文件都有个固定的“骨架”，我的建议是每次新建文件都先把这个骨架敲出来，不要复制粘贴，敲几遍你就记住了：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> </body> </html>

简单解释一下每一行的作用，理解了你才知道为什么要写这些：

• <!DOCTYPE html>：告诉浏览器“这是一个HTML5文档”，它把浏览器切换到标准渲染模式。漏掉它，某些标签的显示效果可能在不同浏览器里不一致。
• <html lang="zh-CN">：根标签，lang="zh-CN"声明页面语言是简体中文，对搜索引擎和无障碍工具都有帮助。
• <head>：不是页面上显示的内容，而是页面的“元信息区”，放编码声明、标题、样式引用等。
• <meta charset="UTF-8">：字符编码。这行非常重要，少了它，中文很容易变成乱码。
• <title>：浏览器标签页上显示的文字，也是搜索引擎结果里的大标题。
• <body>：页面上所有能看到的内容，都写在这里。

这段骨架就像房子的地基和承重墙，虽然一开始看不出来什么，但没有它，后面装修得再好看也立不住。

3. 实操过程：从“白纸”到一份能拿分的作业

这一节我用一个具体的例子带你走完整流程。我们就做一个“个人介绍页”，这也是我第一次HTML作业做的内容。我会分步写，每步都说明为什么这么做。

3.1 先写内容，再想样式

很多新手会一边写内容一边调样式，结果越写越乱。正确顺序是：先用最朴素的标签把内容完整放上去，确保结构正确，再去加样式美化。

我当时的做法是先把下面这些内容敲进去：

<h1>关于我</h1> <h2>基本信息</h2> <p>我叫张三，是一名正在学习前端开发的学生。这是我的第一个HTML页面。</p> <h2>我的照片</h2> <img src="images/myphoto.jpg" alt="我的照片"> <h2>兴趣爱好</h2> <ul> <li>读书</li> <li>打篮球</li> <li>写代码</li> </ul> <h2>想说的话</h2> <p>希望自己能把基础打牢，做出越来越好看的网页。</p> <h2>友情链接</h2> <a href="https://www.baidu.com">搜索引擎</a>

这时候页面很朴素，但信息结构是清楚的。标题用<h1>到<h3>体现层级，段落用<p>，列表用<ul>/<li>，图片和链接用对应标签。老师一眼就能看出你对HTML的基本理解。

3.2 图片、链接、表格、表单的基本操作

第一份作业如果只堆标题和段落，内容会显得单薄。我建议再加一点其他常用元素，也顺便把标签练熟。

图片标签的完整常用写法是：

<img src="images/myphoto.jpg" alt="我的照片" width="200">

src是图片路径，alt是图片无法显示时的替代文字，width可以控制显示宽度。这里最需要注意的是路径。我把图片放在images文件夹里，网页文件在根目录，所以路径写成images/myphoto.jpg。记住尽量用相对路径，就是相对于当前网页文件所在位置去找图片，这样整个文件夹拷走也不怕。

超链接长这样：

<a href="https://www.xxx.com" target="_blank">网站名称</a>

href是跳转地址，target="_blank"表示在新标签页打开。对新手来说，target="_blank"是个很容易忽略但很实用的细节，尤其当链接指向外部网站时，新标签打开不会让用户丢掉你原来的页面。

表格的写法稍微繁琐一点，但很能体现基础功底：

<table border="1"> <tr> <th>课程</th> <th>时间</th> </tr> <tr> <td>HTML</td> <td>周一</td> </tr> <tr> <td>CSS</td> <td>周三</td> </tr> </table>

表格的结构是“行”见<tr>，行里面的“单元格”见<td>，表头单元格用<th>。这个结构新手容易搞混，我当初老是忘记<td>要包在<tr>里，结果表格全部挤在一行。

表单也是第一次作业里经常出现的元素，最简版长这样：

<form> 姓名：<input type="text" name="name"><br> 邮箱：<input type="email" name="email"><br> <input type="submit" value="提交"> </form>

你不用理解太深，先把input的type几种常见值（text、email、password、submit）过一遍就行。

3.3 第一次引入CSS，推荐用外链方式

HTML负责结构和内容，CSS负责样式。第一份作业一定会涉及CSS，哪怕只是改个背景色、字体大小。

CSS有三种引入方式：

• 内联样式：直接写在标签的style属性里，比如<p style="color: red;">。
• 嵌入样式：写在HTML文件的<head>里的<style>标签中。
• 外链样式：单独建一个.css文件，通过<link>引入。

我建议你从第一次作业就养成用外链的方式：

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

对应地，在css文件夹里建一个style.css，里面可以写：

body { background-color: #f5f5f5; font-family: Arial, "Microsoft YaHei", sans-serif; } h1 { color: #333; text-align: center; } p { line-height: 1.8; }

其实就三行基础样式，但页面看起来会从“原始文档”变成“像那么回事儿”。我把这些样式分散写在独立的CSS文件里，而不是内联，因为后面页面元素变多后，所有样式集中管理要清晰得多，修改一处全体生效。等学会了类名和选择器，你就更明白外链的好处了。

3.4 一份完整的作业示例代码

下面是我当年写的一份综合了上述元素的作业示例，你可以照着练手（内容请替换成你自己的）：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于我</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>关于我</h1> <h2>基本信息</h2> <p>大家好，我叫XXX，是一名正在学习前端开发的学生。这是我的第一个HTML作业页面。</p> <h2>我的照片</h2> <img src="images/me.jpg" alt="我的照片" width="200"> <h2>兴趣爱好</h2> <ul> <li>看书</li> <li>跑步</li> <li>听音乐</li> </ul> <h2>我的课程表</h2> <table border="1"> <tr> <th>课程</th> <th>时间</th> </tr> <tr> <td>HTML</td> <td>周一</td> </tr> <tr> <td>CSS</td> <td>周三</td> </tr> </table> <h2>留言板</h2> <form> 姓名：<input type="text" name="name"><br> 留言：<textarea name="message" rows="4" cols="30"></textarea><br> <input type="submit" value="提交"> </form> <h2>友情链接</h2> <a href="https://www.baidu.com" target="_blank">百度</a> </body> </html>

这个页面的信息量对于一个初学者作业来说已经足够了，而且每个模块都是独立成块的，阅读体验会比较舒服。写完之后，在浏览器里双击打开index.html，你看到的那个页面就是你的作品了。

4. 第一次HTML作业的常见问题与排查实录

这一节是我最想写的，因为我当年几乎把新手能踩的坑全踩了一遍。下面这些问题，如果你碰到了，照着排查基本都能解决。

4.1 图片显示不出来

“我明明放了图片，为什么页面上是个裂开的图标？”这是最高频的问题。排查顺序如下：

• 看路径对不对：<img src="images/me.jpg">，前提是me.jpg确实在images文件夹里，而且index.html和images文件夹在同一层。
• 看文件名大小写：me.jpg和Me.JPG在Windows下可能不区分，但上传到服务器或换到Mac上就区分了。建议全部统一用小写。
• 看图片格式：有些浏览器不支持某些冷门格式，建议用.jpg、.png、.gif这种通用格式。
• 看alt属性：如果alt文字正常显示，而图片裂了，基本就是路径问题，不是代码问题。

我刚开始老是把图片跟网页放在同一个文件夹，路径直接写文件名就行，但后来文件一多就乱了。所以我后来改成了统一放images文件夹，路径写images/xxx.jpg，问题就很少再犯。

4.2 CSS样式完全没生效

写了一堆样式，刷新一看，页面还是白底黑字。不要慌，按这四步查：

• 看<link>标签：href="css/style.css"的路径相对当前HTML文件是否正确。
• 看CSS文件后缀：有些人的文件其实叫style.css.txt，被系统隐藏了真实后缀，样式自然不生效。在资源管理器里把“隐藏已知文件类型的扩展名”关掉，确认后缀是.css。
• 看选择器：CSS里写h1 {}，而HTML里用的却是<span>，当然无效。检查选择器是否匹配目标标签。
• 看样式覆盖：有时候后面写的样式会覆盖前面的，同名的属性后者生效，这其实是CSS的正常逻辑，不算错误。

4.3 中文变成乱码

页面上中文全变成“锟斤拷”或者一堆菱形问号，绝大多数情况是编码问题。解决方法是：

在<head>里确认有这么一行：

<meta charset="UTF-8">

而且这行要在<title>之前。另外，用编辑器保存文件时，选择“以UTF-8编码保存”。VS Code右下角可以看编码格式，如果显示的不是UTF-8，点一下改成UTF-8再保存。

乱码还有一个隐藏原因：你用记事本打开然后另存为，格式被改成了ANSI。所以尽量一直用同一个编辑器操作。

4.4 页面和预览效果不一样

有同学用某编辑器的内置预览看着好好的，但用浏览器打开就不一样了。这是因为不同渲染环境的差异。从第一次作业开始就养成习惯：写完之后，用浏览器直接打开index.html看真实效果，不要过分依赖编辑器的预览功能。最常用的浏览器至少测一下，比如Chrome、Edge，两边都打开看看，能发现不少兼容性问题。

4.5 新手自查清单（交作业前必看）

下面是我后来整理成习惯的自查清单，每一条都是一次血泪教训：

• 页面文件名是否为index.html，且为英文小写。
• <meta charset="UTF-8">是否存在于<head>中。
• 所有<img>标签都有alt属性，且图片路径正确。
• 所有<a>标签的href都能点开。
• 所有标签都已正确闭合（<p>要有</p>，没闭合的裸标签赶紧补上）。
• HTML结构缩进整齐，嵌套关系清晰。
• CSS样式通过外部文件引入，而不是一把梭全堆在标签里。
• 用本机浏览器打开检查过一遍，不是只在编辑器预览里看。
• 把整个文件夹拷贝到另一个位置，确认图片、CSS都能正常显示。

5. 交作业前最后要做的几件事

别急着点提交，最后这几步很加分，而且基本不花额外时间。

5.1 测试“搬家”之后还能不能用

完成之后，我强烈建议你做一次“搬家测试”：把整个项目文件夹复制到桌面另一个目录，然后用浏览器打开复制出来的那个index.html，看看图片、样式、链接是否全部正常。这样做的目的是模拟老师拿到你的作业之后的场景，防止你依赖了自己电脑里的绝对路径。

5.2 给代码“梳妆打扮”

老师一天要批好多份作业，如果打开你的HTML文件，看到的是挤成一团、没有缩进的代码，第一印象绝对好不了。用编辑器自带的格式化功能，一键整理缩进（VS Code里右键就有“格式化文档”）。加上结构注释，比如：

<!-- 基本信息部分 --> <h2>基本信息</h2>

注释不需要写很多，隔几段标一下“这里是什么”，既显得专业，也方便你自己后期修改。

5.3 一个加分但不炫技的细节

如果你想让作业比同班同学多那么一点认真感，只需要做到一件事：让页面在手机上打开的时候不至于太难看。最简单的办法是在<head>里加一句：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这句话我不知道怎么用它什么“响应式原理”之类的词去解释，但实际效果就是，当手机浏览器打开你的页面时，页面宽度会按设备宽度自适应，而不是像缩小的桌面页面那样字小得看不清。就这一行，就足以让你的作业在手机查看时脱颖而出，而且一点都不难。

5.4 有空的话，可以试着加一点小交互

第一次作业通常不要求JavaScript，但如果你学有余力，可以埋一个最简单的“打招呼”功能：

<button onclick="alert('欢迎来到我的主页！')">点我</button>

alert会弹出一个提示框。这不算投机取巧，而是充分体现你在课外的探索。老师看到的时候会认为你不只是在完成任务，而是真对这个方向感兴趣。

我个人的体会是，第一次HTML作业最大的价值不在于页面有多好看，而在于它让你完整地走通了“设计内容-编写结构-调整样式-检测问题-交付成果”这一整条链路。这个链路我之后做无数的项目，都一直在用，只是每个环节的工具和复杂度在变而已。所以不用焦虑于做得多完美，把基础动作做标准，你已经赢了第一步。如果让我给一条最核心的建议，那就是：一定不要复制粘贴别人现成的代码，哪怕你是对着教程一个字一个字敲，都能让这份作业变成你自己的经验。等到期末或者学期结束你再回头看这份“第一次”，会清楚地看到自己从零到一走了多远。