前端——表格、列表标签

今天我们来学习一下web开发里面的表格标签、列表标签

常用快捷键： shift + alt +下复制粘贴选中内容

表格标签 table

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

thead：表格的头部区域(注意和 th区分，范围是比 th要大的)
tbody：表格的主体区域
tr：tr 是 table row 的缩写，表示表格的一行
td：td 是 table data 的缩写，表示表格的数据单元格
th：th 是 table header的缩写，表示表格的表头单元格（默认会居中加粗）

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table包含 tr，tr包含 td或者 th.

表格标签有一些属性，可以用于设置大小边框等.但是一般使用 CSS 方式来设置.

以下属性都要放到 table 标签中：

1. align 是表格相对于周围元素的对齐方式。align=”center”
(注意：不是内部元素的对齐方式,是整个表格的位置 right：靠右 left：靠左)
2. border 表示边框. 1 表示有边框(数字越大，边框越粗)，""表示没边框.
3. cellpadding : 内容距离边框的距离,默认 1 像素
4. cellspacing: 单元格之间的距离.默认为 2像素

Width/height：设置尺寸宽高

姓名	性别	年龄
张三	男	3
李四	男	4
王五	女	5

没有写边框的话，默认零像素，页面不显示表格

浏览器默认单元格之间距离为2，所以出现

Cellspacing=”0” 单元格距离设置为0

thead里面内容居中+加粗展示

th和td的区别，th是表头，td是表格主体

同行单元格合并rowspan=”” 填格数

注意：被合并的单元格应该注释掉或者删除，否则会被挤到其他地方

同列单元格合并colspan=”” 填格数

注意：被合并的单元格应该注释掉或者删除，否则会被挤到其他地方

<!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"width="500"height="300"cellspacing="0"cellpadding="50"align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><!-- <tr><td>姓名</td><td>性别</td><td>年龄</td></tr> --><tr><td>张三</td><td rowspan="2">男</td><td>3</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>4</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>5</td></tr></tbody></table>
</body>
</html>

列表标签

主要使用来布局的.整齐好看.

无序列表 ul li

代码快捷方式如下图，上下效果一样

ul 展示效果type

disc 实心圆（默认） ●

square 方块 ■

circle 空心圆 ○

有序列表 ol li

自定义列表 dl (总标签) dt(小标题) dd(围绕标题来说明)上面有个小标题，下面有几个围绕着标题来展开的

Type改变有序序号形式

Start改变起始序号

自定义列表 dl dt dd

注意:

元素之间是并列关系
ul/ ol中只能放 li不能放其他标签, dl中只能放 dt和 dd
li中可以放其他标签.
列表带有自己的样式，可以使用CSS 来修改.(例如前面的小圆点都会去掉)

<!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><h1>这是无序列表</h1><!-- disc 实心圆（默认）square    方块circle    空心圆 --><ul type=disc"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><ul type="square"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是有序列表</h1><!-- a 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号（默认） --><ol><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li></ol><ol type="A" start="2"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li></ol><ol type="I"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li></ol><h1>这是自定义列表</h1><dl><dt>自定义列表显示内容<dd>自定义列表1</dd><dd>自定义列表2</dd><dd>自定义列表3</dd></dt></dl>
</body>
</html>

少年没有乌托邦，心向远方自明朗！

如果这个博客对你有帮助，给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞，收藏和关注哦❤
如果有疑问或有不同见解，欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关前端的内容和示例
点赞加关注，学习不迷路，好，本次的学习就到这里啦！！！

我们下次再见喽！