简介个人博客网页设计源码是面向个人站点搭建的轻量级博客模板定位给前端初学者或希望快速拥有自展示页面的博主。资源包共30个文件压缩后仅37KB核心为1个HTML页面与1个CSS样式表搭配27个GIF和1个JPG图片资源涵盖分割线、图标、背景和人物装饰等素材。其中HTML文件设置了页面标题、头部区、导航菜单、文章容器、侧边栏与底部信息CSS样式表则通过类和ID选择器统一控制字体、间距、背景及整体布局GIF图片多用作分割线、动态点缀和菜单背景JPG图片可用于侧边栏头像方便直接替换。已有3802人学习浏览适合通过实际修改样式表来理解盒模型、浮动和定位布局。阅读源码可掌握用标题、段落、图片等标签组织语义内容理解替代文本的作用并通过调整style.css中的对应类名快速观察页面变化从而深化前端布局与样式编写能力在此基础上更换图片、文字和配色即可沉淀为一个可继续扩展的个人博客起步模板。1. 项目概述与整体设计思路1.1 为什么还在坚持手写HTML做个人博客做了几年前端开发现在回过头来手写一个个人博客网页听起来像是在开倒车。毕竟现在随便装个WordPress、Hexo、Hugo半小时就能把博客搭得漂漂亮亮何必用最原始的HTML源码从头堆一个出来但这两年我越发觉得用静态HTML源码做一个个人博客和用博客框架生成站点本质上完全不是一回事。手写一套个人博客的HTML源码你亲手掌控的是每一个标签的嵌套逻辑、每一个CSS属性的命名规范、每一个交互动效的触发时机。这种对页面最底层的掌控感是拖拽模板和命令行建站永远给不了的。而且从实用角度来说一个纯静态的个人博客源码包有几个非常硬的优势第一部署成本几乎为零随便放到任何一台支持静态文件的服务器或者对象存储上就能跑第二没有后端依赖不担心数据库被注入、不担心PHP版本升级导致整个站挂掉第三页面加载速度极快没有任何框架运行时首屏就是纯HTML和CSS用户侧体验非常干净。所以我决定把这套个人博客网页设计的完整思路和核心源码实现记录下来从页面架构、布局方案、视觉风格到功能细节一步步拆开讲清楚。这既是一次对自己前端基础功的复盘也希望能给正在学网页设计、或者想搭一个极简个人博客的朋友提供一份可以直接抄作业的参考。1.2 这套博客源码的核心需求与方案选型在设计这套个人博客HTML源码之前我先明确了几个核心需求这些需求决定了后面的所有技术选型和代码组织方式。**第一页面必须轻量纯粹。**博客的目的是内容输出不是技术炫技。所以整个站点用纯HTML CSS JS实现不引入任何第三方框架和UI库。jQuery一律不用图标直接用Unicode字符和CSS绘制代替图标库字体优先用系统字体栈。这样整个源码包只有几个文件任何编辑器打开都能看懂任何静态托管平台都能一键部署。**第二结构必须语义清晰。**既然手写源码就要把语义化标签用到位。页面骨架用header、nav、main、aside、article、footer这些HTML5标准标签搭建而不是一把div梭哈。这不仅是为了代码好看更重要的是对搜索引擎友好对屏幕阅读器友好。文章列表用article包裹侧边栏用aside主导航用nav每个区块都有自己的语义身份浏览器和爬虫一解析就知道哪里是正文、哪里是导航、哪里是补充信息。**第三视觉必须干净耐看。**个人博客的读者是来读内容的不是来欣赏视觉轰炸的。所以我选的风格是清爽的浅色系留白充分正文区域宽度控制在720px左右行高设到1.8字号16px起步。这个阅读宽度的选择很快经过反复测试720px在中英文混排场景下换行频率、视线移动距离和阅读节奏都是最舒服的。**第四必须支持移动端自适应。**现在的流量超过一半来自手机如果博客在手机上挤成一团那基本等于没有做。所以布局上我采用了CSS Grid作为整体框架用Flexbox处理局部细节配合两个媒体查询断点实现从宽屏到窄屏的自然过渡。这个组合方案兼顾了语义化、代码可读性和响应式效果比单纯用Bootstrap栅格系统更灵活也更符合手写源码的学习初衷。技术和方案层面整个项目就是四个文件index.html作为首页、article.html作为文章详情页、style.css统一全站样式、main.js负责交互逻辑。结构简单但是每个文件的代码都经过仔细斟酌下面我从头到尾拆解。2. 页面框架与核心布局实现2.1 HTML骨架与语义化结构设计先看首页index.html的整体结构。我没有一上来就写样式而是先把HTML的语义骨架搭建清楚确认每个区块的归属关系后再进入视觉层。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录前端开发、网页设计与技术学习笔记 title拾光笔记 - 个人博客/title link relstylesheet hrefcss/style.css /head body !-- 顶部导航区域 -- header classsite-header div classcontainer header-inner a hrefindex.html classlogo拾光笔记/a nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefarticle.html文章/a/li lia href#归档/a/li lia href#关于我/a/li /ul /nav /div /header !-- 主体内容区左侧文章列表 右侧侧边栏 -- div classcontainer main-wrapper main classcontent-area article classpost-card h2 classpost-titlea hrefarticle.html用纯手写HTML搭建个人博客到底值不值/a/h2 div classpost-meta span classpost-date2025-01-12/span span classpost-category前端开发/span span classpost-views阅读 328/span /div p classpost-excerpt当建站工具越来越强大为什么我还要从零手写一套个人博客源码这篇文章聊聊我的真实想法以及在手写过程中踩过的坑、总结的经验。/p a hrefarticle.html classread-more阅读全文/a /article /main aside classsidebar section classwidget h3关于博主/h3 p一名热爱前端技术的开发者喜欢研究网页交互和性能优化。/p /section section classwidget h3文章分类/h3 ul classcategory-list lia href#前端开发/a/li lia href#网页设计/a/li lia href#技术随笔/a/li /ul /section /aside /div footer classsite-footer div classcontainer p© 2025 拾光笔记 · 用热爱驱动代码/p /div /footer script srcjs/main.js/script /body /html这段代码有几个细节值得说明。meta viewport是移动端自适应的前提没有这一行手机浏览器默认按980px宽度渲染页面后面做多少媒体查询都白搭很多新手都是从忘了这行开始踩坑的。logo我放在nav前面是为了保证在窄屏下品牌标识始终显示在左上角导航项收缩到后面。main和aside共同包在一个.main-wrapper的容器里这个容器在CSS里用Grid布局分成两栏侧边栏固定宽度260px主区域自适应剩余空间。文章的卡片结构里我把post-title、post-meta、post-excerpt和阅读全文链接都包在article标签中这样每个卡片都是独立的语义单元。日期、分类、阅读量这三个span放在同一个.post-meta容器里后面用Flex布局做水平排列中间用点号或竖线分隔视觉上干净利落。2.2 CSS布局方案与间距系统设计布局是整个博客视觉呈现的骨架。考虑到博客页面的排布规律——头部通栏、底部通栏、中间内容区固定最大宽度并且分栏——我用CSS Grid来搭宏观结构用Flexbox处理组件内部的排列问题。/* 全局基础样式重置与变量定义 */ :root { --primary-color: #2c3e50; --accent-color: #e67e22; --text-color: #333333; --muted-color: #888888; --bg-color: #f9f9f9; --card-bg: #ffffff; --max-width: 1200px; --content-width: 720px; --border-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.8; }我把设计变量统一放在:root伪类里颜色、字号、间距、圆角都可以在后面随时引用和调整。这套命名规范是CSS变量最基础但最实用的用法改主题色的时候只需要动一个变量全站瞬间焕新完全不用挨个文件去替换颜色值。字体这块我直接用了系统字体栈没有加载任何外部字体文件。因为对中文站点来说外部字体通常体积巨大动辄几MB的字体文件反而让页面变重而PingFang SC、Microsoft YaHei这些系统字体在各自平台都有很成熟的渲染表现。中文字体优先采用系统方案这是做中文博客的另一个小经验。接下来是整体页面的Grid布局和对阅读区域宽度的控制。.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .main-wrapper { display: grid; grid-template-columns: 1fr 280px; gap: 30px; padding-top: 30px; padding-bottom: 30px; } .content-area { min-width: 0; } .sidebar { min-width: 0; }这里一个非常容易踩坑的地方在Grid或Flex布局的子项上必须显式加上min-width: 0。否则当内容宽度超过容器或包含不可换行的长字符串时子项会被内容撑破撑破之后整个布局就错位了。这是CSS布局里典型的隐式问题不报错但显示错乱排查起来也要花一些时间。文章正文阅读区域单独设置了测量好的宽度.post-content { max-width: var(--content-width); margin: 0 auto; }阅读宽度的设计我实际测试过不同的取值——超过760px后人眼在一行内扫过太长距离读完一行回头找下一行的开头时容易串行低于640px行频换行密度过高阅读节奏又显得碎。720px是我在各种屏幕尺寸下都验证过的相对均衡值。文字密集的页面这个细节的舒适度差距还挺明显的。2.3 响应式断点与移动端适配响应式适配我设置了两套媒体查询分别在768px和480px两个断点调整布局。/* 平板及以下侧边栏折叠到底部 */ media (max-width: 768px) { .main-wrapper { grid-template-columns: 1fr; } .header-inner { flex-direction: column; gap: 10px; } .sidebar { order: 2; } } /* 手机端进一步优化导航和间距 */ media (max-width: 480px) { .container { padding: 0 15px; } .main-nav ul { flex-wrap: wrap; justify-content: center; } .post-title { font-size: 1.3rem; } }768px这个断点选得比较讲究。因为平板的典型宽度是768px在这个宽度以下侧边栏如果继续占据280px主内容区域就被压缩得只剩450px左右阅读体验会明显下降。所以我把侧边栏折叠到主内容下方并且通过order: 2让它排在后面。480px断点则针对手机窄屏做细节优化导航菜单允许换行居中文章标题字号适当调小防止标题在窄屏上折成三行四行。这里有一个取舍值得说明我没有做汉堡菜单也就是点击图标展开导航的交互。因为在导航项只有四个的情况下汉堡菜单反而增加了用户的操作成本直接平铺显示更直观、更快移动端用户少点一次体验就多一分。导航项少的时候平铺优于汉堡菜单这是我在移动端适配上的一个理念。3. 视觉风格与核心功能模块实现3.1 文章卡片、标签与阅读体验细节首页的文章卡片是博客内容的核心展示入口设计目标是在有限的面积里清晰呈现标题、时间、分类、摘要、阅读全文五个信息层级让读者在快速扫视时能够迅速判断有没有点进去阅读的价值。.post-card { background: var(--card-bg); border-radius: var(--border-radius); padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease; } .post-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }卡片的悬停效果我用了阴影加深加微上浮的组合这是一种既轻量又有反馈感的交互。上浮位移只设了2px再多就会显得轻浮——博客毕竟是内容平台不是营销活动页交互反馈应该克制。卡片内部的元信息用Flex布局排开通过颜色深浅区分信息层级。.post-meta { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; color: var(--muted-color); margin: 8px 0 12px; } .post-category { background: rgba(230, 126, 34, 0.12); color: var(--accent-color); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; }分类标签我特意做了一个小圆角胶囊样式淡橙色背景配合主题橙色文字让整片以灰白黑为主的页面有一个视觉锚点。同时这个标签用的是半透明背景色而不是实色这样在不同背景下都不会显得突兀。文章列表的摘要在CSS里加了行数截断处理这是列表页保持整洁的关键技巧。.post-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }用-webkit-line-clamp实现两行截断兼容性在现代浏览器里都很好比直接截断字符串要可靠得多因为它是按CSS计算后的实际渲染尺寸来截断的不会出现中文标点截断到半个字的问题。超出两行的部分自动隐藏并在末尾生成省略号这样无论摘要写多长卡片不会因为内容多少而变化高度页面滚动起来很整齐。3.2 文章详情页与正文排版样式文章详情页是博客真正的内容承重墙排版好不好看直接影响读者愿不愿意读完。我在article.html中构建了文章页的骨架正文区域采用单栏居中布局排除了侧边栏的干扰让读者全神贯注在内容上。main classcontent-area article-page article classpost-full header classpost-header h1 classpost-title用纯手写HTML搭建个人博客到底值不值/h1 div classpost-meta span发布于 2025-01-12/span span分类前端开发/span span字数约 2800 字/span span阅读时间约 8 分钟/span /div /header div classpost-content p当博客建站工具越来越成熟为什么还有人愿意从零开始写页面/p h2手写博客的意义/h2 p速度、可控、极简.../p blockquote写作是思考的过程博客是思考的沉淀。/blockquote precode// 代码块示例 const blogName 拾光笔记; console.log(blogName); /code/pre /div /article /main正文区内的各级标题、段落、引用、代码块都做了专门的样式定义。特别要说的是代码块和引用块的视觉处理这两个是技术博客阅读体验的放大器。.post-content h2 { font-size: 1.5rem; margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid var(--accent-color); } .post-content blockquote { margin: 24px 0; padding: 14px 20px; background: #f5f5f5; border-left: 4px solid #ddd; color: #555; border-radius: 0 6px 6px 0; } .post-content pre { background: #2d2d2d; color: #f8f8f2; padding: 18px; border-radius: 6px; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }正文里的h2我用了左侧竖线作为视觉分隔这样快速扫读的时候眼球的定位点会非常清晰。给标题加左侧强调线跟页面主色调保持一致标题的层级感一下就出来了。引用块用了浅灰色背景而不是纯边框比单纯加一条左边框看起来更立体、更有存在感。代码块采用了深色背景和正文的白色背景形成强反差读者一进入代码区就能立刻切换阅读模式。深色代码块带横向滚动条overflow-x: auto长代码不会被截断。3.3 导航吸顶、回到顶部与滚动加载效果博客站的交互功能不需要多但关键几个必须有导航吸顶让读者在滚动时随时可以切换页面回到顶部按钮在长文中快速返回滚动加载让归档列表页的体验更流畅。导航吸顶的实现方式很简单在CSS里给.site-header加上固定定位.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }这里用了position: sticky而不是position: fixed。两者的区别很关键fixed会让元素脱离文档流底下的内容会顶上来需要额外给顶部留白sticky则仍然占据原来的文档流位置只在滚动到指定位置时才粘在顶部。用sticky配合backdrop-filter: blur(8px)做一个半透明背景加毛玻璃效果页面向下滚动时正文内容从半透明导航底下穿过层次感很好。回到顶部按钮用JavaScript实现核心逻辑是监听滚动事件根据滚动距离切换按钮显示状态点击后平滑回到顶部。const backTop document.getElementById(back-top); window.addEventListener(scroll, () { if (window.scrollY 300) { backTop.classList.add(show); } else { backTop.classList.remove(show); } }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });按钮默认隐藏在屏幕右下角只有当滚动距离超过300px才显示。用scrollY而不是scrollTop是因为scrollY在现代浏览器中兼容性更好而且语义更清晰。平滑滚动用的是原生scrollTo加behavior: smooth完全不用自己写逐帧动画或者引入第三方库。归档页的滚动加载是另一种常见的分页方案。我的做法是用IntersectionObserver监听一个哨兵元素当页面滚动到列表底部且哨兵元素进入视口时动态插入新的文章卡片。IntersectionObserver比传统的scroll事件加getBoundingClientRect计算更高效在性能上的开销更小代码也干净清晰。4. 常见问题与调试经验实录4.1 中文页面乱码与字体渲染异常中文网页的乱码问题大部分情况下都是字符集声明不一致导致的。HTML文件在head里声明了meta charsetUTF-8但文件本身实际是GBK编码保存的浏览器按UTF-8解码就会出现中文乱码。排查思路非常直接用VS Code打开HTML文件看右下角状态栏显示的编码格式是什么如果显示的是GBK或者GB2312点击后选择通过编码重新打开再改成UTF-8保存。同时确保meta charset声明在head标签的前128字节内出现这是HTML规范要求也是防止浏览器在解析HTML时过早猜测编码导致乱码的前提。我还遇到过一个很有意思的字体问题在Windows系统上页面显示的中文字体总是发虚、不够锐利。排查之后发现问题不在字体选型而是缺少了对font-smoothing的支持。Windows上的Chrome对-webkit-font-smoothing: antialiased有一定响应虽然不如macOS上效果明显但相比默认的渲染方式锯齿感还是有一定改善。对于跨平台的博客可以在body上加上这样一行的字体平滑设置视觉效果会有提升body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }但有一点需要注意text-rendering: optimizeLegibility在部分Linux浏览器上会降低文本渲染性能尤其是文本量大的页面。如果Linux用户反馈页面滚动卡顿优先检查是不是这个属性引起的。4.2 布局错位与图片溢出问题我做博客开发的时候最常遇到、也最容易被忽视的一个问题是图片溢出容器。文章里插入了一张宽度超过容器宽度的大图结果图片直接冲破卡片边界把布局硬生生撑开了。解决方法有两个层面。第一层是CSS层面给所有图片加上最大宽度限制.post-content img, .post-card img { max-width: 100%; height: auto; border-radius: 6px; }max-width: 100%保证图片不会超出父容器height: auto保证图片等比例缩放。这个组合是无脑安全方案但有一个隐患——如果原图本身就是不同比例的所有图片在容器里会以不同的高度显示列表页的卡片高度就会参差不齐。第二层是在这个基础上做进一步优化为图片容器设定统一的宽高比比如aspect-ratio: 16 / 9再用object-fit: cover裁切。这样所有封面图的高度统一列表页看起来整齐划一。object-fit的兼容性在现代浏览器都已经很好了可以放心使用.post-card img { width: 100%; height: 200px; object-fit: cover; }另一个容易踩的坑是长URL或者连续英文字符串导致的横向溢出。一长串没有空格的英文URL默认情况下不会被换行而是直接撑破容器。解决办法是在正文容器上加上断词规则.post-content { overflow-wrap: break-word; word-break: break-word; }overflow-wrap: break-word允许在单词内部断行word-break: break-word则是为了兼容旧版浏览器。加上这两行长链接、长代码串都能正常在容器内换行不会破坏页面布局。4.3 响应式布局的隐形陷阱与兼容性经验响应式布局里最容易踩的隐性陷阱就是子项的min-width: 0问题这个BUG的隐蔽之处在于它不报错、不闪退纯靠肉眼观察。我在前面布局部分提到过比如Grid父容器设了两列子项里放了一串很长的内容默认情况下子项的min-width是auto它会用内容的原始宽度去撑父容器导致整体布局变形。排查方式很简单浏览器开发者工具选中出问题的元素看它的计算宽度是否超过了父容器再试着加上min-width: 0看看是否恢复。如果恢复说明是内容溢出导致的布局撑破。这个习惯一旦养成处理类似的布局问题会快很多。兼容性方面我使用CSS变量配合备用值做了一个相对稳妥的方案:root { --primary-color: #2c3e50; --accent-color: #e67e22; } .footer-link { color: #2c3e50; color: var(--primary-color); }重复声明两次第一行写死具体值第二行写CSS变量。支持CSS变量的浏览器会使用第二行变量值不支持的旧浏览器会忽略第二行并回退到第一行具体值。这种渐进增强的写法虽然代码上看着有些重复但换来了全端一致的显示效果。在实际兼容测试中我习惯用的基准是Chrome、Safari、Firefox的最新两个大版本加上iOS Safari和Android Chrome各一个版本。覆盖了日常用户的主力阵容。IE系列的兼容成本在这个年代已经不划算也不用再多花心思。5. 源码使用指南与后续扩展建议5.1 目录结构说明与本地预览方法整套源码的目录结构非常简洁我会建议所有准备自己写博客的人不管代码多少都遵循结构目录分离、样式全局统一、逻辑独立收敛的组织方式personal-blog/ ├── index.html # 首页文章列表 ├── article.html # 文章详情页模板 ├── css/ │ └── style.css # 全站统一样式 └── js/ └── main.js # 交互逻辑回到顶部、滚动加载等本地预览可以直接双击HTML文件在浏览器中打开也可以启动一个简单的本地静态服务避免将来接入接口后出现本地文件跨域报错# 用Python起一个端口为8000的静态服务 cd personal-blog python3 -m http.server 8000然后浏览器访问http://localhost:8000即可实时预览效果。代码修改后直接刷新页面就能看到更新不用重新构建不用配置热更新纯粹的前端静态开发体验也是很多人放弃框架回归原始手写的一个重要原因。5.2 从静态页面到完整博客的路径选择这套源码本身是一个纯静态的展示型页面。如果你希望它升级成一个完整的、支持后台管理的博客系统有两条路线可以选择。第一条是继续走纯静态路线把HTML作为模板配合API接口动态加载数据。比如用前端fetch请求一个JSON文件读取文章列表和正文内容动态渲染到页面上。JSON文件放文章数据页面放展示逻辑既保留了静态页面性能好的优势又让内容更新变得简单起来。这种方式非常适合个人博客这种更新频率不高的场景。第二条是直接接入Headless CMS服务把内容和前端完全分离。在后台写文章前端通过API接口拉取数据并渲染。这套源码的结构本身就是按数据与展示分离的思路设计的所以接入CMS的时候不需要大改页面骨架只需把静态的post-card部分改成动态循环渲染即可。我更推荐的做法是第一阶段的纯静态JSON方案因为个人博客的核心价值是持续输出内容而不是维护一套复杂的后台系统能少一个依赖就少一个依赖。当内容积累到一定量级、确实需要后台管理时再引入CMS过渡成本也不高。5.3 基于这套源码的深度定制方向如果你打算基于这套源码做深度定制根据自己的偏好可以往以下几个方向演进暗色模式使用prefers-color-scheme媒体查询检测系统主题偏好配合CSS变量在明暗色之间自动切换。只需要把颜色值相关的变量重新定义一整套暗色方案工作量不大效果却非常出彩。文章搜索纯前端可以用一个简单的词频匹配算法在标题、摘要、标签中匹配关键词并高亮展示不需要引入Elasticsearch这种重型组件。分享功能利用浏览器原生navigator.share接口一行代码唤起系统分享面板比接各种第三方分享SDK轻量得多。PWA离线支持写一个简单的manifest.json加一个service-worker.js博客在手机端就能添加到主屏幕获得类似原生App的体验还支持离线阅读。上面这些方向都是在现有源码基础上渐进叠加不会破坏已有的语义结构和视觉风格。写在最后前阵子回看这套博客源码的迭代记录从第一版粗糙的表格布局到现在这套相对成熟的Grid响应式架构每一步都有踩坑和修整的痕迹。我做这套纯粹的个人博客源码最大的收获是对HTML和CSS有了更深层的理解——用框架的时候很多问题被隐藏了回到基础手写反而看清了很多底层机制。如果你也正在学习网页设计我的建议是不要嫌手写麻烦。真正静下心来把一个页面从结构到样式、从桌面端到移动端完整地写一遍你对网页底层的理解会扎实很多。这套源码可以当作一个起步参考把整个页面下载下来打开,对照着代码一点一点改颜色、调整间距、增加模块慢慢就会变成你自己的东西。博客的妙处就在于此——代码是死的但对代码的理解是活的是可以不断生长的。本文还有配套的精品资源点击获取 
长河君 · 2026/9/7 4:55:47 · 阅读 1.2k 手写HTML搭建个人博客：从语义化结构到响应式布局的完整实践
简介个人博客网页设计源码是面向个人站点搭建的轻量级博客模板定位给前端初学者或希望快速拥有自展示页面的博主。资源包共30个文件压缩后仅37KB核心为1个HTML页面与1个CSS样式表搭配27个GIF和1个JPG图片资源涵盖分割线、图标、背景和人物装饰等素材。其中HTML文件设置了页面标题、头部区、导航菜单、文章容器、侧边栏与底部信息CSS样式表则通过类和ID选择器统一控制字体、间距、背景及整体布局GIF图片多用作分割线、动态点缀和菜单背景JPG图片可用于侧边栏头像方便直接替换。已有3802人学习浏览适合通过实际修改样式表来理解盒模型、浮动和定位布局。阅读源码可掌握用标题、段落、图片等标签组织语义内容理解替代文本的作用并通过调整style.css中的对应类名快速观察页面变化从而深化前端布局与样式编写能力在此基础上更换图片、文字和配色即可沉淀为一个可继续扩展的个人博客起步模板。1. 项目概述与整体设计思路1.1 为什么还在坚持手写HTML做个人博客做了几年前端开发现在回过头来手写一个个人博客网页听起来像是在开倒车。毕竟现在随便装个WordPress、Hexo、Hugo半小时就能把博客搭得漂漂亮亮何必用最原始的HTML源码从头堆一个出来但这两年我越发觉得用静态HTML源码做一个个人博客和用博客框架生成站点本质上完全不是一回事。手写一套个人博客的HTML源码你亲手掌控的是每一个标签的嵌套逻辑、每一个CSS属性的命名规范、每一个交互动效的触发时机。这种对页面最底层的掌控感是拖拽模板和命令行建站永远给不了的。而且从实用角度来说一个纯静态的个人博客源码包有几个非常硬的优势第一部署成本几乎为零随便放到任何一台支持静态文件的服务器或者对象存储上就能跑第二没有后端依赖不担心数据库被注入、不担心PHP版本升级导致整个站挂掉第三页面加载速度极快没有任何框架运行时首屏就是纯HTML和CSS用户侧体验非常干净。所以我决定把这套个人博客网页设计的完整思路和核心源码实现记录下来从页面架构、布局方案、视觉风格到功能细节一步步拆开讲清楚。这既是一次对自己前端基础功的复盘也希望能给正在学网页设计、或者想搭一个极简个人博客的朋友提供一份可以直接抄作业的参考。1.2 这套博客源码的核心需求与方案选型在设计这套个人博客HTML源码之前我先明确了几个核心需求这些需求决定了后面的所有技术选型和代码组织方式。**第一页面必须轻量纯粹。**博客的目的是内容输出不是技术炫技。所以整个站点用纯HTML CSS JS实现不引入任何第三方框架和UI库。jQuery一律不用图标直接用Unicode字符和CSS绘制代替图标库字体优先用系统字体栈。这样整个源码包只有几个文件任何编辑器打开都能看懂任何静态托管平台都能一键部署。**第二结构必须语义清晰。**既然手写源码就要把语义化标签用到位。页面骨架用header、nav、main、aside、article、footer这些HTML5标准标签搭建而不是一把div梭哈。这不仅是为了代码好看更重要的是对搜索引擎友好对屏幕阅读器友好。文章列表用article包裹侧边栏用aside主导航用nav每个区块都有自己的语义身份浏览器和爬虫一解析就知道哪里是正文、哪里是导航、哪里是补充信息。**第三视觉必须干净耐看。**个人博客的读者是来读内容的不是来欣赏视觉轰炸的。所以我选的风格是清爽的浅色系留白充分正文区域宽度控制在720px左右行高设到1.8字号16px起步。这个阅读宽度的选择很快经过反复测试720px在中英文混排场景下换行频率、视线移动距离和阅读节奏都是最舒服的。**第四必须支持移动端自适应。**现在的流量超过一半来自手机如果博客在手机上挤成一团那基本等于没有做。所以布局上我采用了CSS Grid作为整体框架用Flexbox处理局部细节配合两个媒体查询断点实现从宽屏到窄屏的自然过渡。这个组合方案兼顾了语义化、代码可读性和响应式效果比单纯用Bootstrap栅格系统更灵活也更符合手写源码的学习初衷。技术和方案层面整个项目就是四个文件index.html作为首页、article.html作为文章详情页、style.css统一全站样式、main.js负责交互逻辑。结构简单但是每个文件的代码都经过仔细斟酌下面我从头到尾拆解。2. 页面框架与核心布局实现2.1 HTML骨架与语义化结构设计先看首页index.html的整体结构。我没有一上来就写样式而是先把HTML的语义骨架搭建清楚确认每个区块的归属关系后再进入视觉层。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录前端开发、网页设计与技术学习笔记 title拾光笔记 - 个人博客/title link relstylesheet hrefcss/style.css /head body !-- 顶部导航区域 -- header classsite-header div classcontainer header-inner a hrefindex.html classlogo拾光笔记/a nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefarticle.html文章/a/li lia href#归档/a/li lia href#关于我/a/li /ul /nav /div /header !-- 主体内容区左侧文章列表 右侧侧边栏 -- div classcontainer main-wrapper main classcontent-area article classpost-card h2 classpost-titlea hrefarticle.html用纯手写HTML搭建个人博客到底值不值/a/h2 div classpost-meta span classpost-date2025-01-12/span span classpost-category前端开发/span span classpost-views阅读 328/span /div p classpost-excerpt当建站工具越来越强大为什么我还要从零手写一套个人博客源码这篇文章聊聊我的真实想法以及在手写过程中踩过的坑、总结的经验。/p a hrefarticle.html classread-more阅读全文/a /article /main aside classsidebar section classwidget h3关于博主/h3 p一名热爱前端技术的开发者喜欢研究网页交互和性能优化。/p /section section classwidget h3文章分类/h3 ul classcategory-list lia href#前端开发/a/li lia href#网页设计/a/li lia href#技术随笔/a/li /ul /section /aside /div footer classsite-footer div classcontainer p© 2025 拾光笔记 · 用热爱驱动代码/p /div /footer script srcjs/main.js/script /body /html这段代码有几个细节值得说明。meta viewport是移动端自适应的前提没有这一行手机浏览器默认按980px宽度渲染页面后面做多少媒体查询都白搭很多新手都是从忘了这行开始踩坑的。logo我放在nav前面是为了保证在窄屏下品牌标识始终显示在左上角导航项收缩到后面。main和aside共同包在一个.main-wrapper的容器里这个容器在CSS里用Grid布局分成两栏侧边栏固定宽度260px主区域自适应剩余空间。文章的卡片结构里我把post-title、post-meta、post-excerpt和阅读全文链接都包在article标签中这样每个卡片都是独立的语义单元。日期、分类、阅读量这三个span放在同一个.post-meta容器里后面用Flex布局做水平排列中间用点号或竖线分隔视觉上干净利落。2.2 CSS布局方案与间距系统设计布局是整个博客视觉呈现的骨架。考虑到博客页面的排布规律——头部通栏、底部通栏、中间内容区固定最大宽度并且分栏——我用CSS Grid来搭宏观结构用Flexbox处理组件内部的排列问题。/* 全局基础样式重置与变量定义 */ :root { --primary-color: #2c3e50; --accent-color: #e67e22; --text-color: #333333; --muted-color: #888888; --bg-color: #f9f9f9; --card-bg: #ffffff; --max-width: 1200px; --content-width: 720px; --border-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.8; }我把设计变量统一放在:root伪类里颜色、字号、间距、圆角都可以在后面随时引用和调整。这套命名规范是CSS变量最基础但最实用的用法改主题色的时候只需要动一个变量全站瞬间焕新完全不用挨个文件去替换颜色值。字体这块我直接用了系统字体栈没有加载任何外部字体文件。因为对中文站点来说外部字体通常体积巨大动辄几MB的字体文件反而让页面变重而PingFang SC、Microsoft YaHei这些系统字体在各自平台都有很成熟的渲染表现。中文字体优先采用系统方案这是做中文博客的另一个小经验。接下来是整体页面的Grid布局和对阅读区域宽度的控制。.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .main-wrapper { display: grid; grid-template-columns: 1fr 280px; gap: 30px; padding-top: 30px; padding-bottom: 30px; } .content-area { min-width: 0; } .sidebar { min-width: 0; }这里一个非常容易踩坑的地方在Grid或Flex布局的子项上必须显式加上min-width: 0。否则当内容宽度超过容器或包含不可换行的长字符串时子项会被内容撑破撑破之后整个布局就错位了。这是CSS布局里典型的隐式问题不报错但显示错乱排查起来也要花一些时间。文章正文阅读区域单独设置了测量好的宽度.post-content { max-width: var(--content-width); margin: 0 auto; }阅读宽度的设计我实际测试过不同的取值——超过760px后人眼在一行内扫过太长距离读完一行回头找下一行的开头时容易串行低于640px行频换行密度过高阅读节奏又显得碎。720px是我在各种屏幕尺寸下都验证过的相对均衡值。文字密集的页面这个细节的舒适度差距还挺明显的。2.3 响应式断点与移动端适配响应式适配我设置了两套媒体查询分别在768px和480px两个断点调整布局。/* 平板及以下侧边栏折叠到底部 */ media (max-width: 768px) { .main-wrapper { grid-template-columns: 1fr; } .header-inner { flex-direction: column; gap: 10px; } .sidebar { order: 2; } } /* 手机端进一步优化导航和间距 */ media (max-width: 480px) { .container { padding: 0 15px; } .main-nav ul { flex-wrap: wrap; justify-content: center; } .post-title { font-size: 1.3rem; } }768px这个断点选得比较讲究。因为平板的典型宽度是768px在这个宽度以下侧边栏如果继续占据280px主内容区域就被压缩得只剩450px左右阅读体验会明显下降。所以我把侧边栏折叠到主内容下方并且通过order: 2让它排在后面。480px断点则针对手机窄屏做细节优化导航菜单允许换行居中文章标题字号适当调小防止标题在窄屏上折成三行四行。这里有一个取舍值得说明我没有做汉堡菜单也就是点击图标展开导航的交互。因为在导航项只有四个的情况下汉堡菜单反而增加了用户的操作成本直接平铺显示更直观、更快移动端用户少点一次体验就多一分。导航项少的时候平铺优于汉堡菜单这是我在移动端适配上的一个理念。3. 视觉风格与核心功能模块实现3.1 文章卡片、标签与阅读体验细节首页的文章卡片是博客内容的核心展示入口设计目标是在有限的面积里清晰呈现标题、时间、分类、摘要、阅读全文五个信息层级让读者在快速扫视时能够迅速判断有没有点进去阅读的价值。.post-card { background: var(--card-bg); border-radius: var(--border-radius); padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease; } .post-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }卡片的悬停效果我用了阴影加深加微上浮的组合这是一种既轻量又有反馈感的交互。上浮位移只设了2px再多就会显得轻浮——博客毕竟是内容平台不是营销活动页交互反馈应该克制。卡片内部的元信息用Flex布局排开通过颜色深浅区分信息层级。.post-meta { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; color: var(--muted-color); margin: 8px 0 12px; } .post-category { background: rgba(230, 126, 34, 0.12); color: var(--accent-color); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; }分类标签我特意做了一个小圆角胶囊样式淡橙色背景配合主题橙色文字让整片以灰白黑为主的页面有一个视觉锚点。同时这个标签用的是半透明背景色而不是实色这样在不同背景下都不会显得突兀。文章列表的摘要在CSS里加了行数截断处理这是列表页保持整洁的关键技巧。.post-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }用-webkit-line-clamp实现两行截断兼容性在现代浏览器里都很好比直接截断字符串要可靠得多因为它是按CSS计算后的实际渲染尺寸来截断的不会出现中文标点截断到半个字的问题。超出两行的部分自动隐藏并在末尾生成省略号这样无论摘要写多长卡片不会因为内容多少而变化高度页面滚动起来很整齐。3.2 文章详情页与正文排版样式文章详情页是博客真正的内容承重墙排版好不好看直接影响读者愿不愿意读完。我在article.html中构建了文章页的骨架正文区域采用单栏居中布局排除了侧边栏的干扰让读者全神贯注在内容上。main classcontent-area article-page article classpost-full header classpost-header h1 classpost-title用纯手写HTML搭建个人博客到底值不值/h1 div classpost-meta span发布于 2025-01-12/span span分类前端开发/span span字数约 2800 字/span span阅读时间约 8 分钟/span /div /header div classpost-content p当博客建站工具越来越成熟为什么还有人愿意从零开始写页面/p h2手写博客的意义/h2 p速度、可控、极简.../p blockquote写作是思考的过程博客是思考的沉淀。/blockquote precode// 代码块示例 const blogName 拾光笔记; console.log(blogName); /code/pre /div /article /main正文区内的各级标题、段落、引用、代码块都做了专门的样式定义。特别要说的是代码块和引用块的视觉处理这两个是技术博客阅读体验的放大器。.post-content h2 { font-size: 1.5rem; margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid var(--accent-color); } .post-content blockquote { margin: 24px 0; padding: 14px 20px; background: #f5f5f5; border-left: 4px solid #ddd; color: #555; border-radius: 0 6px 6px 0; } .post-content pre { background: #2d2d2d; color: #f8f8f2; padding: 18px; border-radius: 6px; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }正文里的h2我用了左侧竖线作为视觉分隔这样快速扫读的时候眼球的定位点会非常清晰。给标题加左侧强调线跟页面主色调保持一致标题的层级感一下就出来了。引用块用了浅灰色背景而不是纯边框比单纯加一条左边框看起来更立体、更有存在感。代码块采用了深色背景和正文的白色背景形成强反差读者一进入代码区就能立刻切换阅读模式。深色代码块带横向滚动条overflow-x: auto长代码不会被截断。3.3 导航吸顶、回到顶部与滚动加载效果博客站的交互功能不需要多但关键几个必须有导航吸顶让读者在滚动时随时可以切换页面回到顶部按钮在长文中快速返回滚动加载让归档列表页的体验更流畅。导航吸顶的实现方式很简单在CSS里给.site-header加上固定定位.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }这里用了position: sticky而不是position: fixed。两者的区别很关键fixed会让元素脱离文档流底下的内容会顶上来需要额外给顶部留白sticky则仍然占据原来的文档流位置只在滚动到指定位置时才粘在顶部。用sticky配合backdrop-filter: blur(8px)做一个半透明背景加毛玻璃效果页面向下滚动时正文内容从半透明导航底下穿过层次感很好。回到顶部按钮用JavaScript实现核心逻辑是监听滚动事件根据滚动距离切换按钮显示状态点击后平滑回到顶部。const backTop document.getElementById(back-top); window.addEventListener(scroll, () { if (window.scrollY 300) { backTop.classList.add(show); } else { backTop.classList.remove(show); } }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });按钮默认隐藏在屏幕右下角只有当滚动距离超过300px才显示。用scrollY而不是scrollTop是因为scrollY在现代浏览器中兼容性更好而且语义更清晰。平滑滚动用的是原生scrollTo加behavior: smooth完全不用自己写逐帧动画或者引入第三方库。归档页的滚动加载是另一种常见的分页方案。我的做法是用IntersectionObserver监听一个哨兵元素当页面滚动到列表底部且哨兵元素进入视口时动态插入新的文章卡片。IntersectionObserver比传统的scroll事件加getBoundingClientRect计算更高效在性能上的开销更小代码也干净清晰。4. 常见问题与调试经验实录4.1 中文页面乱码与字体渲染异常中文网页的乱码问题大部分情况下都是字符集声明不一致导致的。HTML文件在head里声明了meta charsetUTF-8但文件本身实际是GBK编码保存的浏览器按UTF-8解码就会出现中文乱码。排查思路非常直接用VS Code打开HTML文件看右下角状态栏显示的编码格式是什么如果显示的是GBK或者GB2312点击后选择通过编码重新打开再改成UTF-8保存。同时确保meta charset声明在head标签的前128字节内出现这是HTML规范要求也是防止浏览器在解析HTML时过早猜测编码导致乱码的前提。我还遇到过一个很有意思的字体问题在Windows系统上页面显示的中文字体总是发虚、不够锐利。排查之后发现问题不在字体选型而是缺少了对font-smoothing的支持。Windows上的Chrome对-webkit-font-smoothing: antialiased有一定响应虽然不如macOS上效果明显但相比默认的渲染方式锯齿感还是有一定改善。对于跨平台的博客可以在body上加上这样一行的字体平滑设置视觉效果会有提升body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }但有一点需要注意text-rendering: optimizeLegibility在部分Linux浏览器上会降低文本渲染性能尤其是文本量大的页面。如果Linux用户反馈页面滚动卡顿优先检查是不是这个属性引起的。4.2 布局错位与图片溢出问题我做博客开发的时候最常遇到、也最容易被忽视的一个问题是图片溢出容器。文章里插入了一张宽度超过容器宽度的大图结果图片直接冲破卡片边界把布局硬生生撑开了。解决方法有两个层面。第一层是CSS层面给所有图片加上最大宽度限制.post-content img, .post-card img { max-width: 100%; height: auto; border-radius: 6px; }max-width: 100%保证图片不会超出父容器height: auto保证图片等比例缩放。这个组合是无脑安全方案但有一个隐患——如果原图本身就是不同比例的所有图片在容器里会以不同的高度显示列表页的卡片高度就会参差不齐。第二层是在这个基础上做进一步优化为图片容器设定统一的宽高比比如aspect-ratio: 16 / 9再用object-fit: cover裁切。这样所有封面图的高度统一列表页看起来整齐划一。object-fit的兼容性在现代浏览器都已经很好了可以放心使用.post-card img { width: 100%; height: 200px; object-fit: cover; }另一个容易踩的坑是长URL或者连续英文字符串导致的横向溢出。一长串没有空格的英文URL默认情况下不会被换行而是直接撑破容器。解决办法是在正文容器上加上断词规则.post-content { overflow-wrap: break-word; word-break: break-word; }overflow-wrap: break-word允许在单词内部断行word-break: break-word则是为了兼容旧版浏览器。加上这两行长链接、长代码串都能正常在容器内换行不会破坏页面布局。4.3 响应式布局的隐形陷阱与兼容性经验响应式布局里最容易踩的隐性陷阱就是子项的min-width: 0问题这个BUG的隐蔽之处在于它不报错、不闪退纯靠肉眼观察。我在前面布局部分提到过比如Grid父容器设了两列子项里放了一串很长的内容默认情况下子项的min-width是auto它会用内容的原始宽度去撑父容器导致整体布局变形。排查方式很简单浏览器开发者工具选中出问题的元素看它的计算宽度是否超过了父容器再试着加上min-width: 0看看是否恢复。如果恢复说明是内容溢出导致的布局撑破。这个习惯一旦养成处理类似的布局问题会快很多。兼容性方面我使用CSS变量配合备用值做了一个相对稳妥的方案:root { --primary-color: #2c3e50; --accent-color: #e67e22; } .footer-link { color: #2c3e50; color: var(--primary-color); }重复声明两次第一行写死具体值第二行写CSS变量。支持CSS变量的浏览器会使用第二行变量值不支持的旧浏览器会忽略第二行并回退到第一行具体值。这种渐进增强的写法虽然代码上看着有些重复但换来了全端一致的显示效果。在实际兼容测试中我习惯用的基准是Chrome、Safari、Firefox的最新两个大版本加上iOS Safari和Android Chrome各一个版本。覆盖了日常用户的主力阵容。IE系列的兼容成本在这个年代已经不划算也不用再多花心思。5. 源码使用指南与后续扩展建议5.1 目录结构说明与本地预览方法整套源码的目录结构非常简洁我会建议所有准备自己写博客的人不管代码多少都遵循结构目录分离、样式全局统一、逻辑独立收敛的组织方式personal-blog/ ├── index.html # 首页文章列表 ├── article.html # 文章详情页模板 ├── css/ │ └── style.css # 全站统一样式 └── js/ └── main.js # 交互逻辑回到顶部、滚动加载等本地预览可以直接双击HTML文件在浏览器中打开也可以启动一个简单的本地静态服务避免将来接入接口后出现本地文件跨域报错# 用Python起一个端口为8000的静态服务 cd personal-blog python3 -m http.server 8000然后浏览器访问http://localhost:8000即可实时预览效果。代码修改后直接刷新页面就能看到更新不用重新构建不用配置热更新纯粹的前端静态开发体验也是很多人放弃框架回归原始手写的一个重要原因。5.2 从静态页面到完整博客的路径选择这套源码本身是一个纯静态的展示型页面。如果你希望它升级成一个完整的、支持后台管理的博客系统有两条路线可以选择。第一条是继续走纯静态路线把HTML作为模板配合API接口动态加载数据。比如用前端fetch请求一个JSON文件读取文章列表和正文内容动态渲染到页面上。JSON文件放文章数据页面放展示逻辑既保留了静态页面性能好的优势又让内容更新变得简单起来。这种方式非常适合个人博客这种更新频率不高的场景。第二条是直接接入Headless CMS服务把内容和前端完全分离。在后台写文章前端通过API接口拉取数据并渲染。这套源码的结构本身就是按数据与展示分离的思路设计的所以接入CMS的时候不需要大改页面骨架只需把静态的post-card部分改成动态循环渲染即可。我更推荐的做法是第一阶段的纯静态JSON方案因为个人博客的核心价值是持续输出内容而不是维护一套复杂的后台系统能少一个依赖就少一个依赖。当内容积累到一定量级、确实需要后台管理时再引入CMS过渡成本也不高。5.3 基于这套源码的深度定制方向如果你打算基于这套源码做深度定制根据自己的偏好可以往以下几个方向演进暗色模式使用prefers-color-scheme媒体查询检测系统主题偏好配合CSS变量在明暗色之间自动切换。只需要把颜色值相关的变量重新定义一整套暗色方案工作量不大效果却非常出彩。文章搜索纯前端可以用一个简单的词频匹配算法在标题、摘要、标签中匹配关键词并高亮展示不需要引入Elasticsearch这种重型组件。分享功能利用浏览器原生navigator.share接口一行代码唤起系统分享面板比接各种第三方分享SDK轻量得多。PWA离线支持写一个简单的manifest.json加一个service-worker.js博客在手机端就能添加到主屏幕获得类似原生App的体验还支持离线阅读。上面这些方向都是在现有源码基础上渐进叠加不会破坏已有的语义结构和视觉风格。写在最后前阵子回看这套博客源码的迭代记录从第一版粗糙的表格布局到现在这套相对成熟的Grid响应式架构每一步都有踩坑和修整的痕迹。我做这套纯粹的个人博客源码最大的收获是对HTML和CSS有了更深层的理解——用框架的时候很多问题被隐藏了回到基础手写反而看清了很多底层机制。如果你也正在学习网页设计我的建议是不要嫌手写麻烦。真正静下心来把一个页面从结构到样式、从桌面端到移动端完整地写一遍你对网页底层的理解会扎实很多。这套源码可以当作一个起步参考把整个页面下载下来打开,对照着代码一点一点改颜色、调整间距、增加模块慢慢就会变成你自己的东西。博客的妙处就在于此——代码是死的但对代码的理解是活的是可以不断生长的。本文还有配套的精品资源点击获取