html静态网页成品

去年帮一个开咖啡馆的静态朋友做官网，他要得急，网页预算也低。成品我打开编辑器，静态两小时交了活儿——纯HTML加CSS，网页没有后台，成品没有数据库，静态连JavaScript都只用了十几行做导航栏的网页交互。他把文件往虚拟主机一扔，成品域名解析过去，静态当天就上线了。网页到现在快一年，成品页面没崩过，静态加载速度比隔壁用WordPress搭的网页还快。这就是成品静态网页。

很多人一听“静态”就觉得简陋。其实静态网页跟丑不丑、功能多不多没有必然关系。它指的是服务器不做额外处理，浏览器请求什么文件就返回什么文件。没有模板渲染，没有数据库查询，没有服务端逻辑。一个.html文件，配上.css和.js，就是全部家当。

我手头有个更典型的例子。上个月给一个摄影师做作品集站点，一共六个页面：首页、人像、风光、商业、关于、联系。每个页面就是一个独立的HTML文件，图片全部压缩成WebP格式，CSS写在一个style.css里。整个站点的体积不到2MB。他用的是GitHub Pages托管，免费，而且全球CDN加速。国内访问稍微慢一点，但打开速度也在可接受范围内。

做静态网页有个好处：你不需要懂后端。不需要配置Nginx或者Apache的伪静态规则，不需要操心数据库连接池，不需要担心SQL注入。文件传上去，路径对了，就能跑。出了问题也好排查——打开浏览器开发者工具，Network面板一看，哪个文件404了，哪个CSS没加载，一目了然。

当然，静态网页不是万能的。你要做用户登录、评论、搜索、购物车，纯静态搞不定。但话说回来，很多项目根本不需要这些。一个企业展示站，五个页面，一年更新不了两次内容，用静态网页绰绰有余。非得上个CMS，反而增加了维护成本和被攻击的风险。

我自己的技术博客就是静态的。用Jekyll生成，托管在Netlify上。写文章就是新建一个Markdown文件，git push之后自动构建部署。没有后台登录入口，没有插件更新提醒，没有“您的数据库需要修复”的弹窗。省心。

如果你打算做一个静态网页成品，有几件事值得注意。图片一定要压缩，现在WebP兼容性已经很好了，比JPEG小30%左右。CSS尽量内联首屏关键样式，剩下的异步加载。字体文件如果用了自定义字体，记得设置font-display: swap，不然文字会闪一下才显示。还有，viewport那个meta标签别忘了写，不然手机上打开会缩放得乱七八糟。

HTML本身没什么难的。标签就那些，语义化写清楚，结构别嵌套太深。难的是把内容组织好、把视觉做舒服。静态网页只是载体，用户不在乎你用的是Node.js还是纯HTML，他们只在乎打开快不快、看着顺不顺眼、信息找不找得到。

所以别被“静态”两个字骗了。它不低级，也不落后。它只是简单。而简单，在很多时候，恰恰是最合适的选择。