简介这是一套面向个人博客搭建的HTML源码主题包适合希望快速拥有个人展示页面的博主也适合前端初学者用于学习网页结构与样式设计。压缩包内共30个文件核心包括1个index.html页面骨架、1个style.css样式表以及27个gif和1个jpg图像素材整体仅37KB轻量易部署。index.html通过header、nav、article、aside等标签组织博客头部、导航、文章区和侧边栏style.css则利用类选择器与盒模型控制字体、间距和整体布局图像素材可用于背景、头像和分割线等装饰。这套源码虽未包含JavaScript文件但页面结构完整便于初学者对照练习HTML与CSS基础语法也可作为个人博客快速起步的底版。该资源已有3814人学习下载适合用于理解静态网页开发流程与基本设计规范。1. 个人博客网页设计html源码先想清楚纯静态方案适不适合你搜“个人博客网页设计html源码”这个关键词的人大多带着一个具体诉求想快速有一套能看的博客页面改改文字就能用。这里面有两类人最常见——一类是课程作业需要交付完整网页的学生另一类是刚写了十几篇文章、想摆脱大平台又不想碰服务器和数据库的博主。先说结论纯 HTML 源码确实能让你在半小时内拥有一个像样的博客但它不是“一个页面搞定”的东西。文章超过二十篇之后没有模板管理的纯静态博客会让你改主题改到想摔键盘。靠谱的 HTML 博客源码应该是一套文件集合列表页、文章页、关于页、样式表、少量 JavaScript 和图片资源各司其职。这篇就按“能落地”的标准来拆——怎么选源码、怎么改、参数怎么调、有哪些坑。2. 一套能落地的个人博客网页设计源码先看目录结构和文件分工拿到一套个人博客网页设计 html 源码第一步不是双击 index.html 看效果而是先打开文件夹看目录。设计得好的源码三层以内你就能找到“样式”“页面”“资源”分别在哪设计得差的源码把所有 HTML 堆在一个 index.html 里CSS 全写在style标签里图也散落各处。后者不是源码是网页设计作业。想长期用必须选前者。2.1 根目录文件清单哪些文件是必需的哪些可以删一套能长期维护的静态博客源码根目录的常见结构是下面这样/ ├── index.html # 首页文章列表 ├── post.html # 文章页模板 ├── about.html # 关于页 ├── archives.html # 归档页可选 ├── css/ │ └── style.css # 全站唯一样式表 ├── js/ │ └── main.js # 导航高亮、返回顶部、菜单开关 ├── assets/ │ ├── images/ # 文章配图、头像 │ └── fonts/ # 自托管字体可选 ├── favicon.ico # 浏览器标签页图标 ├── sitemap.xml # 站点地图可选但建议有 └── robots.txt # 搜索引擎爬虫规则这里每个文件都有明确职责。css/style.css是全站样式唯一入口意味着你想改主题色、字体、间距只需要动一个文件不需要打开三十个 HTML 逐个改。js/main.js放的是交互增强比如移动端菜单展开、文章目录高亮没有它页面也能读它是加分项。assets/images/统一放图片文章里引用图片路径写成assets/images/xxx.jpg后面部署到服务器或托管平台不会因为路径散落而集体裂图。需要留意的是favicon.ico。很多人忽略它结果浏览器标签页一直显示一个空白页图标控制台还报 404。这个文件最好放在根目录浏览器会自动请求不需要在 HTML 里写任何标签也能生效。如果你拿到手的源码里 favicon 放在assets/下要么在 HTML 里写link relicon hrefassets/favicon.ico要么直接把它挪到根目录。2.2 一个规范的 HTML5 骨架应该长什么样好的博客源码每个页面的head部分都应该是完整且规范的。下面这段是个人博客页面的最小骨架也是我改造任何源码时第一步先核对的地方!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录前端学习、代码踩坑和项目实践 meta nameauthor content你的名字 title你的博客名 - 首页/title link relstylesheet hrefcss/style.css link relicon hreffavicon.ico typeimage/x-icon /head body /body /html这段代码里每个标签都有具体意义。html langzh-CN告诉浏览器和搜索引擎这个页面是简体中文影响屏幕阅读器的发音和搜索结果的语言归类新手最容易漏。meta charsetUTF-8必须放在head的第一行如果放在title后面某些浏览器在解析 title 中的中文时已经按默认编码读了一遍就会出现乱码。viewport是移动端适配的前提没有这一行手机浏览器会按桌面宽度渲染然后缩小字小到看不清。description是搜索引擎在结果页展示的摘要写 80 到 120 字说明站点定位即可不用堆关键词。这里还要提一个常见误用有人把description当成关键词列表写“html 博客 源码 网页设计 模板”搜索引擎看到这种内容不但不加分还可能判定为低质量页面。描述是给用户看的不是给爬虫看的一句“记录前端学习和项目实践的独立博客”比五个词堆一起有效得多。2.3 文章页为什么要单独做成模板而不是复制首页改一改很多新手拿到简单博客源码后第一篇、第二篇文章是复制 index.html 然后改标题和正文。这个做法在前十篇的时候感觉还行等写到第二十篇想统一改一次页脚版权信息就得打开二十个 HTML 文件逐个改。更麻烦的是样式调整——如果每篇文章的 CSS 都内联在style标签里改一次主题等于把全部文章重新编辑一遍。正确的做法是post.html只保留页面骨架和文章正文结构不给它单独写样式。它引用的style.css和其他页面是同一个文件正文部分用article标签包起来里面的h1、p、pre、blockquote样式全部在样式表里统一控制。这样新增一篇文章时只需要复制 post.html 这个模板替换正文内容改一下title文件放到posts/目录下完事。样式变了所有页面跟着变。判断一份源码值不值得用就看他有没有独立的文章页模板。如果整个源码只有一个 index.html那它不是博客源码是网页设计作业后续维护成本会很高。3. 把一份个人博客源码改成自己的页头、列表卡片、文章页三处必改拿到源码确认目录结构没问题后接下来就是动手改造。大多数人拿到 HTML 源码第一件事是改字但我建议先改结构页头导航、首页列表卡片、文章页模板这三处是博客的门面也是最容易改出问题的位置。下面按顺序讲代码可以直接照着替换。3.1 改页头站名、导航链接和当前页高亮页头是整个博客所有页面的公共部分需要写在每个 HTML 文件里但只在 style.css 里定义一次样式。一个干净可用的页头结构是这样header classsite-header div classcontainer header-inner a classlogo hrefindex.html阿北的博客/a nav classmain-nav aria-label主导航 a hrefindex.html classnav-link active首页/a a hrefarchives.html classnav-link归档/a a hrefabout.html classnav-link关于/a /nav /div /header这里有几个关键点。logo链接指向index.html点击站名回首页这是用户习惯别改成指向别的页面。导航里的active类表示当前页在首页的 HTML 里首页这个链接带active在 about.html 里则是关于带active。手动维护这个类名有点笨但胜在零依赖、不影响 SEO不会因为 JavaScript 没加载就整站导航高亮失效。我是怎么判断要不要用 JavaScript 自动高亮的如果导航只有三四个链接手动改成本很低不值得上脚本如果导航超过六个且将来会频繁增删栏目就值得在main.js里写一段基于location.pathname自动匹配的逻辑。还有一种情况要注意源码里导航是用ulli写的改成nav里直接放a更简洁也更容易写样式。对应的 CSS 片段我习惯这样控制布局.header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 16px 20px; } .nav-link { color: #444; text-decoration: none; margin-left: 24px; } .nav-link.active { color: #2f6fed; font-weight: 600; }flex 布局让站名在左、导航在右justify-content: space-between负责推到底部两端。active的视觉区分不只是颜色加一个font-weight: 600后当前页在字号上就有细微差异用户在快速扫读时更容易定位。3.2 首页文章列表卡片标题、时间、摘要和分类的排布首页是博客的门面它不需要花哨但信息层级要清晰。每篇文章卡片需要包含标题可点击、发布日期、分类、摘要、阅读全文入口。下面是我常用的一版article classpost-card header h2 classpost-title a hrefposts/2025-06-10-html-source.html个人博客网页设计html源码怎么选我总结了三个标准/a /h2 div classpost-meta time datetime2025-06-102025-06-10/time span classpost-category a hrefarchives.html#htmlHTML/a /span /div /header p classpost-excerpt 写博客三年前后换过四套模板最后留下了这套纯 HTML 方案。这篇文章聊聊我筛选源码的三个标准以及最容易踩的坑。 /p a classpost-readmore hrefposts/2025-06-10-html-source.html阅读全文/a /articletime datetime2025-06-10的datetime属性是机器可读的标准时间格式搜索引擎能在搜索结果里显示发布日期比纯文本“2025年6月10日”更规范。分类链接我指向archives.html#html这种锚点形式一个归档页面按分类分块每块给一个id这样不用为每个分类单独建页面。摘要控制在 140 字以内写清楚这篇讲什么、解决什么问题别在摘要里堆关键词“阅读全文”四个字就够不需要写“点击查看全文了解更多”。这个卡片在首页通常循环出现十篇左右。源码里如果卡片是复制粘贴十遍正常如果用了 JavaScript 遍历数组生成卡片看起来高级但不利于 SEO因为爬虫在首屏不一定能渲染出列表内容。纯静态博客的优势就是内容直接写在 HTML 里爬虫零成本读取没必要用 JS 生成列表。3.3 文章页模板正文区、代码块和上一篇/下一篇文章页是用户停留时间最长的页面模板设计要保证“读起来舒服”。正文区我控制在 680px 以内这个宽度下行宽约 35 到 45 个汉字视线移动不累是公认的阅读舒适区。侧边栏可以放作者简介或文章目录但没有也不影响阅读。模板核心结构如下main classpost-main article classpost-content h1个人博客网页设计html源码怎么选我总结了三个标准/h1 div classpost-meta time datetime2025-06-102025-06-10/time span classpost-categoryHTML/span /div p这是正文第一段……/p precode classlanguage-htmllt;!DOCTYPE htmlgt; lt;html langzh-CNgt; lt;headgt; lt;meta charsetUTF-8gt; lt;/headgt; lt;/htmlgt;/code/pre p这是正文第二段……/p /article nav classpost-nav aria-label文章导航 a classpost-prev hrefprevious.html上一篇上一篇文章标题/a a classpost-next hrefnext.html下一篇下一篇文章标题/a /nav /main正文里的代码块我用precode classlanguage-html把替换成lt;替换成gt;这样代码才能原样显示在页面上不会被浏览器当成 HTML 标签解析。post-nav放在article外面语义上它是站点导航的一部分不属于正文这种区分在页面结构审查时是有意义的。样式上有一个隐藏的坑pre标签里的长代码行会在手机上把页面撑破。解决办法不是给pre设word-break: break-all那会让代码折行到没法看而是给它加一个横向滚动容器.post-content pre { overflow-x: auto; padding: 16px; background: #f6f8fa; border-radius: 8px; font-size: 14px; line-height: 1.6; }加上overflow-x: auto后代码块超宽时出现滚动条页面布局不会被撑破。font-size: 14px是代码块的常见字号正文用 16px两级字号的对比能让读者一眼区分代码和叙述。4. 响应式布局、深色模式和 SEO 参数三个高频改动的边界博客源码改完内容和结构接下来就是“看起来专不专业”的部分。这里最容易出效果也最容易翻车的是响应式布局断点、深色模式适配和 SEO 基础参数。这三个话题都有一套成熟参数照着设不容易错但设之前要先弄明白为什么是这些值。4.1 viewport 与断点参数手机、平板、桌面三段断点怎么设移动端适配的第一步是确认head里有viewport标签第二步是在 CSS 里规划断点。我一般用三段式手机端小于 768px默认单列平板768px 到 1024px双列桌面端大于 1024px固定最大宽度并居中。对应的写法是.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } media (min-width: 768px) { .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } } media (min-width: 1024px) { .container { padding: 0 24px; } .home-grid { grid-template-columns: 1fr 1fr 1fr; } }为什么用min-width而不是max-width因为min-width是自底向上设计先写手机端默认样式再逐级增强。这样写的好处是即使某个老浏览器不识别媒体查询页面也会以手机端布局呈现不会崩成三个列挤在一起。而max-width是自顶向下“降级”顺序反了容易漏覆盖。断点为什么是 768 和 1024这两个值基本贴着主流 iPad 竖屏和普通笔记本内屏宽度来。如果你博客读者主要用手机就把平板和桌面合并只保留一个 768px 断点减少维护分支。还有一个新手经常忽略的细节padding在移动端不要小于 12px。有些源码在手机上左右留白只有 8px文字贴屏幕边缘阅读体验很差。我习惯移动端padding: 0 16px到桌面端再放宽到 24px这是成本最低的体验优化。4.2 深色模式不是把背景调黑就完事深色模式是很多入门源码不带、但用户会主动在系统里切换后访问你的博客结果页面亮得刺眼。实现深色模式最稳妥的方案是用 CSS 变量加上prefers-color-scheme:root { --bg: #ffffff; --text: #1a1a1a; --border: #e5e5e5; --code-bg: #f6f8fa; --link: #2f6fed; } media (prefers-color-scheme: dark) { :root { --bg: #1e1e1e; --text: #e6e6e6; --border: #333333; --code-bg: #2d2d2d; --link: #6ea8fe; } } body { background: var(--bg); color: var(--text); }变量定义在:root上整个文档任意位置都能用var(--bg)引用。prefers-color-scheme是系统级的媒体查询用户操作系统切到深色模式浏览器会自动加载深色变量不需要在页面上放切换按钮。这里有三个容易翻车的地方。第一深色模式不只是背景和文字两个变量边框、代码块、引用块、表格线都得跟着变漏一个就会出现“白色背景里套一个浅灰代码块”的副作用。第二图片如果是透明底的 PNG在深色背景下可能看不清内容这种情况要么给图片容器加一个浅色内边距要么换图。第三代码高亮配色要单独处理很多源码的代码高亮只适配了浅色在深色模式下亮紫亮绿的配色会显得特别脏。常见做法是引入两套 highlight 主题在媒体查询里切换。如果源码没有代码高亮就不要自己硬加黑色代码块配浅灰文字在两种模式下都能读。4.3 SEO 基础参数title、description、canonical 和 sitemap纯静态博客的 SEO 能做的事情不多但每件都很基础。首先确保每个页面有独立且描述性的title比如“xx博客 - 记录前端学习和项目实践”而不是全部页面共用一个站名。第二是canonical标签防止同一篇文章通过不同 URL 被访问时被搜索引擎视为重复内容link relcanonical hrefhttps://example.com/posts/2025-06-10-html-source.html思考下什么时候需要它。如果你的博客同时支持https://example.com/post.html和https://www.example.com/post.html访问这两个 URL 内容一样搜索引擎会认为内容是重复的权重被分散。canonical就是告诉搜索引擎“以这个地址为准”。个人博客如果只在一个域名部署其实多数情况用不上但写上无害也能防止以后换域名的历史遗留问题。sitemap.xml是纯静态博客最推荐的 SEO 文件它不需要服务端动态生成手写就行?xml version1.0 encodingUTF-8? urlset xmlnshttp://www.sitemaps.org/schemas/sitemap/0.9 url lochttps://example.com//loc lastmod2025-06-10/lastmod /url url lochttps://example.com/posts/2025-06-10-html-source.html/loc lastmod2025-06-10/lastmod /url /urlsetloc是页面完整地址lastmod是最后修改日期爬虫靠它判断是否需要重新抓取。写完后把sitemap.xml地址提交到搜索引擎的站长工具里就能被动抓取不需要再做什么。不要以为加了这个就能立刻有排名但它能让索引速度明显变快。至于robots.txt一行User-agent: *加一行Allow: /就够了没有特殊需要别乱加Disallow很容易把整站封了还不自知。5. 个人博客 HTML 源码改造避坑排错现象、原因、解决办法哪怕源码结构再清晰动手改的时候还是会碰到一些共性问题。这里把我在多个项目里遇到的、以及在读者反馈里最常见的五类问题整理出来每条按现象、原因、解决三个步骤写可以直接对照排查。5.1 改了 CSS 没反应刷新还是旧样式现象修改了style.css里的颜色或字体浏览器刷新后页面纹丝不动控制台也没报错。原因浏览器缓存。CSS 文件被浏览器缓存后服务器上新版本不会立刻被加载尤其是本地用file://协议打开页面时缓存几乎没有过期时间改十次刷新十次都可能是旧的。另一个原因是改了错误的文件——比如页面真正用的是css/style.css你改的是css/base.css这个文件压根没被引用。解决第一种情况在 HTML 里引用样式时加上版本号参数link relstylesheet hrefcss/style.css?v2改一次v值浏览器就会当成新 URL 重新请求。也可以临时用强制刷新CtrlShiftR但治标不治本。第二种情况打开浏览器开发者工具的 Network 面板刷新页面看style.css的实际请求路径和返回状态确认你到底改的是不是被加载的那个文件。这个习惯很值钱能省掉大量“改了没反应”的排查时间。5.2 本地打开正常部署后图片全部裂图现象双击 index.html 在浏览器里看图片显示正常把整个文件夹传到云服务器或托管平台后图片全部变成裂图图标或者只有部分图片显示。原因路径写法不对本质上是混淆了“相对路径”和“绝对路径”。如果源码里图片地址写成img src/assets/images/avatar.jpg开头带/那它指的是站点根目录下的assets/images/。本地用file://协议打开时/指向本地磁盘根目录恰好能找到部署到服务器后/指向的是服务器站点根目录路径就对不上了。还有另一种情况路径本身没错但文件名带大写字母Windows 本地不区分大小写能显示Linux 服务器严格区分于是Avatar.jpg和avatar.jpg成了两个文件。解决图片引用统一改成相对路径HTML 文件在根目录就用assets/images/avatar.jpg文章页在posts/子目录就写../assets/images/avatar.jpg。文件名全部小写单词之间用连字符-连接避免空格和中文字符。改完之后把整个网站目录完整传到服务器不要在本地只测“页面能打开”要用浏览器的开发者工具看图片请求是否 200。5.3 中文显示成乱码或方块现象页面文字变成我是一个åšå®¢这样一串乱码或者变成空心的方块豆腐块。原因字符编码不一致。HTML 文件里的中文本身是 UTF-8 编码但浏览器不知道用了默认的编码去解码。通常是meta charsetUTF-8缺失或者这一行写在了title之后。也有一种情况是编辑器的问题你用的本地编辑器默认以 GBK/GB2312 编码保存文件但 HTML 头声明的是 UTF-8保存和声明对不上必乱。解决在head最顶部第一行写meta charsetUTF-8不要放在其他 meta 之后。然后用支持编码选择的编辑器VSCode 等打开文件看右下角编码显示是不是 UTF-8如果不是重新以 UTF-8 保存。已经乱码的文件只有撤销到乱码前重新保存别在乱码基础上另存为那会把乱码字符固化掉。5.4 手机上打开排版全乱桌面却正常现象桌面浏览器缩放窗口一切正常手机扫码打开后文字挤成一列图片飞出屏幕导航水平排列撑破页面。原因第一个是head里没有 viewport meta 标签手机浏览器按桌面宽度 980px 渲染再整体缩小所有元素挤在一起。第二个原因是 CSS 里存在固定宽度比如某处写了width: 1000px或min-width: 900px在小于这个宽度的屏幕上就会横向溢出页面出现横向滚动条排版看起来就像“乱了”。解决先确认 head 里有meta nameviewport contentwidthdevice-width, initial-scale1.0这是移动端排版的地基。然后在 CSS 里全局搜width:把所有固定像素宽度改成max-width: 100%或直接去掉配合第 4 章的媒体查询做响应式。排查时用浏览器开发者工具的手机模拟模式设备工具栏把宽度从 375px 拖到 1024px找到具体是哪个元素在哪个宽度下溢出在元素上右键检查看它的计算宽度基本一眼能定位。5.5 favicon 不显示控制台一直报 404现象浏览器标签页上是空白图标或者显示一个默认地球图标控制台请求favicon.ico返回 404。原因HTML 里写了link relicon hreffavicon.ico但根目录下没有这个文件或者图标文件实际在assets/里相对路径没写对。还有一种情况是文件存在但格式不对——某些源码的 favicon 其实是个 PNG 改名成 .ico老版本 Safari 不认这种文件也会显示空白。解决最简单的做法是把图标文件命名为favicon.ico放到根目录全站不写 link 标签浏览器会自动请求/favicon.ico。如果你想用 PNG 当图标就用完整写法link relicon hrefassets/images/favicon.png typeimage/png并且保证文件真的是 PNG 格式。想要更多尺寸的图标可以分多个 link 写个人博客一个 32x32 的够用了。6. 把纯 HTML 博客源码部署上线验证环境、部署路径和后续维护折腾完页面离“能用”还差最后一步把它放到一个稳定的地方。这里我要先纠正一个错误习惯始终用双击 index.html 的方式预览博客。在file://协议下HTML 文件的相对路径还能保持正常但有些资源加载、JavaScript 的 fetch 请求会被浏览器的同源策略拦掉而且你看到的效果和线上环境始终有细微差别哪天某个功能在线上坏了你会无从下手。所以改造完的第一件事是在本地起一个 HTTP 服务来验证。不需要安装任何重量级工具有 Python 就能做cd 你的博客源码目录 python3 -m http.server 8080然后在浏览器打开http://localhost:8080这个环境下资源加载、路径解析都和线上一致。验证重点有三个控制台有没有红色报错、图片请求是否全部返回 200、移动端模式下排版是否正常。这套验证做完再往上部署心里才有底。部署到云服务器的话最常见做法是用 Nginx 托管静态目录。一个够用的配置是server { listen 80; server_name example.com; root /var/www/blog; index index.html; }这里root指向你上传的博客目录index指定首页文件名。配置写好后执行nginx -s reload。如果用了子目录部署比如https://example.com/blog/就需要把源码里所有相对路径再核对一遍这是纯静态博客在子目录部署时最容易集体翻车的地方。小规模的个人博客我建议优先用静态托管服务因为不需要自己维护服务器部署就是一次 push。初始化仓库、add 所有文件、commit、push然后就有一个 HTTPS 域名可以直接访问。不要碰动态博客那些花活——纯 HTML 源码的价值就体现在这里不需要 PHP、不需要数据库、不需要运行时任何静态托管都能跑。这些年我经手的个人博客源码至少几十套总结出一个习惯拿到任何一套模板第一件事永远是先把post.html这个文章页模板的结构理顺确认它和首页共用一套样式然后才开始改造。这个顺序救过我很多次——先有文章页的骨架再填首页的门面整个博客的底子就稳了。希望帮到你。本文还有配套的精品资源点击获取
