1. 先搞清楚HTML作业一到底在考察什么刚接触HTML的同学拿到“html作业一”这个题目时第一反应多半是发懵。我看过太多人打开编辑器盯着空白的.html文件不知道第一行该写什么。其实你完全不用慌任何一门课的第一次作业考察的从来不是你能写出多炫酷的页面而是三件基础到不能再基础的事文档结构是否标准、标签使用是否语义化、代码书写是否规范。先说个很多新手都会踩的坑HTML不是编程语言它不包含任何逻辑判断没有循环没有变量它只是一套“标记语言”。你可以把它理解为一份“排版说明书”——你告诉浏览器“这是标题这是段落这是图片这是链接”浏览器负责把这些标记渲染成你看到的网页。所以HTML作业一本质上考察的是你对这份说明书的语法和常用标记掌握得牢不牢。我见过特别多同学在第一次作业里犯同一个毛病直接在记事本里噼里啪啦写一堆文字不做任何标记然后保存成.html文件。浏览器打开之后确实能看到那些文字但整个页面就是一坨没有层级、没有样式的纯文本。这种作业交上去即使内容再充实评分老师一眼就能看出你对HTML完全没有概念。还有一类同学正好相反他们喜欢“炫技”在网上抄一段带JavaScript特效的代码贴进作业里。不是说不行但第一次作业考察的是基础你堆一堆自己都解释不清楚的代码上去答辩的时候一问三不知反而暴露问题。正确的策略是用最朴素的标准语法把页面结构搭得干净利落让老师挑不出毛病。下面这几节我会按照“思路—结构—实现—扩展—检查”这条线带你完整走一遍一个能拿高分的HTML作业一应该有的样子。2. 动手写代码前先把骨架标签背熟HTML文档的骨架极其固定几乎每一份网页都以同样的方式开头。我先把最基础的一份模板摆在这里这是我们整篇作业的“地基”!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body !-- 页面可见内容都写在body里 -- /body /html这几行代码每一个都有讲究我逐个给你拆开讲清楚。2.1!doctype html这条声明不能省很多同学第一次见到这行代码时会觉得莫名其妙甚至有人嫌它碍事直接删掉。我明确告诉你千万别删。!doctype html是文档类型声明它告诉浏览器“我这份文件遵循的是HTML5标准”。如果你省掉这行浏览器会进入一种叫做“怪异模式”的状态它对标签的解析规则和标准模式完全不同。最直接的后果就是你可能在某个浏览器里调试好的页面换一个浏览器打开就乱了。字体大小对不上、边框多出几像素、居中失灵——这些诡异问题八成都是因为少了这一行。2.2html langzh-cn是给谁看的lang属性指定了页面内容的语言。zh-cn表示简体中文。这个属性一方面给浏览器看帮助它判断是否弹出“翻译此页”的提示另一方面给搜索引擎和屏幕阅读器看方便它们正确识别页面语言。虽然第一次作业的评分老师未必会检查这个属性但从规范角度说写上是加分项说明你对HTML标准有完整的认知。2.3meta charsetutf-8决定中文能不能正常显示这一个属性是中文网页的重中之重我见过太多人第一次作业里中文全部变成乱码就是因为漏了这一行。charsetutf-8指定了文档的字符编码方式。简单类比一下你写文档用的编码和浏览器读取用的编码必须一致否则就像两个人用不同的密码本翻译同一封电报翻出来全是乱码。utf-8是目前最通用的编码格式支持所有主流语言字符也是HTML5的默认推荐编码。而且记住一个关键点这一行必须放在head的最前面最好在第1行。因为浏览器是边读边解析的如果它先读到的是中文内容再看到编码声明前面的中文可能已经解码错误了。另外我建议你在用代码编辑器保存文件的时候确认一下右下角的编码格式也选的是UTF-8而不仅是HTML里写了这行声明。以前遇到过不少同学HTML里明明写着charsetutf-8但编辑器默认保存成ANSI编码打开照样乱码。两边保持一致才是稳妥的。2.4head和body的分工逻辑head部分放的是页面的“元信息”——标题、编码声明、样式表引用、给搜索引擎看的关键字描述等。head里的所有内容都不会直接显示在网页上它存在的意义是告诉浏览器“这篇文章的背景资料”。body部分才是一份网页真正“给人看”的内容。段落、图片、表格、按钮全部都要写在body里。分清这两个区域是HTML入门的第一道关卡之后所有的标签你都要问自己一句这个标签是给用户看的还是给浏览器看的给用户看的进body给浏览器和搜索引擎看的进head。注意如果把内容误写到head里浏览器虽然不一定报错但页面可能什么都不显示或者布局异常。排查问题的时候优先检查内容是否放对了区域。3. 作业一的内容区用最常用的标签搭出一个完整页面骨架有了接下来填充血液。一份合格的HTML作业一通常需要覆盖以下几个基础标签的使用场景。我不建议你只写一段干巴巴的“你好世界”就交差那样内容量太薄看着不像一份完整的作业。下面这套组合基本是所有HTML入门课默认的“标准配置”。3.1 标题与段落h系列和p标签的层级逻辑HTML里提供了六个级别的标题从h1到h6重要性依次降低。这里有个常见误区初学者容易把h1当成“大号加粗文字”来用哪个字想突出就套个h1。这是不对的。标题标签表达的是文档结构类似一本书的目录层级。一份页面通常只有一个h1它是整篇内容的主题下面用h2作为各个章节的小标题如果章节里还有再细分的部分就用h3。搜索引擎抓取页面时主要依据标题层级来判断内容结构所以层级混乱对SEO是负面影响。段落标签p用于包裹一段独立文字。注意两个高频错误一是在段落内部直接换行写出来的内容在浏览器里依然连在一起因为HTML里连续的空格和换行会被合并成一个空格必须用br标签强制换行二是在段落之间用空行隔开——这个没问题但如果你想让两段之间距离更大应该用CSS的margin属性而不是连续敲多个回车。h1我的第一个网页/h1 h2自我介绍/h2 p大家好我叫小明是一名计算机专业的大一学生。/p p这是我第一次用HTML编写网页希望通过这门课程掌握网页开发的基本技能。/p h2我的兴趣爱好/h2 p平时喜欢打篮球、读书最近对网页开发产生了浓厚的兴趣。/p这是一段非常朴素的写法没有任何技巧但它结构分明语义正确作为作业一的内容完全合格。3.2 列表标签一组非常容易被低估的内容组织方式列表标签在作业中的分量比你想象中重得多。导航菜单、知识点罗列、步骤说明到处都是列表的用武之地。HTML里有三种列表但作业阶段你只需要掌握两种无序列表ul各项之间没有先后顺序默认用圆点作为项目符号。有序列表ol各项之间有先后顺序默认用数字编号。打个比方一张购物清单用ul合适因为买东西没有先后规定一份操作步骤说明书用ol合适因为步骤必须按顺序执行。写列表时最容易犯的错误是直接在ul或者ol下面写字不套li标签。语法规定列表项必须由li包裹。你在ul里直接放了p段落页面虽然能渲染但这是不符合标准的结构性错误作业评分如果严格会直接扣分。h2本学期课程安排/h2 ol li高等数学/li li大学英语/li li计算机导论/li li网页设计基础/li /ol h2我的技能清单/h2 ul li熟悉Python基础语法/li li了解操作系统基本概念/li li正在学习HTML与CSS/li /ul3.3 链接和图片让页面“活”起来的两个标签一份只有文字和列表的页面看起来实在有点寒酸。加一张图片、放几个超链接页面立刻会像一个“真正的网页”。图片标签是img注意它是一个自闭和标签没有结束的斜杠版本在HTML5里写不写都能跑但建议写上保持规范统一。两个属性必须掌握src代表图片来源路径alt代表图片加载失败或者无法被访问者看到时展示的替代文字。alt属性常被初学者忽略但它是作业中的加分点。从语义上讲图片加载失败时用户不至于面对一个空白框而是能看到文字描述对于需要读屏软件辅助的视障用户alt里的文字就是他们感知图片内容的唯一途径搜索引擎的爬虫读不懂图片内容也靠alt判断图片含义。一个页面里所有图片都有合适的alt属性这种细节有时候比多写一个炫酷特效更能体现专业素养。链接使用a标签核心属性href指定目标地址。开发里有一个真实场景我每次都要强调相对路径和绝对路径的区别。如果你的图片和网页文件在同一个文件夹下src里直接用文件名就行如果图片在下一级文件夹的images目录里要写成images/xxx.jpg如果在上一级目录则写成../xxx.jpg。很多同学第一次做作业图片放的位置不对路径写错了网页打开就显示一个小裂图图标这在评分时非常扎眼。h2我的家乡/h2 p我的家乡是一个美丽的海滨城市这里有著名的跨海大桥和金色的沙滩。/p img srcimages/hometown.jpg alt家乡海滨风景照 width400 p想了解更多关于我的学校欢迎访问 a hrefhttps://www.xxx.edu.cn学校官网/a。 /p这里插一句img标签里直接写width400是HTML4时代的古老写法现在规范的写法是用CSS控制尺寸。但作业阶段你必须明白width属性是真实存在且有效的如果你们课程还没教到CSS先用这种方式控制图片大小完全说得过去。3.4 表格标签最容易“翻车”的一组标签表格是HTML作业里出镜率极高的标签因为它结构层次分明评分老师扫一眼就能看出你学没学到这一块。但表格也是最容易写错的一组标签。一个最小化的表格至少要包含以下元素table border1 tr th课程名称/th th上课时间/th th任课教师/th /tr tr td高等数学/td td周一上午/td td张老师/td /tr tr td大学英语/td td周二下午/td td李老师/td /tr /table结构拆解table是整个表格的容器tr代表一行th是表头单元格默认加粗居中td是普通数据单元格。行和列千万不要搞混——tr是行table rowtd是列里的单元格table datath是表头table header。实际操作中初学者最常见的报错方式是写了行但每行的单元格数量对不上。比如第一行有3个单元格第二行只写了2个表格会出现严重的错位。还有人在表格里塞列表、塞段落虽然技术上可行但结构极不清晰。作业阶段我建议表格里规规矩矩放文本就足够了。注意border1这个属性在HTML5里被标记为废弃用法正规做法是用CSS的border属性。但HTML入门阶段的作业很多教材还保留着这个写法因为它在不引入CSS的情况下就能让表格显示边框方便教学。你写作业时可以按教材来但心里得清楚这是过渡方案后面学了CSS就不再这么用了。3.5 表单标签作业里的“高级感”来源如果你想让作业一在班级里显得不一般提前写一个表单是性价比极高的选择。表单字段本身不算难但它涉及到的标签种类最多能充分展现你对HTML的掌控力。h2意见反馈/h2 form action# methodpost p label forname姓名/label input typetext idname namename placeholder请输入姓名 /p p label foremail邮箱/label input typeemail idemail nameemail placeholder请输入邮箱 /p p label formessage留言内容/label /p p textarea idmessage namemessage rows5 cols40/textarea /p p input typesubmit value提交 /p /form这里有三个细节值得展开。label的for属性要跟输入框的id对应。label是输入框的“说明文字”点击“姓名”这两个字时对应的输入框会获得焦点这在手机上尤其好用手指不用精确点中那个细长的输入框也方便屏幕阅读器识别。我检查过不少作业很多人会漏掉for属性和id的关联虽然不影响显示但属于不规范写法。name属性是表单数据提交时用来识别字段的“名字”。id是用来在页面内定位元素的name是用来在数据提交时区分数据的这两者完全不是一回事。你在作业阶段不一定需要真正提交数据但养成写name的习惯会让你后面学后端时省去很多麻烦。typeemail的意思是浏览器会校验输入内容符不符合邮箱格式如果不合规格提交时会弹出提示。这是HTML5提供的内置校验能力它不需要写任何JavaScript代码就能工作属于用“最原始的手段”做“看起来还像回事”的效果非常适合展现在作业里。4. 决定作业档次的细节CSS做到“能看”以上说实话只靠上面这些HTML标签搭出来的页面视觉效果是相当简陋的——白底黑字图片是图片表格是表格彼此之间没有任何风格上的统一感。但HTML作业一通常不会要求你写出多么漂亮的页面它考察的是结构能力。可如果你愿意多花半小时给页面加上一点最基本的CSS作业档次会明显不一样。4.1 CSS的三种引入方式怎么选CSS有三种写进页面的方式各有各的使用场景。第一次做作业我建议就用最简单的方式——在head里写一对style标签把样式都塞进去。这叫内嵌样式表它的好处是全部代码都在一个文件里交作业时不会出现CSS文件丢了、样式全没了的情况。行内样式直接在标签上写stylecolor: red虽然也能用但它破坏了“结构样式分离”的原则代码一多以后极难维护作业里少量使用展示效果可以不建议大面积铺开。外部样式表单独一个.css文件加link引用是工业界最正规的做法也是后面课程一定会教的内容。如果你在作业阶段就尝试这种做法说明你提前自学了这是个加分亮点。head style body { font-family: Microsoft YaHei, sans-serif; background-color: #f5f5f5; margin: 40px; } h1 { color: #333; text-align: center; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #999; padding: 8px; text-align: left; } /style /head这几条样式做了四件事设置整体字体和页面背景色让标题居中让表格边框合并给单元格加内边距。这是能让页面“肉眼可看”的最低配置没有任何高深技巧但它已经把“能显示”变成“能看”了。4.2 为什么要建议大家从“语义”而不是“效果”出发写CSS有一点跟直觉相反你应该先问“这个元素是什么”再决定“它该长什么样”。一个h1标签默认字体又大又粗如果你不满意它的样子应该用CSS去改它的样式而不是不用h1改用p加粗再加大。逻辑是标签定义内容的身份CSS定义内容的模样。身份不可变模样可以随意换。这一点是HTML/CSS学习里最核心的思维转变。很多人到后期写页面一团乱麻就是因为混淆了两者的边界——看到好看的文字就想套a标签看到需要换行的就想用br硬撑。搞清楚语义和样式的分工你就已经比很多写了一年代码的人强了。5. 上线前最后一步完整走一遍自查清单写完代码、打开浏览器、看到页面正常显示——大多数同学到这一步就直接提交作业了。但我建议你再花十分钟按下面这个清单自查一遍每一项都是评分时的高频扣分点。5.1 文档结构完整性检查打开你的.html文件从第一行开始逐项核对一是!doctype html是否在文件的第一行前面不能有任何字符哪怕是空格或注释都不行。二是html langzh-cn是否写全。三是meta charsetutf-8是否在head的前几行。四是title里是否写了有意义的标题文字不要留默认的“无标题文档”。五是body内的内容是否清晰有序——一个页面只有一个h1其余标题按h2、h3的层级依次展开。5.2 标签闭合与嵌套检查这是新手发生频率最高的错误。HTML的语法是标签必须闭合有的成对闭合p.../p有的自闭和img。嵌套必须遵循“先开的后关”原则。打个比方你打开一个盒子往里面放了一个小盒子那关的时候一定是先关小盒子再关大盒子。写成divp文字/div/p就是典型的交叉嵌套虽然浏览器可能不报错但渲染结果已经不可预期。如果你用VS Code写代码它自带的代码高亮和括号匹配功能会直接在颜色上暴露问题——该闭合的标签没闭合时后面一整段代码的颜色都会变。看到这种情况就应该停手检查。5.3 路径引用检查凡是用了img、a、link的地方逐一确认路径正确。图片无法显示、CSS没有生效、链接点了40480%以上都是路径问题。检查时有个土办法直接在浏览器里右键点击破图图标选择“在新标签页中打开图像”看地址栏里的路径和你预期的路径差在哪里一目了然。5.4 多浏览器预览同一个HTML文件可能在Chrome里完美显示在Firefox里却出现几像素的错位在Edge里又是另一副面孔。作业提交前至少用Chrome和Edge各打开一遍。我不想在这里展开浏览器兼容性的全部话题但你至少要形成一个习惯写代码时保持一个“多浏览器意识”不要默认只有自己看得见。HTML作业一在整条学习路线里的位置有些像学写字时的“描红”阶段——它不要求你创作什么惊世骇俗的杰作只要求你握笔姿势正确、笔顺清晰、字迹工整。我接触过大量从零起步的同学凡是第一次作业就认真打磨文档结构、规范使用标签、注意缩进和注释风格的后面学CSS和JavaScript时明显更顺畅。反过来第一次作业就靠复制粘贴糊弄过去的后面写几十行代码就乱成一团。我个人在实践中还有一个很具体的体会第一次作业值得你手敲一遍哪怕是最基础的标签。敲的过程会逼你注意每一个尖括号、每一次斜杠这种肌肉记忆是看多少遍教材都换不来的。等你敲完这份基础作业再去看网上那些炫酷页面模板你会惊讶地发现——哦原来那些页面再复杂底层也都是这些标签在组合与嵌套。那一刻你才算真正踏进了Web开发的大门。