用 HTML 和 CSS 做一个个人学习记录首页
页面结构通常可以分为 header、nav、main、section 和 footer。这样写的好处是层次清楚，后续维护时能快速找到对应区域。
样式部分先处理整体字体、背景和间距，再处理导航、内容卡片和页脚。对于个人学习站来说，页面不需要复杂动效，保持清晰易读更重要。
欢迎访问
这里主要记录我在学习前端页面、后端接口、数据库和日常开发工具时整理的笔记。 内容会尽量写成可复盘的学习记录，包括问题背景、处理步骤和最后总结，方便以后查阅。
技术笔记
- 用 HTML 和 CSS 做一个个人学习记录首页 记录页面从头部、导航、内容区到页脚备案信息的搭建过程，重点整理语义化标签和基础样式写法。
- Flex 和 Grid 在卡片列表中的使用区别 通过文章列表和专题卡片两个小例子，对比一维布局和二维布局的适用场景。
- JavaScript 读取表单内容的小练习 练习 input、textarea、button 的基础交互，记录获取用户输入、简单校验和页面提示的写法。
- 使用浏览器开发者工具排查样式问题 记录一次导航栏在移动端换行异常的排查过程，包括元素检查、盒模型查看和断点调试。
- MySQL 常用查询语句整理 整理 SELECT、WHERE、ORDER BY、LIMIT 等基础语法，并用学习笔记表作为示例数据。
文章内容
Flex 和 Grid 在卡片列表中的使用区别
Flex 更适合一行或一列的内容排列，例如导航菜单、按钮组和简单列表。Grid 更适合多行多列布局，例如文章卡片、专题入口和图片列表。
实际使用时，可以先判断内容是否需要同时控制行和列。如果只处理单方向排列，Flex 会更直观；如果需要固定列数或整体网格，Grid 更方便。
JavaScript 读取表单内容的小练习
读取表单内容时，常用 querySelector 找到输入框，再通过 value 获取当前输入。提交前通常需要 trim 去掉前后空格，并判断内容是否为空。
这个练习主要帮助理解 DOM 查询、事件监听、基础校验和页面反馈，是后续学习登录表单、留言表单和搜索功能的基础。
使用浏览器开发者工具排查样式问题
遇到页面错位时，可以先打开元素检查，查看实际生效的 CSS、盒模型宽高、margin 和 padding。很多问题都能从样式覆盖或宽度计算中找到原因。
移动端问题可以结合响应式预览查看不同屏幕宽度下的显示效果，再通过媒体查询调整字号、间距和布局方式。
MySQL 常用查询语句整理
基础查询一般从 SELECT 开始，配合 WHERE 筛选数据，ORDER BY 控制排序，LIMIT 限制返回数量。这些语句适合用来做学习记录表、文章列表和简单后台查询。
学习 SQL 时建议从小表开始练习，先确认字段含义，再逐步增加筛选条件和排序规则，避免一开始就写过于复杂的查询。
使用声明
本网站所有内容仅供个人学习、技术交流和经验参考使用。文章观点仅代表个人学习理解， 不构成任何专业建议或商业承诺。如内容引用公开资料，将尽量注明来源；如有侵权或不当之处， 可联系本人及时处理。
- 本站内容不涉及商业推广、付费课程销售或第三方广告投放。
- 本站不提供用户注册、在线支付、商品交易等经营性功能。
- 本站会持续保持内容健康、合法、积极，遵守互联网相关法律法规。