HTML 基础知识二：创建容器和表格（附html实战案例）

<header>
  <h1>我的网站</h1>
  <nav>
    <a href="/home">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>
 
<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  
  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
    </ul>
  </aside>
</main>
 
<footer>
  <p>© 2023 我的网站</p>
</footer>

2. `<span>`元素

<span>是行内容器，用于包裹文本或行内元素的小范围内容。

特点：

行内元素，不会独占一行，和其他内容在同一行显示
主要用于对文本的部分内容进行特殊处理（如变色、加粗等）
没有默认样式，需要通过 CSS 定义

示例代码：

<p>
  这是一段普通文本，其中<span class="highlight">这部分文字需要高亮显示</span>，
  还有<span class="important">这部分是重要内容</span>。
</p>
AI写代码
html

3. 语义化容器元素

HTML5 引入了一批有特定含义的容器元素，让代码更易读，也让搜索引擎和辅助设备能更好地理解页面结构。

常用语义化容器：

1、<header>: 表示页面或区域的头部，通常包含标题、logo、导航等

示例代码：

<header>
  <img src="logo.png" alt="网站logo">
  <h1>我的网站</h1>
</header>

2、<nav>: 专门用于放置导航链接，让导航区域更明确

示例代码：

<nav>
  <a href="/home">首页</a>
  <a href="/news">新闻</a>
  <a href="/contact">联系我们</a>
</nav>

3、<main>: 表示页面的主要内容，一个页面最好只包含一个 <main>

示例代码：

<main>
  <h2>今日要闻</h2>
  <p>主要新闻内容...</p>
</main>

4、<article>: 表示独立完整的内容，如一篇文章、一条评论、一个帖子等

示例代码：

<article>
  <h3>如何学习HTML</h3>
  <p>学习HTML的步骤...</p>
</article>

5、<section>: 表示一个主题性的内容区块，通常包含一个标题

示例代码：

<section>
  <h3>HTML基础</h3>
  <p>HTML的基本概念...</p>
</section>

6、<aside>: 表示与主要内容相关的辅助信息，如侧边栏、注释、补充说明等

示例代码：

<aside>
  <h4>相关推荐</h4>
  <ul>
    <li><a href="#">CSS教程</a></li>
    <li><a href="#">JavaScript教程</a></li>
  </ul>
</aside>
AI写代码
html

7、<footer>: 表示页面或区域的底部，通常包含版权信息、联系方式等

示例代码：

<footer>
  <p>© 2023 我的网站 版权所有</p>
  <p>联系邮箱: contact@example.com</p>
</footer>
AI写代码
html

为什么要用语义化容器？

代码更易读，开发者能快速理解页面结构
有利于搜索引擎优化（SEO），搜索引擎能更好地识别内容
方便屏幕阅读器等辅助设备解析页面，提高可访问性
符合现代 Web 标准，便于维护和扩展

二、HTML 表格

表格用于展示结构化数据，如成绩单、产品价格表、员工信息表等，让数据整齐有序，易于比较和阅读。

1. 基本表格结构

一个完整的表格由以下元素组成：

<table>: 表格的容器，所有表格内容都放在这里面
<tr>: 表示表格的一行（table row）
<th>: 表示表头单元格（table header），通常包含列名或行名，默认加粗居中
<td>: 表示数据单元格（table data），包含具体数据

表格的三个可选部分：

<thead>: 表头部分，包含表格的标题行
<tbody>: 表体部分，包含主要的数据行
<tfoot>: 表尾部分，包含汇总信息等

示例代码：

<table>
  <!-- 表头 -->
  <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>
  </tbody>
  
  <!-- 表尾 -->
  <tfoot>
    <tr>
      <td colspan="3">总计: 2人</td> <!-- colspan 表示跨3列 -->
    </tr>
  </tfoot>
</table>

2. 表格常用属性

border: 设置表格边框的宽度（以像素为单位），但在 HTML5 中推荐用 CSS 设置

示例代码：

<table border="1"> <!-- 边框宽度为1像素 -->

colspan: 使单元格跨越多列，值为数字，表示跨越的列数

示例代码：

<td colspan="2">这是跨2列的单元格</td>

rowspan: 使单元格跨越多行，值为数字，表示跨越的行数

示例代码：

<td rowspan="3">这是跨3行的单元格</td>

<caption>: 表格标题，放在 <table>内部的最前面

示例代码：

<table>
  <caption>员工信息表</caption> <!-- 表格标题 -->
  <!-- 表格内容 -->
</table>

示例：带合并单元格的表格

示例代码：

<table border="1">
  <caption>部门人员分配表</caption>
  <tr>
    <th>部门</th>
    <th>姓名</th>
    <th>职责</th>
  </tr>
  <tr>
    <td rowspan="2">技术部</td> <!-- 跨2行 -->
    <td>张三</td>
    <td>前端开发</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>后端开发</td>
  </tr>
  <tr>
    <td>市场部</td>
    <td colspan="2">王五（部门经理）</td> <!-- 跨2列 -->
  </tr>
</table>

HTML实战案例：搭建图书馆网站

代码：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>好书推荐网站</title>
    </head>
    <body>
    <table >
        <caption><h1 style="color: dodgerblue ;size: 38px">好书推荐网站</h1></caption>
        <tr>
            <td>
                <div style="background: cornsilk ;width: 200px;height: 300px;float: left">
                <img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-53619-8/72jpg/53619.jpg" width="200" height="250">
                <a href="https://www.ptpress.com.cn/shopping/buy?bookId=5e6fe0f3-6ee7-40c2-8c25-9cdf9b0c87e6">心 稻盛和夫的一生嘱托</a>
                </div>
            </td>
            <td>
                <div style="background: cornsilk ;width: 200px;height: 300px;float: left">
                <img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" width="200" height="250">
                <a href="https://www.ptpress.com.cn/shopping/buy?bookId=ebb3164d-06af-41f5-85bd-60f95a5e09cb">即兴演讲 掌控人生关键时刻</a>
                </div>
            </td>
            <td>
                <div style="background: cornsilk ;width: 200px;height: 300px;float: left">
                <img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41359-8/72jpg/41359.jpg" width="200" height="250">
                <a href="https://www.ptpress.com.cn/shopping/buy?bookId=25c373dc-e599-4036-8534-a102aad0a776">聪明的投资者（原本第4版，平装本）</a>
                </div>
            </td>
            <td>
                <div style="background: cornsilk ;width: 200px;height: 300px;float: left">
                <img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-24669-1/72jpg/24669.jpg" width="200" height="250">
                <a href="https://www.ptpress.com.cn/shopping/buy?bookId=c44b8d45-6a91-4800-b91c-c3392379b208">番茄工作法图解：简单易行的时间管理方法</a>

结果演示：

（注：所有示例代码可直接复制到本地 HTML 文件运行，图片资源需根据实际需求替换；实战案例代码保持原文未闭合状态，可自行补充完整。）

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责