很多同学的html第一次作业，是从双击一个.html文件开始的。文件经常是用记事本敲出来的，或者从某个教程页面直接复制，双击之后浏览器确实打开了一个白底黑字的页面，但下一步就不知道该怎么办了。作业交了，老师那边看到的样子却常常是：中文变成一团乱码，图片裂开成一个小图标，导航链接点了没反应，表单写了和没写一样。这篇就是想解决这几个问题的。
我会从一份标准页面骨架开始，拆完head拆body，再带你把交作业前的坑一个个踩平。不管老师给你布置的具体题目是个人介绍、家乡宣传页、课程表页面，还是“随便做一个网页”，核心都一样：用标准的HTML结构把内容装好，让浏览器正确识别并显示。这篇文章同时适合正在写作业的同学，以及那些被同学拉来帮忙排错的人。
1. 第一次HTML作业到底在考什么？先从标准骨架说起
很多同学以为HTML作业就是“内容堆上去，浏览器能显示就行”，这是最大的误解。第一次作业考的不是好看，而是三件事：结构完整、语义正确、资源有效。结构完整指的是doctype、html、head、body这些骨架一个都不能少；语义正确指的是该用标题用标题，该用段落用段落，别拿div堆一切；资源有效指的是图片能显示、链接能跳转、表单控件能交互。这三点全部合格，哪怕页面长得朴素，分数也不会低。
1.1 为什么<!doctype html>不是可有可无
你去看现成的网页源码时，第一行几乎都是<!doctype html>。它不是一个HTML标签，而是一句“文档类型声明”，它的意思是告诉浏览器：这份文档按最新的HTML5标准来解析。
这句话不写行不行？行，大多数情况下浏览器也能显示。但后果是浏览器可能会进入“怪异模式”（Quirks Mode），在这种模式下，盒模型、字体渲染、CSS布局的规则都会变得诡异。你后面学CSS时会遇到“同样的代码，别人的浏览器和我显示不一样”的经典问题，十有八九就是doctype没写。所以第一次作业的第一行，就稳稳写上这一句，写习惯了就好。
1.2lang="zh-cn"和<meta charset="utf-8">是中文不乱的根
我批作业时，十个里面有三四个会出现中文乱码。乱码的根源几乎都在head区，就两行代码的事。
第一行是<html lang="zh-cn">。lang属性声明这个页面是简体中文，浏览器遇到它时会按中文语义去处理文字，对字体渲染和浏览器自带的“翻译此页”功能都有影响。如果你的页面是英文内容，写lang="en"；如果是繁体，写lang="zh-hant"。
第二行是<meta charset="utf-8">。这行代码告诉浏览器：这个文件里面的文字是用UTF-8编码保存的，请按UTF-8来解码。当你用记事本保存HTML文件时，如果右下角编码选的是ANSI，而head里写的是utf-8，浏览器就会按UTF-8去读一个不是UTF-8的文件，中文立刻就乱了。记住：head里写什么编码，文件就必须用什么编码保存，两边要一致。
1.3 一套可以直接复制的标准骨架
第一次作业不管做什么页面，都可以用下面这套骨架起步。我建议你别直接复制粘贴，而是一个字一个字敲一遍，敲完你就能理解每一行的作用了。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我的第一个网页</title> </head> <body> <!-- 页面的内容写在这里 --> </body> </html><meta name="viewport" content="width=device-width, initial-scale=1">这一行你可能不理解，先不用深究，它管的是手机端显示比例。写上去没有坏处，还能让页面看起来更专业。<title>是必填项，它显示在浏览器标签页上。我第一次做作业时用的是“无标题文档”，老师直接在评语里写了“标题都没有，思路不清”，这个教训我一直记得。
2. 手工搭建一个“作业级”个人主页：从head到body逐个拆解
骨架有了，接下来是body里的内容。第一次作业最常见的题目是“个人主页”，我就拿它当例子。个人主页一般需要这几个板块：页头标题、导航菜单、自我介绍文字、个人信息表格、兴趣爱好列表、留言表单。这些板块正好覆盖了HTML最常用的标签，一次作业能把它们全用上，基础就扎实了。
2.1 先花15分钟画页面结构图，再写代码
很多同学上来就打开编辑器噼里啪啦打字，写到一半发现板块乱套。我的习惯是先在纸上或者脑子里把页面切成几块，比如：
- 顶部：一个主标题
h1，一句个人简介 - 导航：一排链接，用列表结构
- 主体：自我介绍文字，用段落；个人信息，用表格；兴趣爱好，用列表
- 底部：一个留言表单，一个版权声明
这些块在HTML里就是一个个“盒子”，块级元素（比如div、p、h1）默认从上往下依次排列。你先把纸上的结构画出来，再动手写代码，思路会清晰很多。“先结构后样式，先把框架搭出来再去调细节”，这个习惯能帮你避开后面CSS阶段的大多数痛苦。
2.2 body里的高频标签：标题、段落、列表、链接、图片、表格
写个人主页时，你会频繁用到这些标签：
<h1>李明</h1> <p>一个正在学习前端开发的大一学生，喜欢摄影和打羽毛球。</p> <h2>我的兴趣爱好</h2> <ul> <li>骑车</li> <li>听播客</li> <li>做简单的家常菜</li> </ul> <h2>我的基本信息</h2> <table> <tr> <td>学校</td> <td>某某大学</td> </tr> <tr> <td>专业</td> <td>计算机科学</td> </tr> </table> <h2>我的照片</h2> <img src="images/me.jpg" alt="我的照片"> <h2>友情链接</h2> <a href="https://www.example.com">去我的博客看看</a>这里有几个细节。
<h1>在整张页面里只能出现一次，它表示页面最重要的主标题。别为了字体大就把h1当修饰工具用，那是CSS该做的事，标题标签是用来表达“层级关系”的。
列表有有序列表ol和无序列表ul，导航菜单、兴趣清单用ul就好。如果顺序有意义，比如学习步骤，才用ol。
表格table在第一次作业里非常常见。注意，HTML的表格是给浏览器展示数据用的，不是拿来替代WPS表格的。我之前看到有同学试图用HTML表格做成绩计算，那就是用错了地方——表格的定位是“展示”，不是“计算”。什么公式、汇总，那是Excel的活，别在HTML里硬拼。
img标签里的alt属性不只是给读屏软件用的，当图片加载失败时，浏览器会显示这段替代文字。你写“我的照片”，图片裂开时老师至少知道这里本来想放什么。src后面跟的是图片路径，这里我写的是images/me.jpg，意思是html文件所在目录下有个images文件夹，图片me.jpg就在里面。这种路径叫相对路径，也是后面图片不显示的“事故高发区”。
2.3 表单：第一次作业里最容易被挑刺的部分
表单标签是很多第一次作业的“重灾区”。表单本身不难，最常出问题的是两件事：form的action和method写错，以及表单控件漏了name属性。
<h2>给我留言</h2> <form action="#" method="post"> <label for="username">你的名字：</label> <input type="text" id="username" name="username"> <label for="email">你的邮箱：</label> <input type="email" id="email" name="email"> <label>你的性别：</label> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <label for="message">留言内容：</label> <textarea id="message" name="message" rows="5" cols="30"></textarea> <button type="submit">提交</button> </form>action写#表示提交到当前页面自己处理，因为没有后端接收数据，第一次作业不需要真正把数据送出去。method用post还是get，在作业阶段区别不大，后面学到HTTP时再深入。最关键的是：每个输入框、下拉框、多行文本框都要有name属性。因为表单提交的本质是“name=value”这样的键值对，没有name字段，浏览器根本不知道该把输入的内容当成什么数据发出去。
我在批作业时经常看到注册一堆input，挨个点开一看，全都没有name。这种表单哪怕后端接口摆在那，也收不到任何有效数据。第一次作业可能不测提交功能，但老师会抓这种细节。
顺带提一句：作业里用到的input的type，可以简单理解成“这个框接受什么内容”。type="email"会让手机端弹出邮箱键盘，type="password"会隐藏输入内容。把这些属性用好，页面就会比同龄人的作业精细一个档次。
3. 交作业前最容易翻车的5个细节：乱码、路径、闭合与大小写
前两章解决的是“怎么写”，这一章解决的是“为什么作业交上去就坏了”。我自己总结了一下，第一次作业翻车最集中的就5类：中文乱码、图片路径错、标签闭合乱、属性大小写不一致、页面在自己电脑上好了到了老师电脑上就废了。这5个问题每一个都可以单独毁掉一次作业，而且它们往往同时出现。
3.1 中文变“锟斤拷”的根因和三种根治办法
如果你在浏览器里看到“锟斤拷”“烫烫烫”这种诡异字符，说明页面出现了编码错位。“锟斤拷”是UTF-8字节被当成GBK解码的典型产物，“烫烫烫”是内存未初始化字符的经典体现，而在浏览器里，最常见的情况是“文件保存编码”和“页面声明编码”没对上。
根治办法三个，按优先级排：
第一，编辑器设置里把默认编码改成UTF-8。用VS Code的话，右下角状态栏会显示当前文件的编码格式，点一下就能改成UTF-8。用记事本的话，“另存为”时右下角“编码”一栏手动选UTF-8。
第二，<meta charset="utf-8">这行要放在<head>的最前面。有些同学把它写在<title>后面，极少数浏览器在解析到charset之前就已经按默认编码读了几个字节，在极端情况下中文还是会乱。放最前面最保险。
第三，文件里不要混入从Word里直接复制的中文。Word的引号、空格有时会变成特殊字符，存进HTML里虽然不一定乱码，但会让代码变得古怪。在编辑器里写中文，不要从Word粘贴。
3.2 图片不显示？问题八成出在路径上
图片裂开是第一次作业的“头号杀手”。它的典型表现是：在自己电脑上双击html，图片显示得好好的；把整个文件夹打包发给老师，图片全裂了。
原因基本是用了绝对路径。什么叫绝对路径？比如<img src="C:\Users\小明\Desktop\作业\images\me.jpg">。这个路径只在你自己电脑上存在，拷到老师的电脑上，后面的盘符、用户名、目录层级全都对不上，浏览器找不到就裂。另外，路径里带中文、空格，也会在传输或上传时出幺蛾子。
正确做法永远是用相对路径。相对路径是“相对于这个html文件所在位置”的路径：
index.html images/ me.jpgindex.html里引用图片，就写src="images/me.jpg"；如果html在子目录里，想引用上一级目录的图片，就写src="../images/me.jpg"。两个点表示“向上跳一级”，这是最基础的相对路径语法，第一次作业只要掌握这两条就够了。
从今天起养成一个习惯：动手写页面之前，先建好文件夹结构，把图片放进去，再用相对路径去引用。这样你的作业就永远不会犯“拷贝就裂”的毛病。在线图片链接（以http开头的图片地址）虽然也是一种方式，但老师没网时一样裂，而且很多大学的机房是断外网的。本地图片永远是最稳的。
3.3 浏览器能显示不等于代码没毛病：标签闭合与嵌套顺序
浏览器的容错能力很强，标签没闭合它也能猜出你的意思，勉强把页面渲染出来。但容错不等于没问题，等后面学了CSS，一个没闭合的div可能会让你的整个布局错位，找半天找不到原因。所以第一次作业就要养成闭合的习惯。
两个最常见的问题：
第一个是块级元素嵌套错误。p标签里面不能再套div，ul里面直接塞div也是不合法的。记住一个口诀：“列表里面只放li，li里面才能放别的东西；段落里面只放行内元素，比如文字、链接、图片。”
第二个是标签交叉。比如<b>加粗<em>斜体</b></em>，开始标签的顺序和结束标签的顺序不一致，这在HTML里是结构错误，渲染时行为不可预测。正确写法是<b>加粗<em>斜体</em></b>，先打开的后关闭，像洋葱一样一层一层包着。
怎么自查？两个方法。一是写代码时坚持“一次敲一个完整标签对”，先写<div></div>再往里填内容，别先写一堆<div>再闭。二是写完用浏览器F12打开开发者工具，看Elements（元素）面板，浏览器会在渲染好的结构上标出层级，如果有不合理的嵌套，一眼就能看出来。
3.4 用F12和“拷贝测试”给页面做一次体检
F12开发者工具是每个学HTML的人第一个要熟练用的工具。打开页面，按F12，重点看三个面板：
- Elements（元素）：看最终渲染出来的DOM结构，和你要的层级对不对。
- Console（控制台）：如果有JS报错，这里会显示红色报错信息。
- Network（网络）：看图片、CSS文件是否有加载失败。
不过F12只能测“代码逻辑”，测不出“文件路径问题”。我教学生时最常用的一招叫“拷贝测试”：你把做好的整个文件夹复制到另一个位置，比如从桌面复制到D盘，然后再打开里面的index.html，看图片、链接是不是还正常。如果换地方就裂了，说明你用了绝对路径；如果一切正常，说明这个作业的文件结构是健康的。
“拷贝测试”几乎是老师的视角。老师拿到你的作业时，做的就是类似的事——解压文件夹，双击打开，看看能不能正常显示。你提前用这招自测一遍，能避免绝大多数提交后才暴露的问题。
3.5 属性大小写、引号和空格：看起来小，坑起来要命
最后说一个容易被忽视的细节：属性名的大小写。HTML标签名和属性名其实大小写不敏感，写成<IMG>也能识别，但规范习惯是小写。真正致命的不是属性名，而是属性值里的文件名。me.jpg和Me.JPG在Windows下可能显示正常，因为Windows文件系统不区分大小写；但传到Mac或者Linux服务器上就找不到了，因为Linux是严格区分大小写的。稳妥做法是：文件名、扩展名、代码里的引用，保持完全一致，并且全部用小写。
还有属性的引号，推荐统一用双引号，别一半双引号一半单引号，更别裸奔不带引号。比如width=100这种写法在HTML5里浏览器能容忍，但你一旦混入复杂属性就会出错。规范一点：所有属性值用双引号包起来。
4. 想让作业超出预期？加一点CSS和JS的安全加法
第一次作业的主要目标是HTML结构，但不妨碍你加一点CSS和JS作为“安全加分项”。注意关键词是“安全”——加的东西必须稳定、不破坏现有结构，别为了炫技把页面搞崩。这一章的方法都是我验证过的，代码量极小，但会让老师对你的印象完全不同。
4.1 一个<style>标签就能让页面脱胎换骨
在head区里加一个<style>标签，里面写几条最简单的样式，页面立刻从“记事本风格”变成“像个正常人设计的页面”。
<style> body { background-color: #f7f7f7; color: #333; font-family: Arial, "Microsoft YaHei", sans-serif; line-height: 1.8; } h1 { text-align: center; color: #2c3e50; } img { max-width: 100%; height: auto; } </style>这几行代码的作用：背景不是刺眼的纯白，文字颜色和行距更舒服，标题居中且颜色沉稳，图片不会超出屏幕。line-height: 1.8是行距，特别是整段自我介绍文字，行距调大一点读起来完全不累。
这时你其实已经用了“CSS基础语法”里最核心的“选择器+声明块”。选择器（比如body）选中你要控制的元素，大括号里每条声明（比如color: #333）由一个属性和一个值组成。第一次作业能写成这样，说明你已经摸到CSS的门了。
有人问我：写CSS是直接写在标签的style属性里，还是写在<style>标签里？第一次作业阶段，推荐写在<style>标签里，因为你只需要维护这一个文件，提交方便、不会出现CSS文件找不到的情况。等后面学外链样式表，再把样式拆到独立.css文件里。
4.2 一个按钮和三行JS：第一次作业里最简单有效的交互
“会不会写一点JS”是作业拉开差距的地方。但第一次作业不需要会什么复杂语法，用onclick这种内联事件就能做出像样的交互效果。
<button onclick="alert('你好，欢迎光临我的个人主页')">点我打招呼</button>点一下按钮，弹出一个浏览器原生弹窗。就这一行，你的页面就具备了“交互功能”。你说这算技术含量高吗？其实不高，但它证明你已经理解了一个最基本的JS事件模型——用户操作触发函数运行。很多同学学到后面才发现，事件机制前端最重要的地基，第一次作业里就能种下这颗种子。
如果你想再稳一点，可以把JS独立成函数，写在body末尾的<script>标签里：
<script> function showGreeting() { alert("你好，欢迎光临我的个人主页！"); } </script>然后按钮写成onclick="showGreeting()"。这样代码看起来更专业，以后要增加逻辑也不用堆在HTML标签里。但注意，<script>标签在body里放在最后，不要放在head里，不然页面还没渲染完就要执行脚本，容易报错。
4.3 一键返回顶部：长页面必备的小脚本
如果你的个人主页内容很长，滚动条拖到底后想回顶部，鼠标滚轮要滚半天。加一个“返回顶部”按钮是很多老师都比较欣赏的小功能。网上能搜到很多“返回顶部算法”，第一次作业阶段其实用不上那些复杂的实时显示/隐藏逻辑，写一个最简单能用的就够了。
<a href="#" onclick="window.scrollTo(0,0); return false;">返回顶部</a>解释一下这行代码：window.scrollTo(0,0)让浏览器把滚动条滚回页面最顶部，return false是为了阻止href="#"这个默认行为（否则页面会在URL后面加一个#，有些情况下还会再跳一下）。如果你想滚动过程更顺滑，可以换成：
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})">返回顶部</button>behavior: 'smooth'就是平滑滚动，中文俗称“丝滑回顶”。这段代码在第一次作业里已经算“超出预期”了，但前提是你的页面真的够长——只有两屏内容还放个返回顶部按钮，会显得画蛇添足。
4.4 锚点跳转：一个能直接拉开差距的小细节
与返回顶部类似，锚点跳转也是第一次作业里性价比极高的技巧。给页面的每个板块加上id属性，导航里的链接指向这些id，点击导航就能直接跳到对应板块。
<h2 id="hobby">我的兴趣爱好</h2>导航里写：
<a href="#hobby">兴趣爱好</a>点击“兴趣爱好”这个链接，页面会自动滚动到id="hobby"的那个标题。它的原理是：href里面写#加id值，浏览器会自动寻找页面中对应id的元素并滚动到它。这个功能在个人主页里很实用，导航有了它才真的像“导航”。很多人第一次作业就漏掉这个，老师评语里经常写“导航链接点了没反应”。
5. 提交前的文件整理与格式转换：从index.html到PDF和MD
作业写完代码只是第一步，提交的形态同样重要。我从第一次带项目课开始就不断强调“交付感”：老师看到的不只是一个文件，而是一个“结构清晰、命名规范、开箱即用”的小项目。这一章教你怎么在提交前把文件整理得干净利落，顺便解决一个很多同学会问的问题：老师只要PDF怎么办？我想存一份Markdown笔记怎么办？
5.1 文件命名与目录：作业也要讲基本法
主文件名统一叫index.html。index是“首页”的约定俗成名字，Web服务器默认会先找它，以后你学部署时就会知道这个命名的重要性。把文件夹命名为“姓名-学号-html第一次作业”，里面放index.html和images文件夹，结构如下：
张三-20240001-html第一次作业/ index.html images/ me.jpg如果你做了多个HTML页面，比如index.html、about.html、hobby.html，页面之间用<a href="about.html">互相跳转。多页面文件之间的路径同样用相对路径。注意，文件夹名字里别带乱七八糟的符号，空格要么去掉，要么用短横线代替。
整理完成后，右键这个文件夹，压缩成zip包再提交。压缩包的名字和文件夹名字保持一致。很多在线作业系统不允许直接上传文件夹，压缩包是最稳妥的提交方式。这里还有个小技巧：打包前再双击index.html预览一遍，确认压缩前的最后一个版本是能正常打开的。
5.2 老师只要PDF或Word？用浏览器打印另存为PDF
有些课程作业最终要交PDF，因为老师在PDF上方便批注。把HTML变成PDF最简单的方法是使用浏览器自带的打印功能：打开你的html页面，按Ctrl+P，在“目标打印机”里选“另存为PDF”，然后保存。浏览器会自动把网页内容转成一个PDF文件。
要注意一个细节：打印预览里默认是不显示背景色和背景图的。如果你用了第4章里的浅灰背景，预览时可能变成白色，样式感会弱一些。解决方法是：在打印窗口里找到“背景图形”“背景颜色”这类选项，勾上再导出。
如果以后你后端接Java项目，要把HTML转成PDF还要加个水印，那才轮得到itext7这类库出场——那是后端开发的场景，第一次作业完全不用碰，用浏览器打印足够交付。至于Word，在没有特殊要求的情况下不必转，老师要的网页作业，原生就是HTML格式。
5.3 想保留一份学习笔记：HTML转Markdown的快速路径
很多同学看完自己的代码，想整理成长文笔记沉淀下来。HTML转Markdown最省事的一条路是用pandoc。在电脑上安装pandoc之后，命令行里跑一条命令：
pandoc index.html -o 作业笔记.mdpandoc会读取HTML里的标题结构、段落、列表、表格，转成对应Markdown语法。如果没装pandoc，用Typora这类Markdown编辑器直接把HTML文件内容复制进去，再另存为md文件，效果也差不多。转完之后检查一下图片路径，因为Markdown图片路径和HTML的引用方式不完全一样，可能需要手动调整。
关于“html格式转换wps表格”这种问题，顺手澄清一下：HTML表格table标签和WPS表格（Excel）是两个完全不同的东西。刚才说过，HTML表格是用来在网页里展示数据的，WPS表格是用来做数据分析、公式计算的。如果你想把自己excel表格发布成网页，可以用WPS/Excel自带的“另存为网页/HTML”功能，但那生成的是文件格式转换，不是HTML阶段要掌握的技能。第一次作业的表格，规规矩矩用table标签写即可。
5.4 交作业前最后一遍自查清单
交作业前30分钟，按这个清单过一遍。我就是用这张单子帮人排查了无数份作业，直击要害：
- 代码第一行是不是
<!doctype html>？<html lang="zh-cn”>、<meta charset="utf-8">是不是都在？ - 页面上所有中文是否正常显示？没有一个字是“锟斤拷”或问号？
- 所有图片用的是相对路径吗？
src指向的文件真的存在于那个位置吗？ - 每个
img有没有写alt？每个input、textarea、select有没有写name？ - 每个
a链接点了都有跳转吗？锚点href="#id"对应的id真的存在吗？ - 按F12，Console面板有没有红色报错？Network面板里有没有红色失败项？
- 最后做“拷贝测试”：把整个文件夹复制到另一个盘，解压，打开
index.html，再检查一遍。
对了，之前提到有些环境不带图形界面，比如你在一台Linux服务器上，没有浏览器，只能靠肉眼读HTML源码来排查问题。这时可以用cat index.html直接在终端里看源码，或者用grep -n "img" index.html快速找出所有图片引用。学会在命令行里瞄一眼HTML，以后排查问题时能省不少事。总而言之，第一次作业交付前把上面这些点检查到位，基本就是同批作业里最稳的那一档了。
写着写着我想起自己第一次交作业时的场景：满心欢喜地把一个文件拖进优盘，结果老师打开后图片全是叉。后来才明白，那份作业的图片路径写的是C:\Users\...，换了电脑必裂。这个错误让我记到现在，所以这篇文章里反反复复用各种角度提醒路径问题。第一次HTML作业没有你想象中那么可怕，它也不要求你写出什么惊艳的效果，只要求你把最基本的骨架、标签和资源路径理顺。骨架立住了，后面再加CSS、JS都会水到渠成，祝你顺利交出一份老师挑不出毛病的作业。
