用于呈现逻辑上并列的具有相关性的数据内容.
<ul>
<li></li>
</ul>
ul元素可以用type属性设置不同的列表标记:disc: 实心圆点
circle: 空心圆圈
square: 实心正方形
<ol>
<li></li>
</ol>
ol元素也可以设置不同的标记:1: 阿拉伯数字
i: 小写罗马数字
I: 大写罗马数字
A: 大写字母
a: 小写字母
定义列表适用呈现包含主题及描述的数据内容.
<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表头
tbody: 表体
tfoot: 表脚
th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.
表格的属性控制:
border: 边框
bordercolor: 边框颜色
width: 宽度
height: 高度
cellspacing: 单元格间距(外)
cellpadding: 单元格填充(内)
align: 表格的位置控制
单元格的属性控制:
align
valign
如何合并单元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 会引发单元格数量的减少!
列表练习案例源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
表格练习案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="500" height="500">
<tr>
<td colspan="2">1</td>
<!--<td></td>-->
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<!--<td></td>-->
</tr>
<tr>
<!--<td></td>-->
<td colspan="2">3</td>
<!--<td></td>-->
</tr>
</table>
</body>
</html>
,
