【HTML列表表格标签实战：从零基础入门】

目录一 、实验目的二、实验环境三、核心知识点总结(列表表格标签)四、完整代码实现列表表格合并单元格五、代码运行效果截图六、代码逐行详细讲解七、实验实践心得一、实验目的本次实验通过列表标签和表格标签的综合实战掌握HTML中无序列表ul、有序列表ol、列表项li、以及表格table、表头th、表格行tr、单元格td、合并单元格colspan/rowspan等核心标签的使用方法理解HTML页面的结构搭建逻辑为后续前端开发打下坚实基础。二、实验环境-开发工具VS Code-运行环境华为浏览器-编程语言HTML三、核心知识点总结(列表表格标签)1.列表标签列表标签是网页中最常用的布局标签之一分别分为无序列表ul、有序列表ol两类。无序列表ul : 展示支付方式、商品分类type 可设置项目符号默认实心圆点有序列表 ol : 展示支付步骤、操作指南type 可设置编号1/A/a/I/i下面的截图代码用的是编号A列表项 li 包裹列表中的每一项内容是 ul / ol 的子标签2. 表格标签表格标签用于统计数据、信息表格核心标签如下表格 table 是指整个表格定义表格的整体结构 border 设置边框) 、 width / height 设置宽高、 align 设置对齐方式。表格行 tr 是指表格的一行包裹一行的所有单元格 。表头单元格 th 是指表头默认加粗居中。合并单元格 td 合并单元格 中的 colspan 合并列为合并的列 数、 rowspan 合并行为合并的行数。tr td2021年/td td colspan2/td td rowspan2/td /trtd colspan2/td,运行合并列的结果如下td rowspan2/td运行合并行的结果如下四、完整代码实现列表表格合并单元格列表代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title列表标签实验/title /head body h1商城支付向导/h1 h2支付方式/h2 ul li货到付款/li li财付通/li li支付宝/li li网银在线/li /ul hr/ h2网银在线支付步骤/h2 ol typeA li选择您要使用的网上银行/li li显示您的应付总价点击确认无误付款/li li确定您在银行的预留信息点击确定/li li输入您的网银账号登录密码验证码/li li支付成功提示已完成付款/li hr/ /ol /body /html代码详细讲解图中的ul:是无序标签是指支付方式有四种想先用哪个支付方式都可以没有支付方式顺序的要求。图中的hr/:是换行标签效果如图下。图中的ol:是有序标签支付步骤有五步有支付顺序的要求要一步一步的来type是用来设置编号图中用的是编号A也可以用1/a/I/i图中的li:是列表项 包裹列表中的每一项内容是 ul / ol 的子标签五、运行截图如下2.创建表格代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格实验/title /head body h3创建表格练习/h3 table border1 tr th/th th教师人数/th th学生人数/th th总人数/th /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 /body /html代码详细讲解图中的border是指表格边框图中的表格行 tr 是指表格的一行包裹一行的所有单元格 。图中的表头单元格 th 是指表头默认加粗居中如图创建表格练习中的教师人数、学生人数、 总人数字体是加粗的了图中td:是普通的单元格每一个td对应一个单元格。五、运行截图如下3.合并单元格代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表格实验/title /head body h3合并单元格练习/h3 table border1 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/td td/td /tr tr td2024年/td td colspan2/td td/td /tr /table /body /html代码详细讲解图中的border是指表格边框图中的表格行 tr 是指表格的一行包裹一行的所有单元格。图中的表头单元格 th 是指表头默认加粗居中如图合并单元格练习中的教师人数、学生人数、 总人数字体是加粗的了图中td:是合并单位格不同于上面的普通单元格因为它有合并单元格 中的 colspan 合并列为合并的列数、 rowspan 合并行为合并的行数所以运行的效果图和上面的不一样五、运行截图如下七、实验实践心得本次实验完整掌握了HTML列表标签 ul / ol / li 和表格标签 table / tr / th / td 的使用方法以及 colspan / rowspan 合并单元格的技巧实现了列表表格的综合页面理解了HTML页面的结构搭建逻辑完成了实验目标。