### HTML02基础总结
#### 表格
表格在网页设计中主要用来展示数据，它能使数据呈现得更规整且具有良好的可读性。在实际应用中，尤其是在后台管理系统中，合理使用表格能有效提升数据展示的效果。
##### 表格的作用
1. **展示数据**：表格的主要功能是展示数据，特别是对于后台系统而言，一个简洁明了的表格能够使复杂的数据更加有序。
2. **非布局工具**：表格的设计初衷并非用于页面布局，而是用于数据展示。
##### 表格基本结构
- `<table>`：定义表格本身。
- `<tr>`：定义表格中的行。
- `<td>`：定义表格中的数据单元格。
例如：
```html
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
```
- **`<table>`**：表示整个表格的标签。
- **`<tr>`**：定义一行，需嵌套在`<table>`标签内。
- **`<td>`**：定义一个数据单元格，嵌套在`<tr>`内。
- **`td`**：表示表格数据（Table Data）。
##### 表头单元格
表头单元格通常位于表格的第一行或第一列，其内容会被加粗居中显示，用以突出重要性。
- `<th>`：表示表头单元格，内容自动加粗居中。
示例：
```html
<table>
<tr>
<th>姓名</th>
</tr>
</table>
```
##### 表格属性
虽然这些属性在现代网页开发中较少直接使用，但了解它们仍然有帮助。
- `width`：设置表格宽度。
- `height`：设置表格高度。
- `border`：设置边框宽度。
- `cellpadding`：设置单元格内边距。
- `cellspacing`：设置单元格间距。
例如：
```html
<table width="100%" height="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
</table>
```
##### 表格结构标签
为了更好地组织表格结构，可以使用以下结构标签：
- `<thead>`：定义表格头部。
- `<tbody>`：定义表格主体。
示例：
```html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
```
##### 合并单元格
合并单元格可以将多个单元格合并为一个单元格，通常用于整理数据。
- **跨行合并**：使用`rowspan`属性。
- **跨列合并**：使用`colspan`属性。
示例：
```html
<table>
<tr>
<td rowspan="2">姓名</td>
<td>张三</td>
</tr>
<tr>
<td>年龄</td>
</tr>
</table>
```
#### 列表
列表在网页设计中用于布局，它可以将内容以有序或无序的方式排列。
##### 无序列表
无序列表使用`<ul>`标签表示，列表项由`<li>`标签定义。
示例：
```html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
- `<ul>`：无序列表标签。
- `<li>`：列表项标签，嵌套在`<ul>`内。
##### 有序列表
有序列表使用`<ol>`标签表示，列表项同样使用`<li>`标签定义。
示例：
```html
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
```
- `<ol>`：有序列表标签。
- `<li>`：列表项标签，嵌套在`<ol>`内。
通过以上总结，我们可以看出HTML表格和列表在网页设计中的重要作用，合理使用它们可以使网页内容更加有序和易于理解。同时，了解这些基本元素也有助于进一步学习更高级的前端技术，如CSS和JavaScript。
