我第一次真正动手写HTML不是跟着教程敲那行Hello World而是因为社团活动需要一份排班表。当时想的是与其在群里发一张模糊的图片不如做个网页大家打开就能看到自己哪天值班。于是我从列表和表格入手花了半个下午把页面做出来了。那之后我才意识到HTML里最不起眼的两个东西——列表和表格其实是网页信息组织的两根顶梁柱。对完全没接触过前端的人来说从这两个标签开始比一上来就啃各种框架要踏实得多。这篇文章就把我第一次尝试用HTML制作列表和表格的完整过程、踩过的坑、以及后来复盘时补上的关键知识点一起写出来。如果你是零基础这篇文章可以当作一份能直接抄作业的入门笔记如果你已经会写了也可以看看我在初次尝试时踩过的那些低级错误权当避雷。1. 为什么我把列表和表格当成HTML的第一课先说一个观点网页上的内容归根结底只有两种组织方式——一种是一条一条排下来另一种是一行一行对整齐。前者就是列表后者就是表格。几乎所有页面都能拆成这两种结构的组合。1.1 网页骨架里的两种基本关系列表表达的是序列关系。比如导航菜单、文章目录、购物车商品、评论区楼层这些内容天然是一条一条的有先后、有并列、有从属。无序列表ul表达这些条目是同一类东西有序列表ol表达这些条目有先后顺序定义列表dl表达名词和解释的配对关系。表格表达的是对应关系。课程表、成绩单、价目表、人员信息表这些内容天然是二维的有行有列行和列交叉的地方就是一个数据点。table标签存在的意义就是把这些二维数据清晰地呈现出来。这两种关系在你刚开始学HTML时就能遇见。写一个导航是列表排一个课表是表格。可以说列表和表格是HTML里投入产出比最高的两个知识点。1.2 在第一次尝试阶段列表和表格能带来什么正反馈我当时学完这两个东西最大的感受是原来写网页不是那么玄乎的事。不需要了解复杂的布局概念不需要写CSS光靠标签本身就能做出一个结构清晰、能表达完整信息的页面。浏览器打开文件看到自己写的排班表一行一行地显示出来那种成就感是实打实的。而且列表和表格的标签结构非常直观ul里面套litable里面套tr再套td几乎就是盒子套盒子的思维。这种结构化的思维方式恰恰是前端开发最核心的底层能力。后面你学div、学flex、学grid会发现本质上还是在处理谁在谁里面、谁和谁并列的关系。所以第一次尝试从列表和表格入手是在给后面的学习打地基。2. 列表标签无序、有序、定义三个场景一次分清HTML里的列表主要有三种ul无序列表、ol有序列表、dl定义列表。我第一次写的时候只知道ul和li觉得ol就是把ul换成ol后来才发现每个标签都有自己的脾气。2.1 ul默认长这样但99%的导航都是它ulunordered list无序列表。它的直接子元素是lilist item。默认样式是每一项前面带一个实心圆点缩进排列。ul li前端基础/li liCSS样式/li liJavaScript交互/li /ul这个结构有多重要你去看任何一个网站的导航菜单几乎都是用ul包着若干li再在li里放a链接。为什么因为导航菜单本质上就是一组并列的条目用ul来表达语义最准确也方便后续用CSS把竖排变成横排。我第一次做排班表页面时导航就是这样的ul lia href#schedule值班安排/a/li lia href#notice注意事项/a/li lia href#contact联系方式/a/li /ul这里有个细节要注意ul的直接子元素只能是li。你可能见过有人往ul里直接塞div、塞p标签这在浏览器里显示不一定有问题但不符合HTML规范后续用CSS选择器控制样式时也容易出意外。2.2 ol序号不只是自动生成还有起始值和倒序olordered list有序列表。它和ul的唯一区别就是每一项前面会自动生成数字序号。默认从1开始。ol li确认需求/li li整理资料/li li编写HTML/li li浏览器预览/li /ol这个序号是浏览器自动生成的不需要你自己写数字。好处是你中间插入或删除一项序号会自动更新不用手工维护。ol还有两个比较实用的属性。一个是start可以指定起始值另一个是reversed可以让序号倒序排列。ol start5 li第五条/li li第六条/li /ol ol reversed li倒数第三/li li倒数第二/li li倒数第一/li /ol我第一次用ol的场景是做学习步骤清单。因为步骤有先后顺序用ol比ul更合适。语义上这是有先后顺序的操作步骤和这是一组并列的项目是有区别的浏览器读屏软件也会根据标签类型向视障用户发出不同的提示。2.3 定义列表dl最容易被忽略的三件套dldefinition list定义列表。它和ul、ol不一样里面不放li而是放dt被定义的名词和dd对应的描述。dl dtHTML/dt dd超文本标记语言用来描述网页内容的语义结构。/dd dtCSS/dt dd层叠样式表用来控制网页的呈现外观。/dd /dl我第一次根本没注意到dl。后来做名词解释板块时才发现如果我用ul硬列语义上就是一堆并列条目无法表达名词—解释这种对应关系。而dl天生就是干这个的。顺便说一句一个dt可以对应多个dd比如一个词条有多个解释。这种结构在一些注释类页面里非常有用。2.4 嵌套列表缩进带来的层级感列表是可以嵌套的。在li里面再放一个ul或ol就能形成树状层级。这个能力在做多级菜单、目录结构、家族图谱时非常关键。ul li前端 ul liHTML/li liCSS/li liJavaScript/li /ul /li li后端 ul liJava/li liPython/li /ul /li /ul嵌套列表的浏览器默认效果是内层自动缩进同时项目符号会变化比如外层实心圆点、内层空心圆点。这种缩进让层级关系一目了然。我在这里踩过坑一开始我把内层ul放在了li外面结果浏览器渲染出来层级完全是乱的。后面才明白嵌套的ul必须放在li的闭合标签之前它是li的内容的一部分而不是li的兄弟节点。3. 表格标签table不是简单画格子表格是我当初花了最多时间的部分因为它不像列表那样一个标签就能搞定而是需要table、tr、td、th一套标签组合起来。刚开始写的时候感觉像是在搭积木搭错一块整个就歪了。3.1 最基本的table结构一个标签都不能少一个最简单的表格需要三层结构table tr td姓名/td td值班时间/td /tr tr td小明/td td周一/td /tr /table解释一下table是表格容器所有的表格内容都要放在它里面。trtable row代表一行。tdtable data代表一个单元格也就是一行里的一列。换句话说tr决定表格有几行td决定每行有几列。我第一次写的时候把它搞反了先写了三个td再包一个tr结果怎么都排不对。后来才理解tr是行的容器td是单元格一行里有几个td表格就有几列。表格里还可以用thtable header代表表头单元格。它的默认样式是加粗居中语义上是这一列行的标题。table tr th姓名/th th值班时间/th /tr tr td小明/td td周一/td /tr /table3.2 thead、tbody、tfoot到底有什么用我第一次写表格时完全没用过thead、tbody、tfoot直接一堆tr堆到底。后来发现当表格内容比较多时最好把表格分成三个部分表头thead、主体tbody、表尾tfoot。table thead tr th项目/th th数量/th /tr /thead tbody tr td笔记本/td td10/td /tr tr td笔/td td30/td /tr /tbody tfoot tr td合计/td td40/td /tr /tfoot /table这样做有两个好处。一是语义清晰浏览器和读屏软件能明确知道哪部分是表头、哪部分是数据、哪部分是汇总。二是方便样式控制CSS可以直接针对thead里的th设置统一样式不需要给每个th单独加class。这里有个细节在标准表格结构里thead、tbody、tfoot的顺序有讲究。tfoot虽然视觉上在表格底部但它在HTML源码里应该放在tbody之前。这个规则有点反直觉我第一次看到时还以为是别人写错了查了文档才发现是规范要求。目的是让浏览器先加载表尾但如果你没有用到特殊渲染场景把tfoot放在最后写现代浏览器也能正常显示。3.3 合并单元格隐藏的colspan与rowspan规则合并单元格是表格里最容易让人困惑的知识点。我第一次做课程表时发现午休那一格要横跨好几列早自习要竖着跨好几行完全不知道怎么办。后来才学会两个属性colspan让一个单元格横着跨多列。rowspan让一个单元格竖着跨多行。table tr th时间段/th th周一/th th周二/th /tr tr td rowspan2上午/td td语文/td td数学/td /tr tr td英语/td td物理/td /tr tr td colspan3午休/td /tr /table这里的逻辑是rowspan2表示这个单元格占据两行所以下一行里原本属于这一列的位置就被它吃掉了下一行只需要写其余的td。colspan同理colspan3表示这个单元格把三个列的位置合并成一个那么这一行里其他td的数量要相应减少。我踩过的最经典的坑就是合并单元格之后没有减少对应的td数量。比如一个三列表格某一行里有个td设置了colspan2但这一行我还是写了三个td结果表格整体多了一列所有格子全部错位。这时候浏览器不会报错只会把表格渲染得乱七八糟排查起来很费劲。3.4 caption是给谁看的caption标签放在table里面用来给表格加一行标题。它不是表头而是表格的整体标题就像一篇图的图题。table caption社团本周值班安排表/caption tr th姓名/th th值班时间/th /tr /tablecaption在语义上是表格的一部分浏览器会把它显示在表格上方。我第一次写的时候直接用p标签放在table前面后来发现p是表格外部的元素和表格没有绑定关系而caption是表格内部的标题不管表格怎么移动标题始终跟着表格走。虽然视觉上差异不大但在语义和可访问性上区别明显。4. 第一次完整动手做一个课程表和任务清单页面理论知识说完了说点实际的。我第一次做排班表时先是把列表和表格分开练了一遍然后整合成一个小页面。下面还原一下我当时的设计过程和最终代码。4.1 先画草图再写代码很多新手一上来就打开编辑器写代码写着写着发现结构乱了。我建议先在纸上把页面结构画出来。不用多复杂就是几个方块顶部是标题下面是导航导航下方左边是任务清单右边是排班表格。画草图的意义在于让你提前想清楚页面里哪些部分是列表哪些部分是表格。想清楚之后写HTML就是按图施工不会写到一半推翻重来。4.2 用ul做页面导航导航是最典型的无序列表场景。我当时是这样写的ul classnav lia href#task任务清单/a/li lia href#schedule值班安排/a/li lia href#tips注意事项/a/li /ul用ul做导航将来用CSS把纵向列表变成横向导航非常方便只需要给li设置inline或flex即可。如果不用列表直接用几个a标签堆在那里语义上没问题但后续样式和间距控制会比较别扭。4.3 任务清单用ol因为任务有先后顺序当时我的任务清单是今天要完成的事一件事必须在前一件事之后做所以我用了olh2 idtask今日任务清单/h2 ol li生成排班表初版/li li发给各组长确认/li li根据反馈修改错位单元格/li li发布到部门页面/li /ol这里如果换成ul浏览器显示上只是少了数字语义上却丢失了先后顺序这一层含义。对新手来说选ul还是ol就看一个标准去掉序号后内容是否仍然成立。如果序号是内容的一部分用ol如果序号只是装饰用ul。4.4 课程表用table合并单元格才像课表排班表部分我遇到的问题是午休、早训这些时间段要跨列或跨行直接写到表格里会让列数对不上。后来我手动画了一个三行网格标清楚哪些单元格需要跨行、跨列再对照着写代码一次就成功了。当时表格的简化版长这样h2 idschedule值班安排/h2 table caption社团值班安排表/caption tr th时间段/th th周一/th th周二/th /tr tr td rowspan2上午/td td小明/td td小红/td /tr tr td小刚/td td小丽/td /tr tr td colspan3午休/td /tr tr td下午/td td小华/td td小军/td /tr /table注意看这个结构第二行有3个单元格其中第一个td设置了rowspan2它不仅在第二行显示还延伸到了第三行。因此第三行里就只写了2个td因为第三行第一个位置已经被第二行的td占掉了。如果我在第三行再写3个td表格右边就会多出一列空白这是新手最容易犯的错误。4.5 完整可运行代码把上面几块拼起来就是一个完整的页面。你复制到记事本里保存成.html文件双击用浏览器打开就能看到效果。!doctype html html langzh-cn head meta charsetutf-8 title第一次练习列表与表格/title /head body h1社团值班管理/h1 ul lia href#task任务清单/a/li lia href#schedule值班安排/a/li /ul h2 idtask今日任务清单/h2 ol li生成排班表初版/li li发给各组长确认/li li根据反馈修改错位单元格/li li发布到部门页面/li /ol h2 idschedule值班安排/h2 table caption社团值班安排表/caption tr th时间段/th th周一/th th周二/th /tr tr td rowspan2上午/td td小明/td td小红/td /tr tr td小刚/td td小丽/td /tr tr td colspan3午休/td /tr tr td下午/td td小华/td td小军/td /tr /table /body /html这个页面在浏览器里打开后你能看到标题下面是一个竖排的导航列表序号清晰的任务清单还有一张规范的表格。整个页面没有一行业务逻辑代码但它已经是一个完整网页的雏形了。我第一次看到这个结果时最大的感受是原来做网页就像搭积木把合适的标签放进合适的位置就行。5. 给列表和表格上点样式第一次接触CSS纯HTML的页面能看但不好看。默认样式下列表是竖排带圆点的表格线条也很淡总有一种这是草稿的感觉。我第一次做完排班表后忍不住想让它更接近真正的网页所以开始接触CSS。这里只讲和列表、表格关系最紧密的几个属性。5.1 list-style把圆点去掉的时机列表默认带项目符号但很多场景下比如导航菜单你并不想让每个链接前面带一个圆点。这时候用list-style属性控制ul { list-style: none; }去掉圆点后li本身还是块级元素竖着排列。要变成横排导航一般用flex或inline-block.nav { list-style: none; display: flex; gap: 20px; }我建议第一次练习时先保留列表默认样式观察一下ul、ol在不同情况下的项目符号变化。等你对列表结构熟悉了再通过list-style: none把装饰去掉。不要一上来就全部去掉否则你都不知道默认的圆点、数字是哪里来的。5.2 border-collapse: collapse 必须记住table默认的边框样式是每一格都有独立的边框相邻单元格的边框会叠成两条线看起来又宽又歪。我至今记得第一次给table加border时页面上一堆双线缝隙的尴尬。解决方法是给table设置table { border-collapse: collapse; }这个属性的含义是合并相邻单元格的边框让两条线变成一条。再加上td、th的border表格线条就干净利落了。table, th, td { border: 1px solid #999; border-collapse: collapse; }注意border-collapse要写在table上不是写在td上。我见过有人把border-collapse写到td里结果完全没效果的。5.3 隔行变色和hover反馈表格数据一多容易看串行。隔行变色是最实用的优化手段tbody tr:nth-child(even) { background-color: #f2f2f2; }这里nth-child(even)表示偶数行。你也可以用odd表示奇数行。这种隔行变色让表格的可读性提升非常明显。hover反馈是另一个快速提升观感的小技巧tbody tr:hover { background-color: #e0f7fa; }鼠标经过某一行时这行会高亮视觉上很好地区分了当前读到的位置。这两个样式都用不了几行代码但对第一次尝试来说效果差距是天壤之别。5.4 表格宽度处理的几个思路表格自适应宽度是很多新手会碰到的问题。默认情况下表格宽度由内容撑开内容多了会撑破布局。常见的处理方式有两种一种是把表格宽度设成100%让它填满父容器table { width: 100%; }另一种是给table设置table-layout: fixed让列宽按照设定值分配而不是根据内容自动计算table { table-layout: fixed; width: 100%; }table-layout: fixed的优点是性能好列宽由第一行或手动设定的宽度决定不会因为某格内容太长把整张表撑变形。缺点是如果内容超出单元格宽度会被截断或溢出。第一次练习时先用width: 100%通常就够了。6. 第一次尝试中踩过的坑和最终的排查思路做列表和表格看起来简单但真正动手时各种低级错误能把人折磨到怀疑人生。下面这些坑我基本全踩过写出来帮你省点时间。6.1 标签闭合错误导致整个页面结构错乱这是我第一个大坑。有一次我把td的闭合标签写漏了一个浏览器没有报错但后面所有单元格都串位了。排查了很久才发现表格结构对标签闭合的完整度要求极高少一个闭合标签浏览器的解析器就会自动补救但这种补救往往和你预期完全不同。排查方法在浏览器里按F12打开开发者工具查看Elements面板看DOM树的结构是否和你写的一致。如果发现某个td或tr被浏览器自动移到了奇怪的位置那多半是前面某个标签没闭合。这是最可靠的排查手段比人眼盯代码高效得多。6.2 嵌套顺序错乱我在前面提到过嵌套列表必须把内层ul放在li里面。我当时写成了ul li前端/li ul liHTML/li /ul /ul这个写法在浏览器里可能显示得像嵌套了但其实ul和li已经不是父子关系而是兄弟关系。后续CSS选择器如果用li ul这种子选择器就完全选不中内层列表。正确写法ul li 前端 ul liHTML/li /ul /li /ul记住一个判断口诀li里面可以放其他标签但ul/ol的直接子元素只能是li。反过来任何想嵌套在列表内的内容都必须放进li里。6.3 合并单元格后列数对不上前面说过的rowspan和colspan是另一个高频问题。我自己的体会是写合并单元格时不要一个格子一个格子地写而是先在草稿纸上画出网格把合并的区域用方块标出来再对照草稿写代码。每次写完一行数一下这一行里实际占用的列数是否等于表格总列数。一旦对不上渲染出来就会多出空白或者整体歪掉。比如一个三列表格普通一行应该写3个td。如果这行有一个td用了rowspan2那么这一行写了3个td后下一行原本被占掉的位置就不能再写td所以下一行只能写2个td。在我做过的一张表里有一个单元格跨了3行2列我对照着草稿数了好几次才把整个表格的td数量凑对。6.4 用表格布局页面的历史误会还有一个观念上的坑很多教材会告诉你可以用table来排版于是新手容易误以为整个页面都能用table搭出来。实际上table的语义是表格数据它的单元格td在渲染时会自动调整宽高来适配内容用它做页面布局会导致标签嵌套极其复杂、后期维护困难。我第一次做页面时试图用一个大表格把导航、内容、页脚全部框起来结果稍微改一下内容整个布局就崩了。后来才明白HTML5的语义化标签header、nav、main、footer加CSS布局才是页面骨架的正道。table只用在该用表格数据的地方。这算是第一次尝试里最有价值的一次观念修正。列表和表格是内容组织工具不是万能布局工具。分清楚它们的边界你后面学CSS布局会少掉很多麻烦。最后分享一个我个人的习惯每次写完一个含表格的页面我都会在浏览器缩放到200%、50%分别看一眼。200%看的是小屏设备下表格会不会因为内容过多而横向溢出50%看的是整体节奏是否协调。列表和表格这种基础结构真正难的不是把标签写出来而是在不同场景下选择合适的标签并让结构保持清晰。第一次尝试时犯点错很正常重要的是通过这次尝试把列表和表格各自适合的场景彻底搞明白后面写任何页面心里就都有底了。