HTML-布局标签
布局标签
<body>中的布局结构
页面的外观多种多样，但是大致都包含：页眉、导航栏、主内容、侧边栏、页脚等，这些标签都是块级元素。
| 标签 | 作用 |
|---|---|
<header> | 网页页眉（头部） |
<nav> | 导航栏 |
<main> | 网页内容。每个页面只能有一个 |
<aside> | 侧边栏 |
<article> | 文章相关 |
<section> | 分块 |
<footer> | 页面页脚（底部） |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
...
</head>
<body>
<header>网页页眉</header>
<nav>导航栏</nav>
<main>
<aside>侧边栏</aside>
<article>正文</article>
<section>
区域块1
</section>
<section>
区域块2
</section>
</main>
<footer>页面底部标签</footer>
</body>
</html>无语义标签
没有合适予以标签时，在进行一些布局的时候可以选择：<div> 和 <span> 标签。
<div>标签特点：
- 块级元素：默认独占一行，内容会自动换行
- 通常用于布局结构，作为其他元素的容器
- 可以包含其他块级或行内元素
- 默认无语义
<span>标签特点：
- 行内元素（内联元素）：不会换行，仅包裹内容
- 用于对文本或行内元素的局部样式或操作
- 默认无语义
列表标签
HTML列表是网页内容组织的重要元素。可以让我们显示内容更加整齐有序
有序列表
<ol>创建有顺序编号的项目列表
<ol> <li>第一步</li> <li>第二步</li> </ol>无序列表
<ul>创建没有特定顺序的项目列表
在html中常用语一些整齐对齐的模块中使用, 例如：
<ul> <li>列表项1</li> <li>列表项2</li> </ul><ul>:- 定义列表的容器
- 只能包含
<li>元素
<li>- 定义列表的选项
- 里面可以放其他html元素
描述列表
<dl>创建术语及其描述的列表，如：
<dl> <dt>家用电器</dt> <dd>冰箱</dd> <dd>空调</dd> <dd>电磁炉</dd> <dd>微波炉</dd> </dl>
表格
表格主要用于数据展示或者后台管理系统的信息展示
表格结构
完整表格结构：
<table>
<!-- 表格标题 -->
<caption>学生成绩表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>92</td>
</tr>
</tbody>
<!-- 表脚 -->
<tfoot>
<tr>
<td>平均</td>
<td>19.5</td>
<td>88.5</td>
</tr>
</tfoot>
</table>表格结构标签：
<table>标签：定义表格的容器<thead>标签：定义表格的表头部分，包含表名、列标题<tbody>标签：定义表格的主体内容<tfoot>标签：定义表格的页脚，通常包含汇总信息
表格内容标签：
<caption>标签：定义表名<tr>标签：定义表格中的行<th>标签：定义表头单元格，默认加粗、居中<td>标签：定义标准单元格
重点：表格的样式表中添加 border-collapse:collapse;可以将表格和单元格的边框合并，实现类似excel效果
通常我们只需将基本表格框架写出来，美化工作交给CSS完成
单元格合并
表格合并的原理：
- 确定是跨行还是跨列合并
- 找到目标单元格(左上原则)，确定合并数量
- 删除多余单元格
