前端——表格、列表标签
今天我们来学习一下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> 
-
少年没有乌托邦，心向远方自明朗！
如果这个博客对你有帮助，给博主一个免费的点赞就是最大的帮助❤
欢迎各位点赞，收藏和关注哦❤
如果有疑问或有不同见解，欢迎在评论区留言❤
后续会继续更新大连理工大学相关课程和有关前端的内容和示例
点赞加关注，学习不迷路，好，本次的学习就到这里啦！！！我们下次再见喽！
原文地址：https://blog.csdn.net/b19839356939/article/details/142368142
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！