本文承接上篇内容聚焦多媒体标签、资源路径、文本高级样式、盒子模型、div/span 布局、Flex 弹性布局、表单、表格、综合员工管理页面完整实战配套完整代码、属性对照表、页面实操案例适合零基础自学、课堂复习、前端入门备考上篇讲解基础网页认知、HTML 骨架、文字标签、CSS 三种引入方式、基础选择器。一、多媒体标签与资源路径1.1 图片标签img核心属性作用src图片地址必填width/height图片宽高像素img srcimg/news.jpg width6001.2 视频标签video核心属性作用src视频资源地址controls显示播放 / 暂停进度控件width/height播放器尺寸video srcvideo/demo.mp4 controls width800/video1.3 段落文本高级 CSS 属性line-height行高数值等于盒子高度可实现文字垂直居中text-indent: 2em首行缩进两个汉字宽度1.4 文本语义标签与字符实体文字强调标签带语义推荐strong加粗、em倾斜、ins下划线、del删除线特殊字符实体实体显示效果空格小于 大于 1.5 资源路径两种写法绝对路径本地磁盘D:/images/a.png网络完整 URLhttps://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提交地址 methodget/post表单容器action接口提交 URLget参数拼在 URL长度有限post数据放请求体无大小限制input输入框type 控制类型text 文本、password 密码、button 按钮select下拉选择框textarea多行文本域button按钮submit 提交、reset 重置、普通按钮4.3 员工搜索表单完整结构form 姓名input typetext placeholder请输入员工姓名 职位 select option讲师/option option班主任/option /select button typesubmit查询/button button typereset清空/button /form4.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 td2008-12-18/td tda href#编辑/a a href#删除/a/td /tr /tbody /table5.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 作用。