长春网站建设解决方案深圳建企业网站公司
HTML 基础知识：创建容器和表格（补充版）
HTML（超文本标记语言）是构建网页的基础。容器元素用于组织内容，表格用于展示结构化数据，两者都是网页设计中不可或缺的部分。
一、HTML 容器元素
容器元素就像网页的 "收纳盒"，帮助我们把相关内容归类整理，让页面结构更清晰，同时也方便后续用 CSS 美化和 JavaScript 交互。
1. <div> 元素
<div> 是最基础的块级容器，相当于一个通用的 "盒子"，没有固定含义，主要用于分组内容和布局。
特点：
- 块级元素，默认独占一行
- 可以嵌套其他任何元素（包括其他
<div>） - 本身没有任何样式，完全靠 CSS 定义外观
- 常用于页面的大区块划分，如头部、内容区、侧边栏等
<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>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>为什么要用语义化容器？
- 代码更易读，开发者能快速理解页面结构
- 有利于搜索引擎优化（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>实战案例：搭建图书馆网站
结果演示：
代码：
<!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>