打开记事本，静态敲下<h1>我的网页第一个网页</h1>，保存为index.html，源码双击。静态浏览器弹出一个黑字大标题。网页这事我干过不下五十次，源码每次帮朋友建站，静态第一步永远是网页扔一个纯静态页过去。静态网页源码没那么玄乎，源码它就是静态一堆HTML标签、CSS样式和少量JavaScript的网页集合体，浏览器读到什么就渲染什么，源码不经过服务器端计算。静态

很多人以为静态网页等于“简陋”。网页错。源码GitHub Pages上跑的那些文档站、个人博客、产品落地页，全是静态源码。加载速度比WordPress快一个量级，因为不需要查数据库、不执行PHP。我自己的技术笔记站就是纯静态，两千多篇文章，构建完也就几十MB，扔在任何CDN上都是秒开。

看一段真实源码比讲概念管用。下面是我常用的页面骨架：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态页示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <a href="/">首页</a> <a href="/about.html">关于</a> </nav> </header> <main> <article> <h1>文章标题</h1> <p>正文段落。</p> </article> </main> <footer> <p>&copy; 2025 我的站点</p> </footer> </body> </html>

这段代码里没有一行是多余的。<!DOCTYPE html>告诉浏览器用标准模式解析，别掉进怪异模式的坑。viewport那行不加，手机上打开就是缩小版桌面页，手指得放大才能点链接。nav里的链接直接指向.html文件，服务器不需要做任何URL重写。footer里的&copy;是个HTML实体，直接写©也行，但老派开发者习惯用实体，避免编码问题。

CSS可以内联，也可以外链。我倾向外链，因为浏览器会缓存style.css，第二个页面加载时样式表直接从磁盘读，不走网络。有个细节：<link>标签放在<head>里，别扔到<body>末尾。虽然现代浏览器能容错，但样式表晚加载会导致页面闪烁——先看到无样式的HTML，再突然套上CSS，体验很差。

JavaScript在静态页里通常干三件事：交互、数据请求、DOM操作。比如点击按钮切换暗色主题，或者用fetch拉一个JSON文件渲染列表。注意，静态页里的JS仍然运行在浏览器端，它不能直接读写服务器文件。有人问我“静态页能不能提交表单”，能，但得配合第三方服务，比如Formspree，或者自己写个云函数接收。纯静态本身没有后端处理能力。

部署静态源码最简单的方式：把整个文件夹拖进Netlify的网页上传区，三秒后给你一个https域名。或者用Git推送到仓库，开启GitHub Pages。不需要买服务器，不需要配Nginx。我帮一个花店老板做过展示页，总共四个HTML文件、一个CSS、三张图片，托管在Cloudflare Pages上，每月访问量两千左右，零成本。

静态页的局限也明显。用户登录、评论、搜索这些功能，纯静态做不了，得接API或改用服务端渲染。但反过来想，一个产品介绍页、一份简历、一篇技术文档，要什么登录？静态源码就是最合适的工具。别为了技术而技术。

最后说个观察：新手学HTML，最容易犯的错是标签不闭合。<div>开了不关，浏览器会猜你的意图，猜错就布局乱套。用VS Code写，装个HTMLHint插件，保存时自动标红未闭合标签。这比看十篇教程都管用。