day04 前端HTML+CSS+JS流程控制实战学习笔记
一、基础入门：第一个HTML页面
1. 新建基础HTML文件，搭建标准网页骨架
2. 在页面主体中输出文本 hello html!!!
3. 在浏览器打开本地html文件，确认页面正常渲染，完成网页开发入门，熟悉HTML文件运行方式、浏览器查看效果的流程。
二、随堂练习：微头条登录页面页面样式定制（HTML+CSS布局）
- 页面定制需求
1. 登录卡片宽度固定为 400px
2. 页面整体背景设置渐变配色
3. 登录按钮修改为橙色样式
4. 在「立即注册」旁新增「忘记密码？」超链接
- 页面结构实现
1. 页面标题：微头条登录
2. 表单元素：用户名输入框、密码输入框
3. 功能按钮：橙色登录按钮
4. 底部链接：立即注册 | 忘记密码
5. 样式优化：卡片圆角、阴影、页面水平垂直居中，渐变背景美化页面视觉效果
- CSS样式要点
- 使用 width 限定卡片宽度400px；
- 渐变背景 background 设置页面底色；
- 按钮配色修改为橙色；
- 布局居中样式，搭配圆角、阴影提升页面美观度；
- 排版调整，放置两处底部链接。
三、JavaScript流程控制：登录校验逻辑实现
- 账号校验功能
1. 输入正确用户名与密码：弹出弹窗提示「登录成功！」
2. 账号或密码填写错误：弹窗提示「用户名或密码错误」
- 底层知识点：流程控制
1. 使用 if-else 分支判断，对表单输入内容做条件校验
2. 匹配预设账号密码则走成功分支，否则进入错误提示分支
3. 借助浏览器弹窗 alert 完成结果反馈，将day04流程控制知识点落地到网页交互中
四、登录后主页：微头条内容展示页面
页面功能
1. 顶部功能按钮：发布微头条
2. 多条动态内容列表展示
3. 每条内容右侧附带删除按钮，可对单条动态执行删除操作
业务逻辑
1. 登录校验通过后跳转至主页
2. 内容列表渲染已有发布内容
3. 删除按钮绑定点击事件，触发对应条目移除逻辑
4. 完整闭环：登录校验→主页查看内容→发布新内容→删除内容
五、当日学习总结
1. 掌握HTML基础网页结构编写，能够独立搭建静态页面骨架；
2. 熟练使用CSS完成页面布局、尺寸、配色、渐变、居中美化等样式设置；
3. 运用if分支流程控制完成表单账号校验，巩固分支判断核心知识点；
4. 结合JS点击事件实现页面交互：登录弹窗提示、内容删除功能；
5. 完整落地微头条网页版项目，从登录页到内容主页，打通静态页面+动态交互全流程，理解前端页面业务实现思路。