内容摘要：web前端实训总结800字 实训第一周，我写的第一个页面在浏览器里崩了。导航栏叠到了轮播图上，文字挤成一团。检查代码，发现是盒模型没算清楚——给容器定了300px宽，又加了20px内边距和2px边框，

web前端实训总结800字

实训第一周，端实我写的训总第一个页面在浏览器里崩了。导航栏叠到了轮播图上，结字文字挤成一团。端实检查代码，训总发现是结字盒模型没算清楚——给容器定了300px宽，又加了20px内边距和2px边框，端实实际占位344px，训总父元素根本装不下。结字这事让我明白，端实前端不是训总写个大概就行，像素级的结字计算差一点都不行。后来养成了习惯：写CSS先想清楚宽高怎么分配，端实用box-sizing:border-box之后才顺手起来。训总

HTML这块，结字以前觉得标签嘛，能用就行。实训里做表单页面时，老师要求每个input都要有对应的label，说这是无障碍访问的基本要求。我当时不太理解，直到用键盘Tab键走了一遍自己做的表单，发现没有label关联的输入框，屏幕阅读器根本读不出这是干什么的。后来查了MDN上的文档，才知道语义化不只是给搜索引擎看的，更是给真实用户用的。之后写页面，header、nav、main、aside、footer这些标签不再随便用div代替了。

CSS布局是花时间最多的部分。Flexbox刚上手时，justify-content和align-items老是搞混，主轴交叉轴的概念在脑子里转不过来。做了几个卡片列表和导航栏之后，慢慢有了肌肉记忆。有次做一个左右分栏、右边内容自适应的布局，用float写了半天，清除浮动清出一堆问题。换成flex之后，父元素display:flex，左边固定宽度，右边flex:1，三行代码搞定。不是说float没用，但确实感受到了新布局方案带来的效率提升。Grid也试了一下，做二维布局比flex更直接，只是兼容性方面还需要注意。

JavaScript是让我最头疼也最有收获的部分。DOM操作一开始只会getElementById和innerHTML，写出来的代码又长又乱。做待办事项列表那个练习时，我用了十几个变量来跟踪状态，增删改查的逻辑搅在一起，改一个功能就崩另一个。后来看了老师给的示例代码，他把数据存在数组里，每次操作先改数组，再统一渲染页面。这个思路一下子把复杂度降下来了。虽然还没学到框架，但已经隐约理解了“数据驱动视图”是什么意思。

调试技能也是实训里练出来的。以前遇到问题就到处console.log，现在会先用浏览器开发者工具看Elements面板的盒模型，看Console的报错信息，在Sources里打断点单步执行。有次一个点击事件不生效，查了半天发现是另一个透明元素盖在上面，z-index的问题。这种问题光看代码看不出来，必须在浏览器里检查才能发现。

团队协作方面，我们小组四个人用Git管理代码，第一次合并分支时冲突了一大片。原因是我和另一个同学同时改了同一个CSS文件的不同部分，Git不知道怎么自动合并。后来约定好每人负责独立的模块，提交前先pull，冲突少了很多。代码规范也是，刚开始各写各的，变量命名有人用驼峰有人用下划线，合并之后看着特别乱。统一了风格之后，读别人的代码顺畅多了。

实训结束那天，我把自己做的页面部署到了GitHub Pages上，虽然只是个简单的个人主页，但看到URL能打开的那一刻还是挺高兴的。前端这条路要学的东西太多了，框架、工程化、性能优化，每个方向都够钻很久。不过至少现在我知道了一个页面从代码到浏览器渲染大概经历了什么，遇到问题也知道该往哪个方向查。这比背了多少API更有用。