[特殊字符]前端小白成长日记：HTML列表+表格初体验 有干货！！！

今天终于把HTML的列表和表格搞明白啦从一开始标签嵌套混乱、页面乱成一团到现在做出了清晰的商城支付向导和数据表格成就感直接拉满✨一、列表练习 从乱码到层级分明踩了不少坑最开始写支付向导的时候我把 li 写成1i结果浏览器直接把标签当成文字显示页面全是 l1 乱码还有ul写成了u1,我不解了好久修改始终找不到切入点。后来才知道并且找到了错误还有有序列表的 typeA 属性直接就能实现A、B、C的字母序号不用自己手动写序号最后页面终于变成了清晰的层级结构一级无序列表二级有序列表完全和示例一模一样!DOCTYPE html html langen head meta charsetUTF-8 title商城支付向导/title /head body h1商城支付向导/h1 ul li支付方式 ul li货到付款/li li财付通/li li支付宝/li li网银在线/li /ul /li /ul hr ul li网银在线支付步骤 ol typeA li选择您要使用的网上银行/li li显示您的应付总价,点击确认无误,付款;/li li确定您在银行的预留信息,点击确定;/li li输入您的网银账号、登录密码、验证码/li li支付成功,提示已完成付。/li /ol /li /ul hr /body /html二、表格练习合并单元格的血泪坑1模板表格上面的信息要从左往右看依次填入这样形成的表格才不会出错我一开始就是打横着填入导致我的表格出来后的信息填入错误。坑2colspan 和 rowspan 搞混表格直接“塌房”最头疼的就是合并单元格切记不要把横向合并 colspan 和纵向合并 rowspan 搞反了结果表格线会全乱单元格直接错位。- colspann 横向合并n个单元格- rowspann 纵向合并n个单元格坑3合并后没删掉多余的 td 表格多出了一堆格子只要单元格被合并了被合并位置的 td 必须删掉上面的例子里第二行的总人数 td 要删掉这样表格的列数才会对齐不会多出格。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格练习合集/title style body { font-family: 华文宋体; } table { border-collapse: collapse; width: 500px; margin: 20px; } th, td { border: 1px solid; text-align: center; } /style /head body h3创建表格练习/h3 table tr td年份/td td教师人数/td td学生人数/td td总人数/td /tr tr td2021年/td td40/td td400/td td440/td /tr tr td2022年/td td100/td td1500/td td1600/td /tr tr td2023年/td td150/td td3000/td td3150/td /tr tr td2024年/td td250/td td4000/td td4200/td /tr /table h3合并单元格练习/h3 table tr th colspan4/th /tr tr td年份/td td教师人数/td td学生人数/td td总人数/td /tr tr td2021年/td td colspan2/td td rowspan2/td /tr tr td2022年/td td/td td/td /tr tr td2023年/td td colspan2 rowspan2/td td/td /tr tr td2024年/td td/td /tr /table /body /html接下来打算试试给这些页面加一点CSS样式让表格和列表更好看期待下一次的进度