本文承接上篇内容，聚焦多媒体标签、资源路径、文本高级样式、盒子模型、div/span 布局、Flex 弹性布局、表单、表格、综合员工管理页面完整实战，配套完整代码、属性对照表、页面实操案例，适合零基础自学、课堂复习、前端入门备考；上篇讲解基础网页认知、HTML 骨架、文字标签、CSS 三种引入方式、基础选择器。
一、多媒体标签与资源路径
1.1 图片标签<img>
| 核心属性 | 作用 |
|---|---|
| src | 图片地址（必填） |
| width/height | 图片宽高（像素） |
<img src="img/news.jpg" width="600">1.2 视频标签<video>
| 核心属性 | 作用 |
|---|---|
| src | 视频资源地址 |
| controls | 显示播放 / 暂停进度控件 |
| width/height | 播放器尺寸 |
<video src="video/demo.mp4" controls width="800"></video>1.3 段落文本高级 CSS 属性
line-height：行高，数值等于盒子高度可实现文字垂直居中；text-indent: 2em：首行缩进两个汉字宽度；
1.4 文本语义标签与字符实体
文字强调标签（带语义，推荐）
<strong>加粗、<em>倾斜、<ins>下划线、<del>删除线
特殊字符实体
| 实体 | 显示效果 |
|---|---|
| 空格 | |
| < | 小于 < |
| > | 大于 > |
1.5 资源路径两种写法
- 绝对路径
- 本地磁盘：
D:/images/a.png - 网络完整 URL：
https://xxx.com/1.jpg
- 本地磁盘：
- 相对路径（开发推荐）
./当前目录（可省略不写）../上一级目录
1.6 小节小结
img、video 用于页面多媒体展示；开发统一使用相对路径管理图片视频资源。
二、CSS 盒子模型（页面布局核心）
2.1 盒子基础概念
网页中所有 HTML 标签都可以看成矩形盒子，页面排版本质是排布一个个盒子。
2.2 盒子四大组成部分
- content：内容区域，存放文字图片，width/height 控制大小；
- padding：内边距，内容与边框之间空白；
- border：盒子边框；
- margin：外边距，盒子与其他盒子之间间距。
2.3 简写赋值规则（顺序：上 右 下 左）
/* 四边统一 */ padding: 20px; /* 上下20，左右30 */ padding: 20px 30px; /* 上10 左右20 下5 */ padding:10px 20px 5px; /* 上、右、下、左分别赋值 */ padding:10px 20px 30px 5px;单独方位属性：padding-top、margin-left、border-right等。
2.4 布局分块标签 div 与 span
| 标签 | 类型 | 特点 | 适用场景 |
|---|---|---|---|
<div> | 块级元素 | 独占一行，可设置宽高 | 页面大区域分块（导航、正文、页脚） |
<span> | 行内元素 | 同行多个，无法设置宽高 | 段落内局部文字修饰 |
2.5 页面整体居中方案
页面内容占屏幕 70% 并居中核心代码：
#container{ width:70%; margin-left:auto; margin-right:auto; }2.6 小节小结
盒子模型是网页布局底层基础；div 做大块布局，span 修饰行内文字；margin:auto 实现页面水平居中。
三、Flex 弹性布局（现代主流布局）
3.1 Flex 概述
Flex（弹性盒子）一维布局模型，给父容器开启display:flex，即可自由控制子元素排列、对齐，导航、搜索栏等场景首选。
3.2 父容器核心属性
display:flex：开启弹性布局；flex-direction主轴方向- row：水平从左到右（默认）
- column：垂直从上到下
justify-content主轴对齐- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两边贴边，剩余空间平分
- space-around：两侧留白均分
align-items:center：垂直居中
3.3 实战：导航栏 flex 示例
.navbar{ display:flex; justify-content: space-between; align-items:center; padding:10px; background:#ccc; }3.4 小节小结
Flex 简化水平垂直居中、左右分布等布局，企业开发替代传统浮动布局。
四、表单 form（数据采集模块）
4.1 表单作用
收集用户输入信息，提交给后端服务器（登录、搜索、新增数据页面必备）。
4.2 表单核心标签
<form action="提交地址" method="get/post">表单容器- action：接口提交 URL
- get：参数拼在 URL，长度有限
- post：数据放请求体，无大小限制
<input>输入框，type 控制类型：text 文本、password 密码、button 按钮<select>下拉选择框<textarea>多行文本域<button>按钮：submit 提交、reset 重置、普通按钮
4.3 员工搜索表单完整结构
<form> 姓名：<input type="text" placeholder="请输入员工姓名"> 职位： <select> <option>讲师</option> <option>班主任</option> </select> <button type="submit">查询</button> <button type="reset">清空</button> </form>4.4 小节小结
form 负责数据采集，get 适合简单查询，post 适合密码、大量文本提交。
五、表格 table（列表数据展示）
5.1 表格全套标签
| 标签 | 作用 |
|---|---|
<table> | 表格整体容器 |
<thead> | 表头区域（可选） |
<tbody> | 表格主体数据（必写） |
<tr> | 一行 |
<th> | 表头单元格（加粗居中） |
<td> | 普通数据单元格 |
5.2 员工列表表格示例
<table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>入职时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>赵敏</td> <td>女</td> <td>2008-12-18</td> <td><a href="#">编辑</a> <a href="#">删除</a></td> </tr> </tbody> </table>5.3 小节小结
table 用于展示规整列表数据（员工、商品、订单），thead 区分表头，tbody 存放业务数据。
六、综合实战：员工管理完整页面结构
页面固定四大区域，结合 div 盒子 + Flex + 表单 + 表格实现：
- 顶部导航栏：flex 左右分布，左侧系统名称，右侧退出登录；
- 搜索表单区：输入框、下拉、查询 / 重置按钮；
- 表格数据区：展示全部员工信息，提供编辑删除操作；
- 底部版权区：页面最下方居中版权文字。
页面开发书写规范
页面从上到下逐行解析，布局按从上至下顺序编写，先用 div 划分大区块，再填充表单、表格等内部元素。
七、下篇全文总结
- 多媒体：img 图片、video 视频，相对路径是开发标准写法；
- 文本进阶：行高、首行缩进、语义标签、特殊字符；
- 盒子模型：content/padding/border/margin 四部分，div 分块、span 行内修饰；
- Flex 弹性布局：主轴对齐、垂直居中，导航栏首选；
- 表单：form 采集数据，get/post 提交区别；
- 表格：table 展示列表，thead/tbody 分层；
- 综合页面：导航 + 搜索 + 表格 + 页脚四段式企业后台标准布局。
拓展练习建议
- 独立完成央视新闻完整图文页面，练习 p、img、文字样式；
- 使用盒子 + flex 制作导航栏，实现左右分布、垂直居中；
- 手写员工管理完整页面，整合表单、表格、页面布局。
下篇面试高频考点
- div 与 span 块级 / 行内元素区别；
- CSS 盒子模型四部分含义，内外边距简写；
- Flex 布局常用 justify-content、align-items 属性；
- 表单 get 和 post 提交差异；
- table 表格 thead、tbody 作用。
