写网站，网站代码只是搭建代码表象。真正麻烦的网站，是搭建代码那些看不见的细节。 我刚开始学建站时，网站以为把HTML和CSS写完就大功告成了。搭建代码结果一上传到服务器，网站页面全乱了——图片不显示，搭建代码字体变丑，网站链接点不动。搭建代码折腾一晚上才发现，网站路径写错了。搭建代码本地用相对路径没问题，网站服务器上目录结构不一样，搭建代码全得改。网站这种坑，新手基本都会踩一遍。 后来我学聪明了。先规划目录，再写代码。`public_html`下面放`css`、`js`、`images`三个文件夹，页面文件直接扔根目录。这样上传后基本不会出路径问题。你问我为什么不把图片也放根目录？乱。十几个页面，几百张图，全堆一起，后期改版时找文件能找疯掉。 HTML结构这块，我习惯先写语义化标签。`header`、`nav`、`main`、`footer`，一个不多一个不少。搜索引擎喜欢这个，屏幕阅读器也认这个。有些人喜欢全用`div`，加一堆`class`来区分，看着就头疼。代码是给人看的，也是给机器读的，语义化标签让两边都舒服。 CSS这块，我建议用Flexbox和Grid。老一套的浮动布局，清除浮动那几行代码，每次写都觉得自己在跟浏览器打架。Flexbox处理一维布局，一行`display: flex`就能搞定水平垂直居中。Grid处理二维布局，整个页面骨架直接划分区域，不用嵌套一堆`div`去模拟表格效果。 JavaScript别滥用。很多网站一打开，弹窗、轮播、滚动动画全往上堆。用户是想看内容，不是来看马戏团表演。我一般只加必要的交互——导航菜单的响应式切换、表单验证、图片懒加载。其他花里胡哨的，能砍就砍。页面加载时间每多一秒，跳出率就涨一截，这是有数据支撑的。 服务器部署这块，新手容易忽略。我用的是Nginx，配置起来比Apache直观。静态网站直接指向`index.html`，动态的加个`proxy_pass`转到Node或者PHP服务。SSL证书现在都有免费的，Let's Encrypt，装完就完事，不装的话浏览器会警告，用户直接跑了。 还有一个坑，很多人没意识到——移动端适配。电脑上看着漂亮的页面，手机上一打开，字小得看不清，按钮按不准，图片撑破屏幕。我一开始也犯这毛病。后来强制自己写完代码就缩小浏览器窗口看效果，再不行用Chrome的开发者工具切到手机模拟模式。响应式布局用媒体查询，`@media (max-width: 768px)`这种，把导航改成汉堡菜单，字体调大，间距压缩，基本就能应付大多数手机了。 写网站代码这活儿，说简单也简单，说复杂也复杂。简单的是，你只要会几门基础语言就能搭出个能看的页面。复杂的是，真正好用的网站，背后全是细节——图片压缩了没有？缓存设置了没有？404页面做没做？这些不起眼的地方，决定了一个网站是专业还是业余。 我自己现在维护着三个网站，一个个人博客，一个公司官网，一个电商展示页。每个站的代码风格都不一样，但核心原则就一条：让用户最快看到他想看的内容。代码只是手段，内容是目的。别为了炫技写一堆复杂逻辑，简单直接永远是最优解。