个人编程学习测试记录

HTML是网页的骨架，负责结构与内容。

常用标签：html、head、body、div、p、h1~h6、a、img、ul、li、button等。

语义化标签：header、footer、section、article，让结构更清晰。

学习心得：先搭结构，再写样式，最后加交互。

CSS负责网页外观，包括颜色、字体、布局、间距等。

基础选择器：标签选择器、类选择器、ID选择器。

盒模型：content、padding、border、margin。

学习心得：样式要分层写，避免冲突，保持整洁。

JS是网页的交互语言，实现动态效果与逻辑。

变量：let、const、var。

数据类型：字符串、数字、布尔、数组、对象、null、undefined。

学习心得：先理解类型，再写逻辑，避免隐式转换问题。

函数是可复用的代码块，用于封装功能。

函数声明、函数表达式、箭头函数。

作用域：全局作用域、函数作用域、块级作用域。

学习心得：函数要单一职责，一个函数只做一件事。

DOM是网页元素对象模型，可通过JS操作页面。

获取元素：querySelector、getElementById。

修改内容：innerHTML、textContent。

事件：click、input、submit、mouseover等。

学习心得：操作DOM尽量减少重复查询，提升性能。

Flex是现代布局神器，轻松实现居中与排列。

容器属性：display:flex、justify-content、align-items、flex-wrap。

项目属性：flex、align-self、order。

学习心得：大部分布局用Flex就能完成，简单高效。

localStorage可以把数据存在浏览器中，持久化保存。

常用方法：setItem、getItem、removeItem、clear。

只能存字符串，对象需要JSON.stringify和JSON.parse。

学习心得：适合保存用户配置、简单记录、轻量数据。

响应式让网页在手机、平板、电脑都能正常显示。

使用meta viewport确保移动端适配。

媒体查询：@media (max-width:768px) {...}

学习心得：优先移动端布局，再逐步扩展大屏样式。

表单验证用于检查用户输入是否合法。

验证内容：非空、长度、邮箱格式、手机号格式。

实时提示：输入错误时给出红色提示文字。

学习心得：前端验证是体验，后端验证才是安全。

通过这段时间学习，完成了个人编程学习博客。

用到的技术：HTML结构 + CSS样式 + JS交互 + Flex布局 + 响应式。

实现功能：文章列表、文章详情、返回、页面切换。

后续计划：学习框架、接口请求、更复杂的项目实战。

坚持记录，持续进步，成为更好的自己。