HTML table 标签、框架与层

^小桃冰茶

于 2025-04-29 10:16:29 发布

阅读量905

点赞数 40

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2403_89524622/article/details/147577614

版权

在 HTML 网页开发过程中，table标签、框架和层的使用是实现多样化页面布局和功能的重要手段。它们各自有着独特的特性和应用场景，合理运用这些技术，能够让网页在结构清晰的同时，具备更好的视觉效果和交互体验。接下来，我们将深入探讨这三方面的知识。

一、HTML table 标签和页面布局

1. 概念与理解

table标签用于在 HTML 中创建表格，通过<table>定义表格整体，<tr>表示表格行，<td>表示表格单元格，<th>用于定义表头单元格。利用表格的行列结构，可以对页面元素进行较为规整的布局，在早期网页布局中应用广泛。

2. 重点注意事项

表格结构要完整，<table>、<tr>、<td>标签需正确嵌套使用，否则可能导致显示错乱。

表头<th>应合理使用，增强表格可读性，且通常与<caption>标签配合，为表格添加标题。

虽然表格可用于布局，但在响应式设计和语义化方面存在局限，如今更多用于展示结构化数据，不建议过度用于页面布局。

3. 案例分析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML table标签示例</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>92</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>90</td>
            <td>87</td>
        </tr>
    </table>
</body>
</html>

上述代码创建了一个学生成绩表，通过<caption>添加标题，<th>定义表头，<td>填充数据，并使用 CSS 样式设置表格边框合并，使表格展示更加美观规范。

4. 知识图表

标签	用途	示例
<table>	定义表格	<table>...</table>
<tr>	定义表格行	<tr><td>单元格内容</td></tr>
<td>	定义表格单元格	<td>数据</td>
<th>	定义表头单元格	<th>标题</th>
<caption>	定义表格标题	<caption>表格标题</caption>

5. 题目示范

创建一个课程表，包含星期一到星期五的上午和下午课程安排，表头需注明时间和星期信息。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <caption>一周课程表</caption>
        <tr>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>历史</td>
            <td>地理</td>
            <td>生物</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>
    </table>
</body>
</html>

二、框架

1. 概念与理解

HTML 框架通过<frameset>、<frame>等标签实现，可将浏览器窗口划分为多个独立的区域，每个区域可显示不同的 HTML 页面。框架常用于创建具有固定导航栏和内容区域的网页结构，方便用户在不同页面间切换而无需重新加载整个页面。

2. 重点注意事项

<frameset>标签不能与<body>标签同时出现在一个 HTML 文档中，需单独使用。

每个<frame>标签必须指定src属性，用于加载对应的 HTML 页面。

由于框架在搜索引擎优化、书签管理和移动设备适配等方面存在问题，如今已逐渐被 CSS 布局取代，新的网页开发中较少使用。

3. 案例分析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML框架示例</title>
</head>
<frameset cols="20%, 80%">
    <frame src="nav.html" />
    <frame src="content.html" />
</frameset>
</html>

假设nav.html是导航栏页面，content.html是内容页面，上述代码将浏览器窗口分为两列，左侧显示导航栏，右侧显示内容，用户点击导航栏链接可在右侧区域切换不同内容页面。

4. 知识图表

标签	用途	示例
<frameset>	定义框架集，划分窗口区域	<frameset cols="20%, 80%">...</frameset>
<frame>	定义框架中的单个窗口，指定加载页面	<frame src="page.html" />
<noframes>	为不支持框架的浏览器提供替代内容	<noframes><body>不支持框架</body></noframes>

5. 题目示范

创建一个包含上、下两个框架的页面，上方框架高度占比 20%，用于显示标题，下方框架高度占比 80%，用于显示具体内容。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>框架题目答案</title>
</head>
<frameset rows="20%, 80%">
    <frame src="title.html" />
    <frame src="main_content.html" />
</frameset>
</html>

三、层的使用

1. 概念与理解

在 HTML 中，层通常指的是使用<div>标签结合 CSS 样式（如position属性）来实现元素的分层布局。通过设置不同的定位方式（如static、relative、absolute、fixed），可以精确控制元素在页面中的位置，实现元素的重叠、浮动等效果，从而创建出复杂且灵活的页面布局。

2. 重点注意事项

position属性的不同值有不同的定位规则，absolute和fixed定位的元素脱离文档流，可能会对其他元素布局产生影响，需谨慎使用。

使用z-index属性可以设置元素的堆叠顺序，数值越大，元素越在上方显示，但要注意该属性只对定位元素有效。

层的嵌套要合理，避免层级过深导致样式难以控制和维护。

3. 案例分析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层的使用示例</title>
    <style>
        .layer1 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .layer2 {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="layer1">
        <div class="layer2"></div>
    </div>
</body>
</html>

上述代码中，.layer1设置为相对定位，作为定位参考，.layer2设置为绝对定位，相对于.layer1进行偏移，实现了蓝色层在红色层内的特定位置显示，展示了层的嵌套和定位效果。

4. 知识图表

position值	定位规则	应用场景
static	默认值，元素按正常文档流排列	常规布局
relative	相对于元素本身原来位置进行偏移，不脱离文档流	微调元素位置
absolute	相对于最近的已定位祖先元素定位，脱离文档流	精确控制元素在特定区域内的位置
fixed	相对于浏览器窗口定位，脱离文档流	固定导航栏、悬浮按钮

5. 题目示范

创建两个层，一个背景色为绿色，宽高均为 150px，另一个背景色为黄色，宽高均为 100px，黄色层相对于绿色层向右下方偏移 50px 显示。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层的题目答案</title>
    <style>
        .green-layer {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: green;
        }
        .yellow-layer {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="green-layer">
        <div class="yellow-layer"></div>
    </div>
</body>
</html>

四、总结

HTML 的table标签、框架和层在网页布局和功能实现上各有特点。table标签适合展示结构化数据，但在现代响应式布局中存在局限；框架曾用于创建多区域页面，但因诸多问题逐渐被替代；层通过 CSS 定位实现灵活布局，是当前网页布局的重要手段。在实际开发中，应根据具体需求选择合适的技术，优先考虑语义化和可维护性，结合 CSS 和 JavaScript，打造出优质的网页作品。