📢📢📢📣📣📣
哈喽!大家好,我是「奇点」,江湖人称 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 |