一、作用
- 表格(展示数据)
- 列表 (布局)
二、表格列表总结
三、学生案例
代码
<!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常用属性:align为对齐方式;border规定是否拥有边框("1"有;""无)width为表格宽度,height为表格高度 ,
cellpadding="0"(单元格内容与边框的距离为0) cellspacing="0"(单元格边框与单元格的距离为0) -->
<table align="center" border="1" width="200" height="151" cellpadding="0" cellspacing="0">
<!-- caption为表格整体大标签-->
<caption>表格</caption>
<thead>
<tr>
<th>姓名</th> <!-- <th></th>为表头单元格标签 -->
<th>性别</th>
<th>年龄</th>
<th>学号</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>小新</td>
<td>男</td>
<td>3</td>
<td>01</td>
<td>100</td>
</tr>
<tr>
<td>图图</td>
<td>男</td>
<td>4</td>
<td>02</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- colspan="跨列合并单元格个数"
rowspan="跨行合并单元格个数" -->
<td colspan="4">总成绩</td>
<td>199</td>
</tr>
</tfoot>
</table>
<!-- 以上为表格内容 -->
<hr>
<!-- 声明无序列表 -->
<h3>你最爱吃的食物是神马</h3>
<ul>
<li>榴莲</li>
<li>芒果</li>
<li>荔枝</li>
<li>
<p>123</p>
<!-- ul标签内只能放li标签,不能直接放p标签,但li标签内可以放任何元素 -->
</li>
</ul>
<!-- 声明有序列表 -->
<h3>你最喜欢哪一门科目</h3>
<ol>
<li>数学</li>
<li>英语</li>
<li>思政</li>
<li>体育</li>
<li>
<p>123</p>
<!-- ol标签内只能放li标签,不能直接放p标签,但li标签内可以放任何元素 -->
</li>
</ol>
<!-- 声明自定义列表 -->
<h3>关注我吧</h3>
<dl>
<dt>原因</dt>
<dd>可爱</dd>
<dd>迷人</dd>
<dd>善良</dd>
<!-- dl标签内只能放dt,dd标签 -->
</dl>
</body>
</html>
效果图
家人们,该注意的点都打在注释里了,这是今天复习写的代码,写的不好多多包涵!!!