HTML----列表与表格

一、列表标签1.ul:无序列表标签用来放没有先后顺序的并列内容2.ol:有序列表标签用来存放有明确先后顺序的步骤内容3.li:列表项不管是ul还是ol里面都只能放.li不能直接写文字用来放每一条具体内容用商城支付举例代码如下所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格实验/title /head body h2创建表格练习/h2 table border1 width400rpx height200rpx tr th年份/th th教师人数/th th学生人数/th th总人数/th /tr tr td2021年/td td120/td td1800/td td1920/td /tr tr td2022年/td td125/td td1850/td td1975/td /tr tr td2023年/td td 130/td td1900/td td2030/td /tr tr td2024年/td td 135/td td1950/td td2085/td /tr /table /body /html也许有的同学会问为什么写了表格浏览器却看不见那是因为HTML的table标签默认是无边框、无背景、无间距的透明结构浏览器只会渲染表格里的文字内容不会给表格加上边框解决方法也很简单我们只需要给table标签加上border“1”属性就可以啦当然我们也可以给表格设置宽和高。运行结果如下图所示接下来我们来看看单元格是怎么合并的吧。在HTML中合并单元格全靠colspan和rowspan这两个属性colspan把同一行的多个单元格合并成一个大单元格rowspan把同一列的多个单元格合并成一个大单元格代码如下所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格实验/title /head body h2合并单元格练习/h2 table border1 width400rpx height200rpx tr th年份/th th教师人数/th th学生人数/th th总人数/th /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运行结果如下图所示