蜗牛学苑 Java 智能体学习 Day26｜HTML（续）、断点调试思维导图复盘

一、思维导图整体知识结构梳理

1. 音视频标签

audio 音频标签 ：网页嵌入音频
- 属性：controls 播放控件、loop 循环播放、autoplay 自动播放、muted 静音、src 音频资源地址，支持 mp3。
video 视频标签 ：网页嵌入视频
- 属性：controls 视频控制条、width/height 宽高、loop 循环、autoplay 自动播放（需搭配 muted）、poster 封面图、src 视频地址，优先 mp4 格式。

2. 列表标签

ul 无序列表
- 子标签li；默认黑色小圆点；
- type 属性修改标记样式，优先 CSS；适用导航菜单、选项列表。
ol 有序列表
- 子标签li；默认数字编号；
- start 设置起始编号，type 修改编号类型（罗马数字、字母）；适用步骤流程、排行榜。
dl 自定义列表
- dl总容器；dt名词标题；dd对 dt 的解释描述；
- 使用场景：术语解释、问答、名词说明。

3.form 表单标签介绍

<form></form>表单容器，用来收集用户输入，提交给后端服务器。
action：提交的后端 URL 地址。
method：请求方式
- get：数据拼接在 url，长度有限，不安全。
- post：放请求体，地址栏看不到，适合提交敏感、大数据。

注意：表单内要提交的数据元素必须写 name 属性，后端才可以接收。

4.input 表单标签

input 依靠 type 属性切换控件类型
- type="text"普通单行文本框
- type="password"密码框
- type="radio"单选框：同一组 name 必须相同，checked 默认选中
- type="checkbox"复选框：同一 name 接收数组，checked 默认勾选
- type="submit"提交按钮，触发 form 表单提交
- type="reset"重置按钮，恢复表单初始状态
- type="button"普通按钮，本身无行为，绑定 JS 事件使用
- type="hidden"隐藏域，页面看不见，随表单提交数据
value：设置控件提交的值。

5.label 标签

作用：点击 label 文字自动选中输入框，提升用户体验。

for+id 绑定：label 的 for 等于 input 的 id；input 和 label 分开写。
嵌套写法：input 直接写在 label 内部，不需要 for 和 id。适用场景：单选、多选框配套文字。

6.select 下拉列表

select 下拉容器，option 是下拉每一项。
- value：提交后端的值；标签文字是页面展示给用户看的。
- selected：设置默认选中项。
- multiple：按住 Ctrl 多选；size 设置展示选项数量。

7.textarea 文本域

多行大文本输入框，留言、评论反馈场景。
rows 控制行数，cols 控制列宽；
和 type="text" 区别：text 只能单行；textarea 支持多行输入。

不能用 value 设置初始值，内容写标签中间。

8. 浏览器断点调试 1

打开调试工具 F12 → Sources 源代码面板，找到网页对应的源码文件。

设置断点：点击行号，蓝色箭头代表断点；运行页面，代码执行到断点自动暂停。
调试按钮：
- Step over：单步跳过，执行下一行
- Step into：步入，进入函数内部执行
- Step out：步出，跳出当前函数
暂停时可以查看各个变量的值。

9. 浏览器断点调试 2

条件断点：右键行号添加条件断点，只有表达式结果 true 才暂停。
Watch 监视面板：手动添加要观察的变量，实时看值变化。
Call Stack 调用栈：查看当前函数调用链路。
禁用断点：关闭全部断点，不用删除。
XHR/fetch 断点：拦截 AJAX 网络请求，接口调用自动断点，调试前后端交互。
移除断点：再次点击蓝色箭头取消断点。

二、思维导图制作意图

补齐 HTML 剩余标签：音视频、三类列表、form 全套表单控件，完整掌握网页表单采集数据，理解 get/post 提交差异，理解 name 属性的重要性。
掌握 label、select、textarea 细节用法，分清各个表单控件的适用业务场景。
学会浏览器 F12 Sources 断点调试，JS 代码排错、查看变量、跟踪接口调用，前端开发排查 BUG 必备技能。
把表单和调试知识点整理，为后续 SpringBoot 接收前端表单参数、前后端联调做铺垫，记录容易踩坑点，便于复习。

三、当日学习总结

今日学习 HTML 剩余内容：音视频标签、无序列表 / 有序列表 / 自定义列表，重点学习 form 表单全套组件 input、label、select、textarea。理解表单提交 action、method，分清 get 和 post 的区别，记住表单元素必须配置 name 后端才能拿数据。同时掌握浏览器开发者工具断点调试，学会单步执行、监视变量、条件断点、XHR 接口断点，能够定位前端 JS 错误。表单是前后端交互桥梁，浏览器调试是开发排错核心手段，属于 Web 开发必掌握基础。