HTML----列表与表格
一、列表标签
1.<ul>:无序列表标签，用来放没有先后顺序的并列内容
2.<ol>:有序列表标签，用来存放有明确先后顺序的步骤内容
3.<li>:列表项，不管是<ul>还是<ol>里面都只能放.<li>，不能直接写文字，用来放每一条具体内容
用商城支付举例，代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无序列表和有序列表实验</title> </head> <body> <ul> <li> 支付方式 <ol> <li>到账付款</li> <li>财付通</li> <li>支付宝</li> <li>网银在线</li> </ol> </li> <li> 网银在线支付步骤 <ol> <li>选择您要是用的网上银行</li> <li>显示您的应付总价，点击“确认无误，付款"</li> <li>确定您在银行的预留信息，点击确定</li> <li>输入您的网银账号、登录密码、验证码</li> <li>支付成功，提示“已完成付款”</li> </ol> </li> </ul> </body> </html>这里可以看到，<ul>管并列分类，<ol>管顺序步骤，<li>管内容承载。
举个简单易懂的例子，比如一本书的目录，<ul>是大章节，<ol>是章节下的小节，<li>是每一个标题。
运行结果如下图所示：
二、表格与合并单元格
我们先来认识一下表格的基本标签吧。
<table>:用来定义整个表格，是表格的容器
<tr>:用来定义表格的一行
<th>:用来定义表头单元格
<td>:用来定义普通的单元格
我们来看下创建表格的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实验</title> </head> <body> <h2>创建表格练习</h2> <table border="1" width="400rpx" height="200rpx"> <tr> <th>年份</th> <th>教师人数</th> <th>学生人数</th> <th>总人数</th> </tr> <tr> <td>2021年</td> <td>120</td> <td>1800</td> <td>1920</td> </tr> <tr> <td>2022年</td> <td>125</td> <td>1850</td> <td>1975</td> </tr> <tr> <td>2023年</td> <td >130</td> <td>1900</td> <td>2030</td> </tr> <tr> <td>2024年</td> <td >135</td> <td>1950</td> <td>2085</td> </tr> </table> </body> </html>也许有的同学会问，为什么写了表格浏览器却看不见？
那是因为HTML的<table>标签默认是无边框、无背景、无间距的透明结构，浏览器只会渲染表格里的文字内容，不会给表格加上边框，解决方法也很简单，我们只需要给<table>标签加上border=“1”属性就可以啦，当然我们也可以给表格设置宽和高。
运行结果如下图所示：
接下来我们来看看单元格是怎么合并的吧。
在HTML中，合并单元格全靠colspan和rowspan这两个属性，
colspan：把同一行的多个单元格合并成一个大单元格；
rowspan：把同一列的多个单元格合并成一个大单元格；
代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实验</title> </head> <body> <h2>合并单元格练习</h2> <table border="1" width="400rpx" height="200rpx"> <tr> <th>年份</th> <th>教师人数</th> <th>学生人数</th> <th>总人数</th> </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>运行结果如下图所示：