打开记事本，静态敲下<h1>我的网页第一个网页</h1>，存成index.html，制作双击——浏览器里跳出一行黑字。代码这就是静态静态网页的全部秘密：服务器把写好的HTML文件原封不动扔给浏览器，浏览器照着标签渲染，网页没有数据库查询，制作没有后台逻辑，代码每次访问都一样。静态

我2008年第一次做网页时，网页用FrontPage拖拽表格，制作生成一堆嵌套<table>标签，代码代码臃肿得像泡了三天的静态方便面。后来才明白，网页静态网页的制作核心就三样东西：HTML管结构，CSS管样式，JavaScript管交互。别被“交互”吓到，静态网页里的JS顶多做个下拉菜单、图片轮播，不碰服务器。

看个具体例子。下面这段代码，你复制到记事本里存成.html文件，就能跑：

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>老张的茶馆</title> <style> body {  font-family: "Microsoft YaHei"; background: #f5f0e8; } .card {  width: 300px; margin: 50px auto; padding: 20px; border: 2px solid #8b5a2b; border-radius: 8px; } h1 {  color: #5c3a1e; font-size: 24px; } p {  line-height: 1.8; color: #333; } </style> </head> <body> <div class="card"> <h1>老张的茶馆</h1> <p>营业时间：上午9点至晚上10点</p> <p>地址：城南老街12号</p> </div> </body> </html>

就这么几行。<style>里的CSS直接写在HTML里，叫内联样式表，适合小页面。页面大了就得拆成独立.css文件，用<link>引入。我见过有人把几百行CSS全塞在<head>里，改个颜色得翻半天——那是跟自己过不去。

静态网页的“静”是相对的。你完全可以用JavaScript操作DOM，让按钮点击后改文字、换图片。比如给上面的卡片加个“切换夜间模式”按钮：

<button onclick="document.body.style.background='#222'; document.body.style.color='#eee'"> 夜间模式 </button>

点一下，背景变黑。这仍然是静态网页——所有逻辑都在浏览器里跑，服务器没参与。区别在于，动态网页（比如PHP、Node.js）会在服务器端拼好HTML再发过来，而静态网页的HTML是提前写死的。

什么时候用静态网页？个人博客、产品介绍页、活动落地页、文档站点。我帮朋友做过一个花店页面，六张图、一段介绍、一个联系方式，纯静态，托管在GitHub Pages上，零成本，访问速度比那些挂满插件的WordPress快得多。反过来，如果页面需要用户登录、评论、搜索，静态网页就吃力了，得配后端或者用第三方服务。

有个细节容易被忽略：字符编码。早年我用GB2312写页面，换台电脑打开全是乱码。现在统一用<meta charset="UTF-8">，省心。还有视口设置<meta name="viewport" content="width=device-width, initial-scale=1.0">，不加这行，手机上打开字小得要用放大镜。

工具方面，别一上来就学Webpack、Vite。记事本够用，VS Code更好，装个Live Server插件，保存自动刷新。我至今保留着手写HTML的习惯，因为能看清每个标签的去向。用框架生成代码当然快，但出了问题，你得知道去哪儿找。

最后说个真实教训。有次我帮人改一个静态页面，打开源码发现全是<div>套<div>，二十层嵌套，类名是a、b、c、d。改一个间距，动了外层，里层全乱。后来重写，用语义化标签<header>、<main>、<footer>，结构清晰，CSS也少了一半。静态网页不难，难的是保持代码干净——这跟页面静不静没关系，跟写代码的人有关系。