HTML 基础知识：创建容器和表格（补充版）

HTML（超文本标记语言）是构建网页的基础。容器元素用于组织内容，表格用于展示结构化数据，两者都是网页设计中不可或缺的部分。

一、HTML 容器元素

容器元素就像网页的 "收纳盒"，帮助我们把相关内容归类整理，让页面结构更清晰，同时也方便后续用 CSS 美化和 JavaScript 交互。

1. <div> 元素

<div> 是最基础的块级容器，相当于一个通用的 "盒子"，没有固定含义，主要用于分组内容和布局。

特点：

  1. 块级元素，默认独占一行
  2. 可以嵌套其他任何元素（包括其他<div>）
  3. 本身没有任何样式，完全靠 CSS 定义外观
  4. 常用于页面的大区块划分，如头部、内容区、侧边栏等
<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> 是行内容器，用于包裹文本或行内元素的小范围内容。

特点：

  1. 行内元素，不会独占一行，和其他内容在同一行显示
  2. 主要用于对文本的部分内容进行特殊处理（如变色、加粗等）
  3. 没有默认样式，需要通过 CSS 定义
<p>这是一段普通文本，其中<span class="highlight">这部分文字需要高亮显示</span>，还有<span class="important">这部分是重要内容</span>。
</p>

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>

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

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

为什么要用语义化容器？

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

二、HTML 表格

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

1. 基本表格结构

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

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

表格的三个可选部分：

  1. <thead>: 表头部分，包含表格的标题行
  2. <tbody>: 表体部分，包含主要的数据行
  3. <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. 表格常用属性

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

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

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

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

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

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

  4. <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>

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

结果演示：

代码：

<!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></div></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-29236-0/72jpg/29236.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=f642f34c-9f46-4a6f-ad15-c9b9b2875004">股票大作手操盘术——融合时间和价格的利弗莫尔准则</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-41358-1/72jpg/41358.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=67e260c3-b0cb-41bb-b698-6f9dbd54a610">聪明的投资者（第4版，注疏点评版）</a></div></td></tr><tr><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-37407-3/72jpg/37407.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=4d1c7610-10d7-4d4b-a2f2-dd702983ff8d">极简主义 风靡欧美的工作与生活理念</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-48908-1/72jpg/48908.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=3eee0747-bfd0-49b1-86b4-18d838480264">活好 我这样活到105岁</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-38808-7/72jpg/38808.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=ca2de4df-b928-47a8-b8ce-5a725106df07">从零开始学炒股：股票入门与实战（全彩图解版）</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-51023-5/72jpg/51023.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=c7309aeb-a7bc-45e4-9818-47bc4b5579f4">低风险创业</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-48388-1/72jpg/48388.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=6498a974-0db5-4379-bb77-eaf098e57a28">政府会计制度详解与实务 条文解读 实务应用 案例讲解</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-54342-4/72jpg/54342.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=7a745ee7-4a02-412f-942a-bf0131743346">认知觉醒：开启自我改变的原动力</a></div></td></tr></table></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/89069.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/89069.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/89069.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多目标优化|HKELM混合核极限学习机+NSGAII算法工艺参数优化、工程设计优化，四目标（最大化输出y1、最小化输出y2,y3,y4），Matlab完整源码

多目标优化|HKELM混合核极限学习机+NSGAII算法工艺参数优化、工程设计优化，四目标（最大化输出y1、最小化输出y2,y3,y4），Matlab完整源码

基本介绍 1.HKELM混合核极限学习机NSGAII多目标优化算法&#xff0c;工艺参数优化、工程设计优化&#xff01;&#xff08;Matlab完整源码和数据&#xff09; 多目标优化是指在优化问题中同时考虑多个目标的优化过程。在多目标优化中&#xff0c;通常存在多个冲突的目标&#x…
阅读更多...
【AI智能体】Dify 基于知识库搭建智能客服问答应用详解

【AI智能体】Dify 基于知识库搭建智能客服问答应用详解

目录 一、前言 二、Dify 介绍 2.1 Dify 核心特点 三、AI智能体构建智能客服系统介绍 3.1 基于AI智能体平台搭建智能客服系统流程 3.1.1 需求分析与场景设计 3.1.2 选择合适的AI智能体平台 3.1.3 工作流编排与调试 3.1.4 系统集成与发布 3.2 使用AI智能体构建智能客服系…
阅读更多...
事务~~~

事务~~~

1、四大特性&#xff1a;A 原子性&#xff1a;对数据的一组操作&#xff0c;要么执行成功&#xff0c;要么不执行C 一致性&#xff1a;事务前后的状态要保持一致&#xff0c;可以理解为数据的一致性I 隔离性&#xff1a;多个事务之间是隔离的&#xff0c;互不影响D 持久性&…
阅读更多...
【Linux编译】./build.sh: line 17: $‘\r‘: command not found

【Linux编译】./build.sh: line 17: $‘\r‘: command not found

文章目录0.运行编译脚本遇到问题&#xff1a;方法 1&#xff1a;使用 dos2unix&#xff08;推荐&#xff09;1. 安装 dos2unix2. 递归转换整个目录方法 2&#xff1a;使用 sed&#xff08;无需安装额外工具&#xff09;方法 3&#xff1a;使用 tr&#xff08;仅单文件&#xff…
阅读更多...
Weblogic历史漏洞利用

Weblogic历史漏洞利用

文章目录漏洞介绍WebLogic 漏洞概述历史漏洞利用弱口令CVE-2014-4210CVE-2018-2894CVE-2019-2725CVE-2020-14882漏洞介绍 Oracle WebLogic Server 是一个用于开发和部署企业级 Java 应用的服务器平台&#xff0c;但其历史上存在多个严重漏洞&#xff0c;尤其以远程代码执行&am…
阅读更多...
[Rust 基础课程]使用 Cargo 创建 Hello World 项目

[Rust 基础课程]使用 Cargo 创建 Hello World 项目

Cargo&#xff08;https://crates.io/&#xff09; 是 Rust 语言中最常用的构建工具和包管理工具&#xff0c;我们看看怎么通过 Cargo 创建一个 Hello World 项目并运行。 :::warning 通过官方的 Rust 安装方式安装 Rust&#xff0c;Cargo 是同时默认安装好的了 ::: 首先&am…
阅读更多...
C语言 --- 函数递归

C语言 --- 函数递归

函数递归一、什么是函数递归二、函数递归的要点三、示例1.计算n的阶乘2.提取一个任意正整数的所有位数&#xff0c;按顺序排列3.获取第n个斐波那契数&#xff0c;最开始的两个数是1&#xff0c;1四、总结一、什么是函数递归 函数递归是一种解决问题的思想&#xff0c;是将一个…
阅读更多...
GitHub 趋势日报 (2025年07月14日)

GitHub 趋势日报 (2025年07月14日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图1916claude-code795the-book-of-secret-knowledge728free-for-dev547markitdown367…
阅读更多...
PyTorch中张量（TensorFlow）操作方法和属性汇总详解和代码示例

PyTorch中张量（TensorFlow）操作方法和属性汇总详解和代码示例

1、张量的操作汇总 下面是 PyTorch 中常见的 张量操作方法汇总&#xff0c;包括 创建、索引、变换、数学运算、广播机制、维度操作 等内容&#xff0c;并附上详解和代码示例&#xff0c;便于系统学习与实战参考。一、张量创建&#xff08;torch.tensor 等&#xff09; import t…
阅读更多...
统一日志格式规范与 Filebeat+Logstash 实践落地

统一日志格式规范与 Filebeat+Logstash 实践落地

背景 在多部门、多技术栈并存的企业环境中&#xff0c;日志收集与分析是保障系统稳定运行的核心能力之一。然而&#xff0c;不同开发团队采用各异的日志打印方式&#xff0c;导致日志数据结构混乱&#xff0c;严重影响后续的收集、存储、检索与告警效率。 比如我们大部门就有多…
阅读更多...
【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(三):实现一个音乐列表的页面

【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(三):实现一个音乐列表的页面

鸿蒙里面&#xff0c;实现一个音乐播放的列表,模拟数组的数据展示 实现效果代码实现 准备数据 songs:SongItemTypes[] [{img:https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg,name:直到世界的尽头,author:WANDS},{img:https://yjy-teach-oss.oss-cn…
阅读更多...
2025年渗透测试面试题总结-2025年HW(护网面试) 47（题目+回答）

2025年渗透测试面试题总结-2025年HW(护网面试) 47（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 2025年HW(护网面试) 47 1. UDF提权 2. 命令执行与代码执行的区别 3. 文件包含利用姿势 4. 漏洞复现流程 …
阅读更多...
iPhone 数据擦除软件评测（最新且全面）

iPhone 数据擦除软件评测（最新且全面）

当您准备出售、捐赠或回收 iPhone 时&#xff0c;仅仅恢复出厂设置并不足以保证您的个人数据彻底消失。专业的 iPhone 数据擦除软件采用先进的技术&#xff0c;确保您的敏感信息永久无法恢复。本文回顾了十种流行的 iPhone 数据擦除工具&#xff0c;详细介绍了它们的功能、优点…
阅读更多...
Qt 将触摸事件转换为鼠标事件（Qt4和Qt5及以上版本）

Qt 将触摸事件转换为鼠标事件（Qt4和Qt5及以上版本）

在Qt中&#xff0c;触摸事件&#xff08;QTouchEvent&#xff09;和鼠标事件&#xff08;QMouseEvent&#xff09;是两种不同的输入事件类型。通常情况下&#xff0c;触摸事件不会自动转换为鼠标事件&#xff0c;因为它们代表的是不同的输入设备&#xff08;触摸屏 vs 鼠标&…
阅读更多...
Blender 云渲染高效流程：渲染 101 集群加速实战​

Blender 云渲染高效流程：渲染 101 集群加速实战​

一、核心优势&#xff1a;适配 Blender 全场景需求​ ✅ 全渲染器深度兼容​ Cycles&#xff08;CPU/GPU 模式&#xff09;&#xff1a;云端 4090 显卡渲染速度比本地快 12 倍&#xff0c;支持 8K 分辨率 16K 纹理无压力​ Eevee 实时渲染&#xff1a;集群同步输出预览动画&am…
阅读更多...
SQL学习记录01

SQL学习记录01

什么是SQL&#xff1f; Structured Query Language &#xff08;结构化查询语言&#xff09;&#xff0c;与关系型数据库进行通信的标准语言。什么是数据库&#xff1f;“按照数据结构来组织、存储、和管理数据的仓库。”一个长期存储在计算机内的、有组织的、可共享的、统一管…
阅读更多...
医疗项目如何应对法规变更？

医疗项目如何应对法规变更？

医疗项目应对法规变更的关键策略包括建立法规监测体系、及时内部培训和沟通、调整业务流程和合规标准、技术系统快速迭代升级。 其中&#xff0c;建立有效的法规监测体系尤其重要。这意味着企业需要实时关注监管机构发布的政策更新和公告&#xff0c;迅速理解法规变化内容及对自…
阅读更多...
AI Top10

AI Top10

AI 前十排名排名团队/机构名称国家核心优势领域1DeepMind英国强化学习、Alpha系列模型2OpenAI美国GPT系列、多模态大模型3DeepSeek中国高效NLP模型、开源生态建设4Google Brain美国Transformer架构、TensorFlow框架5Meta AI (FAIR)美国计算机视觉、Llama系列模型6NVIDIA Resear…
阅读更多...
LabVIEW通知器函数应用

LabVIEW通知器函数应用

介绍LabVIEW通知器&#xff08;Notifier&#xff09;函数&#xff0c;演示两类并行循环通信场景&#xff1a;单对循环数据交互、多循环通知聚合&#xff0c;含程序框图&#xff08;数据发送 / 接收、多循环通知&#xff09;与前面板&#xff08;数据显示&#xff09;。功能说明…
阅读更多...
推荐《Python 编程：从入门到实践》之Python编程的基础知识

推荐《Python 编程：从入门到实践》之Python编程的基础知识

在 Python 学习资源琳琅满目的当下&#xff0c;《Python 编程&#xff1a;从入门到实践》脱颖而出&#xff0c;堪称 Python 入门的不二之选。本书由经验丰富的教育工作者撰写&#xff0c;以清晰易懂的语言和循序渐进的方式&#xff0c;引领读者从 Python 的基础语法逐步迈向实际…
阅读更多...
最新文章

Copyright @ 2022~2023