📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜
喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我
❤️❤️❤️感谢各位大可爱小可爱！❤️❤️❤️
————————————————如果觉得本文对你有帮助，欢迎点赞，欢迎关注我，如果有补充欢迎评论交流，我将努力创作更多更好的文章。
目录
👩🏫：上节课我们主要学习了a标签和img标签，相信大家对这两个标签已经非常熟悉了，如果有不懂的可以参考我之前的文章。
今天老师就继续给大家讲讲html中的其他标签，今天主要给大家讲的也是常用的标签，table标签ul和ol以及form。希望大家认真听讲。
👩🏫：哪个同学预习过这个
👩🎓：我来说说吧，table就像我们平时使用的表格一样，有行和列组成如下所示：
姓名 |
性别 |
年龄 |
张三 |
男 |
18 |
李四 |
⼥ |
18 |
👩🏫：的确前端的表格也是这么展示的，但是展示的方式和我们日常中使用的表格是不太相同的，前端的表格有自己的标示形式。
👩🎓：那么在HTML中怎么表示 table呢？
👩🏫：table表示表格，下面我们学习一下这个表格中的属性，并通过设计实现上门的表格的效果
HTML 表格
tr：行数几行就有几个tr
th：数据中的表头单元格
td：单元格
👩🏫：下面是我们使用这些基本的标签构建的表格
👨🎓：这里咋没有表格的线呢？
👩🏫：是的我们现在使用的这些基本的属性只是表示了基本的结构，实现上面的表格的样子还需要一些其他的属性帮我们实现。
表示单元格 table元素⾥常⽤的属性
- border(边框)
- cellspacing(规定单元格之间的空⽩，边框之间的距离)
- cellpadding(规定单元边沿与其内容之间的空⽩)
- colspan(⽤于合并列)
- rowspan(⽤于合并⾏)
👩🏫：下面我们来看看border边框这个属性的作用，这个border是在table中添加的
下面再看看cellspacing和cellpadding的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<!-- 有几行就有几个tr -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
</table>
</body>
</html>colspan用于合并单元格的列，例如将性别和年龄合并。同理合并行的方法也类似
<tr>
<th>姓名</th>
<th colspan="2">性别</th>
<!-- <th>年龄</th> -->
</tr>
列表
👩🏫：java中我门有列表这种数据结构，同样的html中也存在这种数据结构，下面我们就简单的介绍一下这几种列表
有序列表：ol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>买菜</li>
<li>做饭</li>
<li>吃饭</li>
</ol>
</body>
</html>👩🏫：下面就是有序列表的效果，就像我们平时整理知识点的标记一样
无序列表：ul
<ul>
<li>测试</li>
<li>前端</li>
<li>运维</li>
</ul>
<dl>
<dt>计算机</dt>
<dd>一种必修课程</dd>
</dl>定义列表：dl
👩🏫：现在我们学习了这三种列表，并看到了他的效果，在平时开发的过程中，无序列表是相对使用较多的，有序次之，定义列表相对来说用的不是那么频繁，讲到这里，详细大家已经对列表有所掌握了。
👩🏫：好了今天我们学到了a标签配合href实现连接的跳转、img标签实现图片的加载，并通过a标签实现了图片成为链接的功能，还学习了table表格以及三种不同的列表，希望大家能够下课进行总结，老师也对今天的重要内容进行了整理，见下表
| 功能 | 属性 | 说明 | 位置 | |
| a | 跳转/锚点 | href：跳转的地址 target：如果设置blank就会跳到新页面， 不设置则在当前页面展示 |
body | |
| img | 图像标签 | src：图⽚路径 alt：图⽚加载失败或加载时显示的⽂字 title：悬浮在图⽚上⾯显示的⽂字 |
图片来源： 本地图⽚：稳定 线上图⽚：图⽚容易丢失 Base64图⽚ 优点：⼩图⽚占⽤内存⼩，不请求服务器，降低服务器资源与访问 缺点：⼤图⽚增⼤了数据库服务器的压⼒ |
body/通过嵌套a标签 |
| table | 表格 | table：表格 tr:行 几行就几个tr th：表头单元格（第一行） td:单元格 border：在table中添加边框 |
body | |
| ol | 有序列表 | <ol> <li></li> </ol> |
body | |
| ul | 无须列表 | <ul> <li></li> </ul> |
body | |
| dl | 定义列表 | <dl> <dt>⼈</dt> <dd>⼀种哺乳动 物</dd> </dl> |
body |
