今天终于把HTML的列表和表格搞明白啦！从一开始标签嵌套混乱、页面乱成一团，到现在做出了清晰的商城支付向导和数据表格，成就感直接拉满✨
一、列表练习： 从乱码到层级分明，踩了不少坑
最开始写支付向导的时候，我把 <li> 写成<1i>，结果浏览器直接把标签当成文字显示，页面全是 <l1> 乱码，还有<ul>写成了<u1>,我不解了好久，修改始终找不到切入点。
后来才知道，并且找到了错误，还有有序列表的 type="A" 属性，直接就能实现A、B、C的字母序号，不用自己手动写序号，最后页面终于变成了清晰的层级结构，一级无序列表+二级有序列表，完全和示例一模一样！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-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 type="A"> <li>选择您要使用的网上银行；</li> <li>显示您的应付总价,点击"确认无误,付款";</li> <li>确定您在银行的预留信息,点击确定;</li> <li>输入您的网银账号、登录密码、验证码；</li> <li>支付成功,提示"已完成付"。</li> </ol> </li> </ul> <hr> </body> </html>二、表格练习：合并单元格的血泪
坑1：模板表格上面的信息要从左往右看依次填入，这样形成的表格才不会出错
我一开始就是打横着填入，导致我的表格出来后的信息填入错误。
坑2：colspan 和 rowspan 搞混，表格直接“塌房”
最头疼的就是合并单元格，切记不要把横向合并 colspan 和纵向合并 rowspan 搞反了！！！结果表格线会全乱，单元格直接错位。
- colspan="n" ：横向合并n个单元格
- rowspan="n" ：纵向合并n个单元格
坑3：合并后没删掉多余的 <td> ，表格多出了一堆格子
只要单元格被合并了，被合并位置的 <td> 必须删掉！上面的例子里，第二行的总人数 <td> 要删掉，这样表格的列数才会对齐，不会多出格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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> <td>2021年</td> <td>40</td> <td>400</td> <td>440</td> </tr> <tr> <td>2022年</td> <td>100</td> <td>1500</td> <td>1600</td> </tr> <tr> <td>2023年</td> <td>150</td> <td>3000</td> <td>3150</td> </tr> <tr> <td>2024年</td> <td>250</td> <td>4000</td> <td>4200</td> </tr> </table> <h3>合并单元格练习</h3> <table> <tr> <th colspan="4"></th> </tr> <tr> <td>年份</td> <td>教师人数</td> <td>学生人数</td> <td>总人数</td>> </tr> <tr> <td>2021年</td> <td colspan="2"></td> <td rowspan="2"></td> </tr> <tr> <td>2022年</td> <td></td> <td></td> </tr> <tr> <td>2023年</td> <td colspan="2" rowspan="2"></td> <td></td> </tr> <tr> <td>2024年</td> <td></td> </tr> </table> </body> </html>
