HTML——4.表格、列表、区块

一、表格

HTML 表格是用于展示结构化数据的重要元素，它允许将数据以行和列的形式组织和显示。

基本结构和常见元素：

1. `<table>` 元素

<table> 元素是 HTML 表格的根元素，它用于定义整个表格的开始和结束。

2. `<thead>`、`<tbody>`、`<tfoot>` 元素

<thead> 表示表格的头部，通常包含表头行（<tr>）。
<tbody> 表示表格的主体，包含了表格的主要内容行（<tr>）。
<tfoot> 表示表格的脚注部分，通常包含一些汇总信息或者其他备注。

这些部分可以让浏览器更好地理解表格的结构，并且有助于实现一些特定的样式和行为。

3. `<tr>` 元素

<tr> 元素表示表格中的一行（Table Row），它包含了一系列的表格单元格（<td> 或 <th>）。

4. `<td>` 和 `<th>` 元素

<td> 表示表格中的数据单元格（Table Data），用于显示实际的数据内容。
<th> 表示表格中的表头单元格（Table Header），用于标识每列的标题。

<th> 和 <td> 的区别在于 <th> 通常用于表头行，用以标识每列的标题，而 <td> 则用于表格的主体部分，显示实际的数据内容。

示例：

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table><thead><tr><th>Name</th><th>Age</th><th>Country</th></tr></thead><tbody><tr><td>John</td><td>30</td><td>USA</td></tr><tr><td>Maria</td><td>25</td><td>Spain</td></tr></tbody><tfoot><tr><td colspan="3">Footer information</td></tr></tfoot>
</table></body>
</html>

运行结果

二、列表

HTML 列表用于在网页中显示项目的有序或无序集合。有三种主要类型的列表：无序列表，有序列表和定义列表。

1. 无序列表

无序列表用于表示项目之间没有特定顺序关系的列表。在 HTML 中，无序列表使用 <ul> 元素表示，每个列表项使用 <li> 元素表示。

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

在浏览器中渲染后，无序列表将呈现为一个项目符号（通常是圆点）开头的列表，每个项目使用 <li> 元素包裹。

2. 有序列表

有序列表用于表示项目之间有特定顺序关系的列表，例如按照数字或字母顺序排列。在 HTML 中，有序列表使用 <ol> 元素表示，每个列表项同样使用 <li> 元素表示。

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

在浏览器中显示，有序列表将呈现为按照特定顺序排列的列表，每个项目前面会有相应的数字或字母表示顺序。

3. 定义列表

定义列表用于表示项目及其相关定义或描述。在 HTML 中，定义列表使用 <dl> 元素表示，每个项目由一个术语（<dt>）和其定义（<dd>）组成。

<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>

在浏览器显示，定义列表将呈现为一系列术语及其相应的定义。

三、区块

区块元素（Block-level Elements）用于创建页面中的块级结构，通常用于组织和布局页面的内容。这些元素会在页面中占据一整行，相邻的区块元素会各自占据一行，因此它们会在页面上显示为独立的块。

一些常见的 HTML 区块元素及其作用：

1. `<div>` 元素

<div> 元素用于在 HTML 页面中创建一个分隔块，它是最常用的区块级元素之一。<div> 元素通常用于组织页面结构和布局，并且可以通过 CSS 样式进行样式化。

<div>

</div>

运行显示：

2. `<p>` 元素

<p> 元素用于定义段落，它会在页面上显示为一个文本段落，通常会在前后插入一些空白来区分不同的段落。

<p>This is a paragraph.</p>

运行显示：

3. `<header>`、`<footer>` 和 `<section>` 元素

这些元素用于在页面中定义特定的区块，如页眉、页脚和主要内容区块。

<header>
<h1>Header</h1>
</header>

<section>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</section>

<footer>
<p>Copyright © 2024</p>
</footer>

运行显示：

4. `<nav>` 元素

<nav> 元素用于定义导航链接的区块，通常用于包含网站导航菜单。

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

运行显示：

5. `<article>` 元素

<article> 元素用于定义页面中独立的内容块，如博客文章、新闻报道等。

<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>

运行显示：