很多同学的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.2langzh-cn和meta charsetutf-8是中文不乱的根我批作业时十个里面有三四个会出现中文乱码。乱码的根源几乎都在head区就两行代码的事。第一行是html langzh-cn。lang属性声明这个页面是简体中文浏览器遇到它时会按中文语义去处理文字对字体渲染和浏览器自带的“翻译此页”功能都有影响。如果你的页面是英文内容写langen如果是繁体写langzh-hant。第二行是meta charsetutf-8。这行代码告诉浏览器这个文件里面的文字是用UTF-8编码保存的请按UTF-8来解码。当你用记事本保存HTML文件时如果右下角编码选的是ANSI而head里写的是utf-8浏览器就会按UTF-8去读一个不是UTF-8的文件中文立刻就乱了。记住head里写什么编码文件就必须用什么编码保存两边要一致。1.3 一套可以直接复制的标准骨架第一次作业不管做什么页面都可以用下面这套骨架起步。我建议你别直接复制粘贴而是一个字一个字敲一遍敲完你就能理解每一行的作用了。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的第一个网页/title /head body !-- 页面的内容写在这里 -- /body /htmlmeta nameviewport contentwidthdevice-width, initial-scale1这一行你可能不理解先不用深究它管的是手机端显示比例。写上去没有坏处还能让页面看起来更专业。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 srcimages/me.jpg alt我的照片 h2友情链接/h2 a hrefhttps://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# methodpost label forusername你的名字/label input typetext idusername nameusername label foremail你的邮箱/label input typeemail idemail nameemail label你的性别/label input typeradio namegender valuemale 男 input typeradio namegender valuefemale 女 label formessage留言内容/label textarea idmessage namemessage rows5 cols30/textarea button typesubmit提交/button /formaction写#表示提交到当前页面自己处理因为没有后端接收数据第一次作业不需要真正把数据送出去。method用post还是get在作业阶段区别不大后面学到HTTP时再深入。最关键的是每个输入框、下拉框、多行文本框都要有name属性。因为表单提交的本质是“namevalue”这样的键值对没有name字段浏览器根本不知道该把输入的内容当成什么数据发出去。我在批作业时经常看到注册一堆input挨个点开一看全都没有name。这种表单哪怕后端接口摆在那也收不到任何有效数据。第一次作业可能不测提交功能但老师会抓这种细节。顺带提一句作业里用到的input的type可以简单理解成“这个框接受什么内容”。typeemail会让手机端弹出邮箱键盘typepassword会隐藏输入内容。把这些属性用好页面就会比同龄人的作业精细一个档次。3. 交作业前最容易翻车的5个细节乱码、路径、闭合与大小写前两章解决的是“怎么写”这一章解决的是“为什么作业交上去就坏了”。我自己总结了一下第一次作业翻车最集中的就5类中文乱码、图片路径错、标签闭合乱、属性大小写不一致、页面在自己电脑上好了到了老师电脑上就废了。这5个问题每一个都可以单独毁掉一次作业而且它们往往同时出现。3.1 中文变“锟斤拷”的根因和三种根治办法如果你在浏览器里看到“锟斤拷”“烫烫烫”这种诡异字符说明页面出现了编码错位。“锟斤拷”是UTF-8字节被当成GBK解码的典型产物“烫烫烫”是内存未初始化字符的经典体现而在浏览器里最常见的情况是“文件保存编码”和“页面声明编码”没对上。根治办法三个按优先级排第一编辑器设置里把默认编码改成UTF-8。用VS Code的话右下角状态栏会显示当前文件的编码格式点一下就能改成UTF-8。用记事本的话“另存为”时右下角“编码”一栏手动选UTF-8。第二meta charsetutf-8这行要放在head的最前面。有些同学把它写在title后面极少数浏览器在解析到charset之前就已经按默认编码读了几个字节在极端情况下中文还是会乱。放最前面最保险。第三文件里不要混入从Word里直接复制的中文。Word的引号、空格有时会变成特殊字符存进HTML里虽然不一定乱码但会让代码变得古怪。在编辑器里写中文不要从Word粘贴。3.2 图片不显示问题八成出在路径上图片裂开是第一次作业的“头号杀手”。它的典型表现是在自己电脑上双击html图片显示得好好的把整个文件夹打包发给老师图片全裂了。原因基本是用了绝对路径。什么叫绝对路径比如img srcC:\Users\小明\Desktop\作业\images\me.jpg。这个路径只在你自己电脑上存在拷到老师的电脑上后面的盘符、用户名、目录层级全都对不上浏览器找不到就裂。另外路径里带中文、空格也会在传输或上传时出幺蛾子。正确做法永远是用相对路径。相对路径是“相对于这个html文件所在位置”的路径index.html images/ me.jpgindex.html里引用图片就写srcimages/me.jpg如果html在子目录里想引用上一级目录的图片就写src../images/me.jpg。两个点表示“向上跳一级”这是最基础的相对路径语法第一次作业只要掌握这两条就够了。从今天起养成一个习惯动手写页面之前先建好文件夹结构把图片放进去再用相对路径去引用。这样你的作业就永远不会犯“拷贝就裂”的毛病。在线图片链接以http开头的图片地址虽然也是一种方式但老师没网时一样裂而且很多大学的机房是断外网的。本地图片永远是最稳的。3.3 浏览器能显示不等于代码没毛病标签闭合与嵌套顺序浏览器的容错能力很强标签没闭合它也能猜出你的意思勉强把页面渲染出来。但容错不等于没问题等后面学了CSS一个没闭合的div可能会让你的整个布局错位找半天找不到原因。所以第一次作业就要养成闭合的习惯。两个最常见的问题第一个是块级元素嵌套错误。p标签里面不能再套divul里面直接塞div也是不合法的。记住一个口诀“列表里面只放lili里面才能放别的东西段落里面只放行内元素比如文字、链接、图片。”第二个是标签交叉。比如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是严格区分大小写的。稳妥做法是文件名、扩展名、代码里的引用保持完全一致并且全部用小写。还有属性的引号推荐统一用双引号别一半双引号一半单引号更别裸奔不带引号。比如width100这种写法在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 onclickalert(你好欢迎光临我的个人主页)点我打招呼/button点一下按钮弹出一个浏览器原生弹窗。就这一行你的页面就具备了“交互功能”。你说这算技术含量高吗其实不高但它证明你已经理解了一个最基本的JS事件模型——用户操作触发函数运行。很多同学学到后面才发现事件机制前端最重要的地基第一次作业里就能种下这颗种子。如果你想再稳一点可以把JS独立成函数写在body末尾的script标签里script function showGreeting() { alert(你好欢迎光临我的个人主页); } /script然后按钮写成onclickshowGreeting()。这样代码看起来更专业以后要增加逻辑也不用堆在HTML标签里。但注意script标签在body里放在最后不要放在head里不然页面还没渲染完就要执行脚本容易报错。4.3 一键返回顶部长页面必备的小脚本如果你的个人主页内容很长滚动条拖到底后想回顶部鼠标滚轮要滚半天。加一个“返回顶部”按钮是很多老师都比较欣赏的小功能。网上能搜到很多“返回顶部算法”第一次作业阶段其实用不上那些复杂的实时显示/隐藏逻辑写一个最简单能用的就够了。a href# onclickwindow.scrollTo(0,0); return false;返回顶部/a解释一下这行代码window.scrollTo(0,0)让浏览器把滚动条滚回页面最顶部return false是为了阻止href#这个默认行为否则页面会在URL后面加一个#有些情况下还会再跳一下。如果你想滚动过程更顺滑可以换成button onclickwindow.scrollTo({top: 0, behavior: smooth})返回顶部/buttonbehavior: smooth就是平滑滚动中文俗称“丝滑回顶”。这段代码在第一次作业里已经算“超出预期”了但前提是你的页面真的够长——只有两屏内容还放个返回顶部按钮会显得画蛇添足。4.4 锚点跳转一个能直接拉开差距的小细节与返回顶部类似锚点跳转也是第一次作业里性价比极高的技巧。给页面的每个板块加上id属性导航里的链接指向这些id点击导航就能直接跳到对应板块。h2 idhobby我的兴趣爱好/h2导航里写a href#hobby兴趣爱好/a点击“兴趣爱好”这个链接页面会自动滚动到idhobby的那个标题。它的原理是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 hrefabout.html互相跳转。多页面文件之间的路径同样用相对路径。注意文件夹名字里别带乱七八糟的符号空格要么去掉要么用短横线代替。整理完成后右键这个文件夹压缩成zip包再提交。压缩包的名字和文件夹名字保持一致。很多在线作业系统不允许直接上传文件夹压缩包是最稳妥的提交方式。这里还有个小技巧打包前再双击index.html预览一遍确认压缩前的最后一个版本是能正常打开的。5.2 老师只要PDF或Word用浏览器打印另存为PDF有些课程作业最终要交PDF因为老师在PDF上方便批注。把HTML变成PDF最简单的方法是使用浏览器自带的打印功能打开你的html页面按CtrlP在“目标打印机”里选“另存为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 htmlhtml langzh-cn”、meta charsetutf-8是不是都在页面上所有中文是否正常显示没有一个字是“锟斤拷”或问号所有图片用的是相对路径吗src指向的文件真的存在于那个位置吗每个img有没有写alt每个input、textarea、select有没有写name每个a链接点了都有跳转吗锚点href#id对应的id真的存在吗按F12Console面板有没有红色报错Network面板里有没有红色失败项最后做“拷贝测试”把整个文件夹复制到另一个盘解压打开index.html再检查一遍。对了之前提到有些环境不带图形界面比如你在一台Linux服务器上没有浏览器只能靠肉眼读HTML源码来排查问题。这时可以用cat index.html直接在终端里看源码或者用grep -n img index.html快速找出所有图片引用。学会在命令行里瞄一眼HTML以后排查问题时能省不少事。总而言之第一次作业交付前把上面这些点检查到位基本就是同批作业里最稳的那一档了。写着写着我想起自己第一次交作业时的场景满心欢喜地把一个文件拖进优盘结果老师打开后图片全是叉。后来才明白那份作业的图片路径写的是C:\Users\...换了电脑必裂。这个错误让我记到现在所以这篇文章里反反复复用各种角度提醒路径问题。第一次HTML作业没有你想象中那么可怕它也不要求你写出什么惊艳的效果只要求你把最基本的骨架、标签和资源路径理顺。骨架立住了后面再加CSS、JS都会水到渠成祝你顺利交出一份老师挑不出毛病的作业。