html静态网页模板源码

静态页面模板的核心价值，不在“静态”二字，网页而在“可复用”。模板你写好一个结构清晰、源码命名规范的静态模板，等于给自己备好了一套乐高积木——下次做活动页、网页落地页、模板甚至个人作品集，源码直接抽几块拼上就行。静态

我见过不少程序员，网页写静态页喜欢从零敲。模板真的源码没必要。一个标准的静态HTML骨架，加上合理的网页CSS reset和几个常用类，能省掉你至少半小时的模板重复劳动。下面这份模板，是我自己长期在用的基础版，改一改就能适配大多数场景。

先看HTML骨架

 <!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>导航区</nav> </header> <main> <section class="hero">主视觉区</section> <section class="content">内容区</section> </main> <footer> <p>版权信息</p> </footer> <script src="script.js"></script> </body> </html> 

注意几个细节。lang="zh-CN"告诉浏览器这是中文页面，对SEO和屏幕阅读器都友好。meta viewport是移动端适配的命根子，漏了它，手机上看页面字体小得跟蚂蚁似的。header、main、footer这仨语义化标签，比满屏的div更容易让人看懂结构。

CSS部分别偷懒

很多人喜欢用UI框架，但静态页有时真没必要引那几十KB的库。一份轻量的reset就够了：

 * {  margin: 0; padding: 0; box-sizing: border-box; } body {  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #333; background: #fff; } img {  max-width: 100%; height: auto; display: block; } a {  text-decoration: none; color: inherit; } 

这套reset干掉了浏览器默认的间距，让图片自适应容器，链接也去掉下划线。你可能会问，text-decoration: none会不会影响可访问性？我的处理方式是在具体组件里给有下划线的场景单独加——比如文章正文里的链接，我通常会重新加上下划线并用颜色区分。模板是起点，不是终点。

布局类怎么定

静态页最常见的布局需求就两种：居中定宽和两栏。我习惯这么写：

 .container {  max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .two-col {  display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; } @media (max-width: 768px) {  .two-col {  grid-template-columns: 1fr; } } 

max-width加margin: auto是经典的居中方案，比用flex+justify-content更省事。两栏用grid，比例灵活，切到手机端时用媒体查询改成单列。这套东西我用了三年，没出过岔子。

别忘了交互预留位

静态模板不等于没有交互。我通常会在底部预留一个脚本占位符，包括jQuery的CDN链接（如果需要的话）、自定义脚本文件入口。有时候还会放一个返回顶部的按钮样式——这种细节在项目里经常被临时加上，不如模板里就备好。

 <button id="backToTop" style="display:none;">↑</button> <script> // 简单返回顶部逻辑 const btn = document.getElementById('backToTop'); window.addEventListener('scroll', () => {  btn.style.display = window.scrollY > 300 ? 'block' : 'none'; }); btn.addEventListener('click', () => {  window.scrollTo({  top: 0, behavior: 'smooth' }); }); </script> 

这段代码很粗糙，但管用。你完全可以换成自己的逻辑，关键是模板里要有这个“坑位”。

文件组织方式

模板不是单个文件的事。我习惯把CSS和JS分开，哪怕项目再小。目录结构长这样：

• index.html — 主页面
• css/style.css — 重置样式+通用类
• js/main.js — 页面交互逻辑

有人可能觉得只有一个页面，何必拆目录。但你想想，静态模板的用处就是给后续项目打底。今天你写个单页，明天客户说“我想加个关于页、产品页”，你直接复制index.html改内容就行，CSS和JS完全不用动。这不叫麻烦，这叫省力。

最后说一句实在话——网上那些“完整功能”的模板，动辄几百行CSS、几十个class，看着花哨，真到要改的时候你连选择器都找不准。自己攥一个干净的基础模板，比什么都靠谱。你只管往里填东西，剩下的框架不会拖你后腿。

(责任编辑：休闲)