【温故而知新】HTML表格table/列表ul

一、概念

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它被用来描述网页的结构和内容，并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本，增加了许多新的元素和功能，以适应现代网页开发的需求。

HTML5 提供了许多新的元素和 API，使得开发者可以创建更丰富、更交互式的网页和应用。例如，HTML5 引入了视频和音频元素，使得在网页上直接播放多媒体内容变得简单；还引入了 Canvas 和 SVG 元素，用于绘制图形和动画；另外，HTML5 还提供了地理位置 API、文件 API、Web Storage API 等，使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。

除了新增的元素和 API，HTML5 还改进了一些现有的元素和功能。例如，HTML5 改进了表单元素，提供了更多的输入类型（如 email、number、range 等），使得表单的验证和输入更加方便；还改进了语义元素（如 header、footer、article 等），使得网页的结构更加清晰和易于理解。

二、表格

HTML中的表格是用来展示和组织数据的一种结构化方式。它由行和列组成，可以用来表示二维数据的关系。

在HTML中，表格由<table>标签表示，其中的每一行由<tr>标签表示，每个单元格由<td>标签表示。表格的标题通常位于表格之上，使用<caption>标签进行表示。如果表格需要有表头，则可以使用<thead>标签表示，并在其中使用<th>标签表示表头单元格。如果表格需要有脚注信息，则可以使用<tfoot>标签表示，并在其中使用<td>标签表示脚注单元格。

下面是一个简单的HTML表格的例子：

<table>
  <caption>员工信息</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>经理</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>销售员</td>
    </tr>
  </tbody>
</table>

这个例子展示了一个带有标题和表头的员工信息表格。其中，每一行表示一个员工的信息，每列表示一个员工的属性（姓名、年龄、职位）。

HTML表格还可以使用一些属性来修改样式和行为，比如border属性来设置表格边框的宽度，colspan和rowspan属性来合并单元格，bgcolor属性来设置单元格背景色等。

属性	值	描述
align	left\center\right	HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxx\colorname	HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border	1""	HTML5 不支持。规定表格单元是否拥有边框。
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白。
frame	void\above\below\hsides\lhs\rhs\vsides\box\border	HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules	none\groups\rows\cols\all	HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary	text	HTML5 不支持。规定表格的摘要。
width	pixels%	HTML5 不支持。规定表格的宽度。

希望以上内容能够帮助你了解HTML表格的概念和使用。如果有更多问题或者需要进一步的信息，请随时提问。

三、列表

HTML中的列表用来展示和组织一组相关的项目。在HTML中，有三种类型的列表可供选择：有序列表（ordered list），无序列表（unordered list）和定义列表（definition list）。

1. 有序列表（Ordered List）：
   有序列表用来表示一组按特定顺序排列的项目。在HTML中，有序列表使用<ol>标签表示，每个项目使用<li>标签表示。有序列表默认使用数字作为项目的标记，但可以通过type属性来指定其他类型的标记，比如字母、罗马数字等。

下面是一个有序列表的例子：

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

这个例子显示了一个按顺序排列的水果列表。

属性	值	描述
compact	compact	HTML5 中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversed	reversed	指定列表倒序(9,8,7…)
start	number	一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
type	a 表示小写英文字母编号,A 表示大写英文字母编号,i 表示小写罗马数字编号,I 表示大写罗马数字编号.1 表示数字编号（默认）	规定列表的类型。不赞成使用。请使用样式代替。

2. 无序列表（Unordered List）：
   无序列表用来表示一组无特定顺序的项目。在HTML中，无序列表使用<ul>标签表示，每个项目使用<li>标签表示。无序列表默认使用实心圆点作为项目的标记，但可以通过type属性来指定其他类型的标记，比如空心圆、方块等。

下面是一个无序列表的例子：

<ul>
  <li>红色</li>
  <li>绿色</li>
  <li>蓝色</li>
</ul>

这个例子显示了一个无特定顺序的颜色列表。

属性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。
type	disc\square\circle	HTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。

3. 定义列表（Definition List）：
   定义列表用来表示一组相关的术语和其对应的定义。在HTML中，定义列表使用<dl>标签表示，每个术语使用<dt>标签表示，每个定义使用<dd>标签表示。

下面是一个定义列表的例子：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

这个例子显示了一组术语和其对应的定义。

以上是HTML中列表的概念和案例。希望能帮助你理解HTML中列表的使用。如果有更多问题或者需要进一步的信息，请随时提问。