列表和表格
列表和表格
列表
简介
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应地信息
- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<h2>有序列表</h2>
<!-- 有序列表 -->
<ol>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
<h2>无序列表</h2>
<!-- 无序列表 -->
<ul>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
<h2>自定义列表</h2>
<!-- 自定义列表 -->
<dl>
<dt>列表名称</dt>
<dd>列表选项</dd>
<dd>列表内容</dd>
</dl>
</body>
</html>
表格
简介
- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
- 可使用 <th> 标签来定义表格的里头，大多数浏览器会把表头显示为粗体居中的文本
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 表格table，可设置边框属性以显示边框-->
<table border="1">
<tr>
<!-- 里头 : th -->
<th>Heading</th>
</tr>
<!-- 行 : tr -->
<!-- 列 : td -->
<tr>
<!-- colspan跨列 -->
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- rowspan跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
</body>
</html>
