★ FEATURED ARTICLE 简介这份个人博客网页设计HTML源码面向希望快速搭建个人站点的初学者与前端入门者提供一套结构完整的静态博客主题可用于展示作品、记录想法或分享日常生活。压缩包共30个文件以27个gif装饰图、1张jpg头像、1个html页面和1个css样式表为主整体仅37KB轻量易读。其中index.html定义页面头部、导航、文章与页脚等主体结构style.css通过类选择器、ID选择器控制字体、颜色、间距与盒模型布局images目录中的图片资源承担背景、分隔线与图标等视觉装饰。已有3820人学习下载适合作为HTML与CSS基础知识的实践样本。读者可借此理解标签语义、样式层叠与页面组织方式并在此基础上替换图片与配色快速改造成符合个人风格的博客页面是入门网页设计的一份实用参考。1. 个人博客网页设计html源码从一份静态骨架到能上线的站点很多人搜「个人博客网页设计html源码」脑子里想的是下载一个压缩包解压双击index.html浏览器里出现一个漂亮的博客首页然后改改文字就能上线。我一开始也这么想直到帮朋友改一个所谓「开箱即用」的博客模板时发现它连meta nameviewport都没写手机上打开字小得像蚂蚁导航栏直接叠在一起。那一刻我才意识到源码本身不是终点能不能读懂它的结构、知道每个标签为什么这么写、改完之后怎么验证才是真正决定这个博客能不能长期用的东西。这篇笔记面向两类人一类是刚学完 htmlcssjs 基础语法想拿一个真实博客项目练手的新手另一类是做过后端或别的语言但前端只停留在「能看懂」层面想快速搭一个自己博客站点的熟手。我会把一份典型的个人博客静态源码拆开讲清楚它的目录怎么组织、首页骨架怎么搭、样式和脚本怎么挂、改完怎么在本地跑起来验证以及那些模板作者不会告诉你的坑。全程不依赖任何框架纯 html、css、js你有一台装了浏览器的电脑就能跟着做。2. 拆开一份个人博客 html 源码目录、骨架与最小可运行结构2.1 一份能用的博客源码目录长什么样网上流传的个人博客 html 源码质量参差不齐。有的只有一个孤零零的index.htmlcss 和 js 全内联在里面改一处颜色要翻几百行有的则分得很细但目录层级深到你自己都记不住。我一般会按下面这个结构来组织既不会太散也不会全挤在一个文件里my-blog/ ├── index.html # 首页 ├── about.html # 关于页 ├── archive.html # 归档页 ├── post/ # 文章详情页 │ ├── post-001.html │ └── post-002.html ├── css/ │ ├── reset.css # 基础重置 │ ├── main.css # 主样式 │ └── responsive.css # 响应式断点 ├── js/ │ ├── main.js # 交互逻辑 │ └── back-to-top.js # 返回顶部 ├── images/ │ ├── avatar.jpg │ └── cover/ └── favicon.ico这个结构的好处是首页、列表页、详情页各司其职样式按职责拆成三个文件重置样式单独放避免不同浏览器默认样式打架。post/目录下每篇文章一个 html 文件虽然文章多了会显得笨重但对于纯静态博客来说这是最直观、最不容易出错的方式。如果你以后想换成用静态站点生成器批量产出这个目录结构也能平滑迁移。提示不要把所有 css 写进一个文件再在 html 里用style内联。内联样式在文章页复用时会变成灾难改一个字体要动十几个文件。2.2 首页 html 骨架从 doctype 到首屏渲染一份个人博客首页的 html 骨架核心就三块文档声明与头部元信息、页面结构容器、脚本挂载点。下面是我常用的最小可运行版本你可以直接抄进index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录技术与生活 title我的博客 | 首页/title link relicon hreffavicon.ico typeimage/x-icon link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/main.css link relstylesheet hrefcss/responsive.css /head body header classsite-header nav classnav-bar a hrefindex.html classlogoMyBlog/a ul classnav-list lia hrefindex.html首页/a/li lia hrefarchive.html归档/a/li lia hrefabout.html关于/a/li /ul /nav /header main classsite-main section classpost-list article classpost-item h2a hrefpost/post-001.html第一篇文章标题/a/h2 p classpost-meta2025-01-01 · 技术/p p classpost-excerpt这里是文章摘要控制在两到三行。/p /article /section /main footer classsite-footer pcopy; 2025 MyBlog. All rights reserved./p /footer button idbackToTop classback-to-top aria-label返回顶部↑/button script srcjs/main.js/script script srcjs/back-to-top.js/script /body /html这段骨架里meta nameviewport是移动端适配的命门没有它后面写再多媒体查询都是白费。langzh-CN影响浏览器对中文的字体渲染和断行策略别写成en。样式表按 reset、main、responsive 的顺序引入保证重置在前、主样式居中、响应式覆盖在后。脚本放在/body前避免阻塞首屏渲染。main、article、header、footer这些语义化标签不是摆设它们让屏幕阅读器和搜索引擎能理解页面结构。aria-label加在返回顶部按钮上是为了让辅助技术知道这个按钮干什么。这些细节在模板里经常被省略但你如果打算长期维护这个博客一开始就写对比后面回头补要省事得多。2.3 样式与脚本的挂载顺序为什么不能乱css 和 js 的加载顺序直接决定页面会不会闪、会不会卡。我见过有人把main.css放在reset.css前面结果重置样式把主样式里的边距全干掉了页面看起来「莫名其妙变丑」。也见过把main.js放在head里且没加defer导致脚本执行时 DOM 还没解析完document.querySelector返回 null控制台报错交互全挂。正确的做法是css 全部放head按「重置 → 基础 → 布局 → 组件 → 响应式」的顺序js 放/body前或者放head但加defer。如果你用的是自己写的返回顶部脚本它依赖 DOM 里的按钮元素那就必须等 DOM 就绪。下面这种写法是稳妥的// js/back-to-top.js document.addEventListener(DOMContentLoaded, function () { var btn document.getElementById(backToTop); if (!btn) return; window.addEventListener(scroll, function () { // 滚动超过 300px 才显示按钮 if (window.scrollY 300) { btn.classList.add(show); } else { btn.classList.remove(show); } }); btn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); }); });DOMContentLoaded保证 DOM 解析完成后再绑定事件window.scrollY 300是显示阈值你可以按自己页面高度调整。behavior: smooth让返回顶部有平滑滚动效果不支持这个参数的旧浏览器会直接跳回顶部不影响功能。这个脚本很短但它体现了一个原则交互逻辑要等页面结构就绪且要对元素不存在的情况做防御。3. 把源码改成你自己的博客导航、文章列表与返回顶部的落地步骤3.1 导航栏与页面路由的静态实现个人博客的导航栏本质就是一组a标签指向不同的 html 文件。但这里有个容易被忽略的点当前页面的导航项要有「选中」状态否则用户不知道自己在哪。纯静态页面没有路由概念你得在每个页面手动给对应的li加一个active类或者用 js 根据当前 url 自动判断。我一般用 js 自动判断省得每加一个页面就改一次导航// js/main.js document.addEventListener(DOMContentLoaded, function () { var path window.location.pathname.split(/).pop() || index.html; var links document.querySelectorAll(.nav-list a); links.forEach(function (link) { var href link.getAttribute(href); if (href path) { link.classList.add(active); } }); });window.location.pathname拿到当前路径split(/).pop()取最后一段文件名如果为空则默认index.html。然后遍历导航链接匹配 href 就加active类。这样你只需要在 css 里定义.nav-list a.active的样式比如加下划线或改变颜色导航状态就自动生效了。注意如果你的博客部署在子目录下比如https://example.com/blog/pathname会包含/blog/上面的split(/).pop()依然能取到文件名但如果你用的是绝对路径 href匹配逻辑要相应调整。常见做法是统一用相对路径或者用link.pathname和window.location.pathname直接比较。3.2 文章列表的 html 结构与批量维护思路文章列表是博客首页的核心。纯静态博客没有数据库每加一篇文章你就要在index.html里手动加一个article块。文章少的时候没问题写到三五十篇手动维护就开始痛苦了。我的做法是首页只放最近 5 到 10 篇归档页放全部并且用一个简单的 js 数组来管理文章元数据动态渲染列表。先定义一个posts.js// js/posts.js var POSTS [ { title: 第一篇文章标题, url: post/post-001.html, date: 2025-01-01, category: 技术, excerpt: 这里是文章摘要控制在两到三行。 }, { title: 第二篇文章标题, url: post/post-002.html, date: 2025-01-05, category: 生活, excerpt: 另一段摘要文字。 } ];然后在首页用 js 渲染// js/render-list.js document.addEventListener(DOMContentLoaded, function () { var container document.querySelector(.post-list); if (!container || typeof POSTS undefined) return; var html ; POSTS.slice(0, 10).forEach(function (post) { html article classpost-item; html h2a href post.url post.title /a/h2; html p classpost-meta post.date · post.category /p; html p classpost-excerpt post.excerpt /p; html /article; }); container.innerHTML html; });POSTS.slice(0, 10)控制首页只显示最近 10 篇归档页可以改成POSTS.forEach显示全部。这样你新增文章时只需要在posts.js里加一条记录再创建对应的 html 文件首页和归档页会自动更新。代价是列表依赖 js 渲染如果用户禁用 js 就看不到文章列表。对于个人博客来说这个取舍可以接受如果你在意无 js 环境那就保留静态 html 列表用构建脚本生成。注意用innerHTML拼接字符串时如果文章标题或摘要里包含用户输入的内容会有 XSS 风险。个人博客内容都是你自己写的风险可控但养成转义的习惯没坏处。3.3 返回顶部与阅读进度两个提升体验的小交互返回顶部按钮前面已经写了基础版这里补一个阅读进度条两者经常一起用。阅读进度条的原理很简单监听滚动事件计算「已滚动距离 / 可滚动总距离」把结果映射成百分比更新进度条宽度。// js/reading-progress.js document.addEventListener(DOMContentLoaded, function () { var bar document.getElementById(readingBar); if (!bar) return; window.addEventListener(scroll, function () { var scrollTop window.scrollY; var docHeight document.documentElement.scrollHeight - window.innerHeight; var progress docHeight 0 ? (scrollTop / docHeight) * 100 : 0; bar.style.width progress %; }); });对应的 html 只需要在body顶部加一个div idreadingBar classreading-bar/divcss 里设置position: fixed; top: 0; left: 0; height: 3px; background: #007bff; width: 0; z-index: 999;。docHeight为 0 时说明页面没有滚动空间直接给 0 避免除零。这个进度条在文章详情页特别有用读者能直观看到还剩多少内容。返回顶部按钮的显示阈值和进度条可以共用同一个滚动监听减少事件绑定次数。如果你追求性能可以用requestAnimationFrame节流但对于个人博客的访问量来说直接监听scroll完全够用不必过度优化。4. 个人博客 html 源码避坑样式错乱、路径失效与移动端翻车4.1 样式错乱reset 没写对不同浏览器各显示各的现象本地 Chrome 打开正常发给朋友用 Safari 或 Edge 打开标题字体、列表缩进、按钮圆角全变了。原因不同浏览器对h1到h6的默认 margin、ul的 padding、button的字体继承规则不一致。没有 reset 或 reset 不完整时这些差异会直接暴露出来。解决在reset.css里至少覆盖以下几项* { margin: 0; padding: 0; box-sizing: border-box; }body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }ul, ol { list-style: none; }a { text-decoration: none; color: inherit; }button { font: inherit; border: none; background: none; cursor: pointer; }。box-sizing: border-box让 padding 和 border 算进元素宽度布局计算会直观很多。4.2 路径失效相对路径和绝对路径混用导致图片 404现象首页图片正常显示点进文章详情页头像和封面图全裂了。原因首页在根目录图片路径写的是images/avatar.jpg文章页在post/目录下同样的相对路径会变成post/images/avatar.jpg文件不存在。解决统一路径策略。要么全部用相对于站点根目录的绝对路径以/开头如/images/avatar.jpg要么在文章页里用../images/avatar.jpg。我一般推荐前者但前提是你的博客部署在域名根目录下。如果部署在子目录比如/blog/那就要写成/blog/images/avatar.jpg或者继续用相对路径但严格计算层级。最稳妥的办法是本地起一个静态服务器测试而不是直接双击 html 文件。4.3 移动端翻车viewport 写了但媒体查询断点没对齐现象手机上打开页面确实缩放了但导航栏挤成两行文章标题溢出屏幕。原因meta nameviewport只解决了缩放问题布局本身还是桌面端的固定宽度。媒体查询的断点和实际设备宽度不匹配或者根本没写媒体查询。解决在responsive.css里至少写两个断点media (max-width: 768px)和media (max-width: 480px)。768px 以下把导航栏改成纵向排列文章列表内边距缩小480px 以下进一步缩小字体和图片。测试时用浏览器开发者工具的设备模拟不要只靠拖动窗口大小因为窗口宽度和真实设备宽度不是一回事。4.4 脚本报错DOM 未就绪就执行查询现象控制台报Cannot read property addEventListener of null返回顶部按钮不工作。原因脚本放在head里且没有defer或者虽然放在底部但用了async导致执行时目标元素还没被解析。解决脚本放/body前或者加defer。如果脚本必须放头部用DOMContentLoaded包一层。另外查询元素后先判断是否为 null 再绑定事件避免因为某个页面没有该元素而整个脚本挂掉。4.5 缓存问题改了 css 但浏览器还是旧样式现象明明改了main.css刷新页面样式没变强制刷新才生效。原因浏览器缓存了旧的 css 文件link的 href 没变浏览器不会重新请求。解决开发阶段在开发者工具里勾选「Disable cache」或者用无痕窗口。上线时给 css 和 js 文件名加版本号或哈希比如main.css?v2每次更新改一下版本号。纯静态博客没有构建工具的话手动改版本号是最简单的办法。5. 从静态源码到可维护博客验证清单与一个长期习惯5.1 上线前的本地验证清单在把博客推到服务器之前我一般会过一遍下面这张表。它不复杂但能挡住大部分低级问题检查项验证方式通过标准移动端适配开发者工具切到 iPhone SE 宽度无横向滚动条导航不重叠路径正确性本地起python -m http.server逐页点击所有链接和图片可访问控制台无报错打开开发者工具 Console无红色错误样式一致性Chrome、Firefox、Edge 各开一次布局无明显差异返回顶部滚动超过 300px 后点击平滑回到顶部阅读进度条文章页滚动到底部进度条从 0% 到 100%本地起服务器这一步很多人跳过直接双击 html 文件。但file://协议下某些 js 行为比如 fetch 请求、部分路径解析和http://不一致容易掩盖问题。一行命令就能起服务# 在博客根目录执行 python -m http.server 8000 # 然后浏览器访问 http://localhost:8000如果你装了 Node.js也可以用npx serve。这一步花不了两分钟但能让你提前发现路径和跨域相关的问题。5.2 一个让我少改很多次的习惯我早期做博客喜欢直接在index.html里改内容改完就上传从来不留备份。结果有一次误删了一个div页面布局全乱又没有版本记录只能凭记忆重写。后来我养成了一个习惯不管多小的改动先在本地用 Git 提交一次再上传。哪怕只有一个人维护git log也能让你在翻车时找到「后悔药」。另一个习惯是每加一个新功能先在单独的测试页面验证确认没问题再合并到主页面。比如返回顶部脚本我会先建一个test.html只放按钮和脚本跑通了再复制到所有页面。这样即使脚本有问题也不会影响已经上线的博客。这两个习惯听起来很基础但坚持下来你会发现博客的维护成本直线下降。静态博客没有后端出问题的地方无非就是 html 结构、css 样式、js 交互和路径把这四样管住它就能稳定跑很多年。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
