今天想聊聊新建网页这事，一开始我也没想那么多，就觉得做个页面能有多难？结果上手才发现，坑是一个接一个。

从零开始的想法

最开始我就是脑子一热，想着做个简单的个人介绍页。打开编辑器，新建个html文件，随手写了几行代码。标题、段落、加粗，感觉挺像那么回事的。

但问题很快就来了。我兴冲冲地在本地浏览器打开，排版看着还行，可一换到手机上看，字小得跟蚂蚁似的，图片也挤成一团。这时候我才意识到，得先考虑响应式布局。

布局上的跟头

我寻思着用百分比布局应该就行了？结果宽度设成百分比，高度却不好控制。图片更是麻烦，不同屏幕下拉伸得奇形怪状。后来硬着头皮去查，才知道得用viewport单位，还要配合flex或者grid。

中间试过直接复制别人的代码，但放自己这压根不生效。折腾半天才发现，是没引对样式文件路径。这种低级错误真是让人哭笑不得。

样式里的暗坑

写到一半发现，不同浏览器显示效果居然不一样！chrome上好好的按钮，到firefox里就错位了。只能老老实实加各种浏览器前缀，什么-webkit-、-moz-，跟报菜名似的。

• 字体没统一，默认字号参差不齐
• 颜色值一会儿用hex一会儿用rgb，自己都搞混
• 边距叠加起来总比想象中大

最坑的是有次改了个小样式，结果整个页面布局全乱套了。原来是因为不小心动了盒模型，padding和border算进去之后宽度超了。

交互功能的陷阱

本来想加个简单的点击效果，写了个onclick函数。结果发现手机上点了根本没反应，还得额外写touch事件。表单提交更是个大坑，第一次没阻止默认事件，页面直接刷新，数据全没了。

后来学乖了，每写个功能就先在手机和电脑上都试一遍。慢慢才发现，很多以为理所当然的效果，都要特意处理才行。

的醒悟

现在回头看，新建网页真不能想得先规划好结构，再一步步实现。特别是要提前考虑不同设备和浏览器的兼容问题。

最重要的一点是：别急着写代码，先拿张纸把布局画出来，比盲目动手强多了。

这些经验都是实打实踩坑踩出来的。希望你们做新页面时，能少走点我走过的弯路。