数组筛选与处理实战：从基础API到底层机制
2026/9/26 6:04:48
简介：一套面向博客新手与前端初学者的个人博客网页设计源码，可直接运行，适合用来展示作品、随笔或生活记录，也可作为网页结构学习的入门范例。压缩包共三十个文件，大小仅三十七KB，核心包含一个页面结构文件、一个样式表，以及二十七张GIF动图和一张JPG照片，分别承担动态装饰、头像、背景等视觉呈现；目录按网页、样式、图片分层组织，便于对照理解内容与样式分离的设计思路。已有三千八百一十四人学习下载，热度可观。源码中能看到页面头部、导航、文章区、侧边栏等区域的标签划分，也能通过样式表学习选择器、盒模型、浮动和定位的常见用法。对入门者而言，这份资源量级小、结构清晰，既能快速改造成个人主页，也能作为理解网页渲染机制与静态资源引用的直观范例。
1. 个人博客网页设计html源码到底能解决什么：从作业到独立站点
个人博客网页设计html源码，听起来是下载一个压缩包、解压双击就能在浏览器里看到页面的东西。实际上下载过的人都知道：一半源码卡在打不开，另一半卡在改不动——要么图片路径全裂，要么手机上一片密集小字，要么本地跑得好好的，传到服务器就白屏。这类源码通常就是一套由html+css+js写成的静态页面，不依赖后台数据库，正好适合个人博客起步，也常见于网页设计作业或课程设计。它能解决的是：让你在不碰后端的情况下，用一周时间把一个能发布、能持续写文章的个人博客跑起来。适合正在学前端、交设计作业的在校生，以及想低成本做一个独立博客、不打算买服务器的从业者。
2. 先把博客骨架搭起来：用HTML+CSS写好首屏与布局
拿到一套个人博客源码，第一步不是急着看特效，而是确认骨架长什么样。静态博客源码无论怎么包装，核心都是一个index.html带着若干配套文件。你先把这个文件读明白，后面的改动才有章法。
2.1 一个不加JS也能跑的index.html骨架
个人博客的页面结构其实极其固定：顶部是站点名称加导航，中间是文章内容区，旁边可以有分类或标签栏，底部是版权信息。下面的代码是一份最朴素的骨架，先去掉了所有装饰性样式，方便你看清结构。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="我的个人博客，记录前端学习与日常踩坑"> <title>我的个人博客</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <a href="index.html" class="logo">我的博客</a> <nav class="site-nav"> <a href="index.html">首页</a> <a href="archive.html">归档</a> <a href="about.html">关于</a> </nav> </header> <main class="content"> <article class="post"> <h1>第一篇文章标题</h1> <p class="post-meta">发布于 2025-01-01 · 预计阅读 5 分钟</p> <p>这里是文章正文区域。先放一段内容把页面撑起来，后面再逐步加入列表和分页。</p> </article> </main> <aside class="sidebar"> <h2>分类</h2> <ul> <li><a href="#">前端</a></li> <li><a href="#">随笔</a></li> </ul> </aside> <footer class="site-footer"> <p>© 2025 我的博客</p> </footer> </body> </html>这段 HTML 的作用是把页面信息结构立住：header里放导航，main里放文章正文，aside放辅助栏目，footer做底部信息。用语义化标签而不是一堆div，原因是搜索引擎和屏幕阅读器都能更快识别出哪个区域是正文。
几个关键参数值得记住。lang="zh-cn"告诉浏览器页面是简体中文，配合meta charset="utf-8"能解决九成中文乱码问题；meta name="viewport"里的width=device-width, initial-scale=1是页面在手机上不缩成小字的底线，删掉它等于自废移动端。link rel="stylesheet" href="css/style.css"说明样式独立在 css 目录下，这也是后面改动的基础。
2.2 用CSS栅格把页面撑起来：变量与断点参数
结构有了，页面还是竖排一列，并不好看。个人博客最常见的两栏布局——左侧正文、右侧侧边栏，我用 CSS Grid 来做，因为它对整体区域的排布比 Flexbox 更直观。
/* style.css —— 博客两栏布局示例 */ :root { --content-width: 1100px; --sidebar-width: 300px; --gap: 24px; --text-color: #333; --bg-color: #fff; --primary-color: #2563eb; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-color); color: var(--text-color); font: 16px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif; } .page-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); grid-template-areas: "header header" "main sidebar" "footer footer"; gap: var(--gap); max-width: var(--content-width); margin: 0 auto; padding: 0 20px; }CSS 变量定义在:root里，相当于全站的设计令牌。你要换主色，只需要改--primary-color一个地方，不用满文件找#2563eb。真做个人博客时，我一般会把常用的间距、圆角、阴影也定义成变量，后边写页面能少很多重复代码。
grid-template-areas是这段代码的核心参数，它用 ASCII 式的命名把页面切成三个区域：第一行两个 header，第二行左边 main 右边 sidebar，第三行 footer 占满整行。minmax(0, 1fr)必须写，不写的话当正文里有一张很长的代码图片时，栅格会被内容撑破，出现横向滚动条。gap: var(--gap)控制栏目间距，max-width: var(--content-width)保证宽屏下内容不铺满整个显示器。
2.3 源码文件的组织方式：单文件起步与拆三个文件的差别
很多 html5 网页设计作业用的是一个 html 文件里内联 style 和 script，交作业确实方便，老师打开就能看。但如果打算长期更新博客，我会强烈建议拆文件。下面是一份能直接发布到任意静态托管的文件结构：
personal-blog/ ├── index.html ├── archive.html ├── about.html ├── css/ │ ├── style.css │ └── highlight.css ├── js/ │ └── main.js └── images/ ├── avatar.jpg └── header-bg.jpg# 在项目目录下执行，快速建好骨架 mkdir -p personal-blog/{css,js,images} cd personal-blog touch index.html css/style.css js/main.js拆文件的理由很实际：浏览器会缓存独立的 css 和 js 文件，你修改样式后访客只需刷新一次，而单文件方案每次改动都让访问者重新下载整个页面。另外，多页面博客的archive.html和about.html共用同一个style.css，样式写一处就能三页生效。拆完之后，index.html里只需要保留结构和内容，代码可读性也顺带提高了。
3. 让源码有“博客感”：JS交互与阅读体验的三个补全
纯静态的 HTML 博客不是不能用，但现代读者对“博客感”是有预期的：滚动时导航要跟着走，读到一半能看到阅读进度，点击返回顶部要顺滑，代码块要带高亮。这些全部可以靠原生 JavaScript 实现，不需要引入框架。
3.1 滚动导航与文章目录高亮的实现
当一篇文章足够长，读者滚动到不同章节时，侧边栏的目录应该跟着高亮当前位置。最可靠的方案是用IntersectionObserver观察各个标题，而不是频繁读取scrollTop再做大小比较。
// main.js —— 目录高亮 const navLinks = document.querySelectorAll('.sidebar a[href^="#"]'); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { navLinks.forEach((link) => link.classList.remove('active')); const activeLink = document.querySelector( `.sidebar a[href="#${entry.target.id}"]` ); if (activeLink) activeLink.classList.add('active'); } }); }, { rootMargin: "-10% 0px -70% 0px", threshold: 0 } ); document.querySelectorAll('h2[id], h3[id]').forEach((heading) => { observer.observe(heading); });rootMargin是这里最值得调的参数。-10% 0px -70% 0px表示观察区域是视口从顶部往下 10% 到 30% 的窄带，当标题落进这个窄带时才认为“当前章节”是它。这个值可以根据你页面顶部是否有固定导航来调整，如果导航高度是 60px，可以改成"-60px 0px -70% 0px"。threshold: 0表示只要标题有一像素进入观察带就触发回调，响应比滚动监听更及时。
3.2 阅读进度条与返回顶部按钮的配合
阅读进度条是个人博客里性价比最高的小交互，它告诉读者“这篇文章有多长，你读到哪了”。实现思路是监听滚动，计算已滚距离占可滚总距离的百分比。
// 阅读进度条 const progressBar = document.querySelector('.progress-bar'); let ticking = false; function updateProgress() { const totalScroll = document.documentElement.scrollHeight - window.innerHeight; const percent = totalScroll > 0 ? (window.scrollY / totalScroll) * 100 : 0; progressBar.style.width = percent + '%'; ticking = false; } window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(updateProgress); ticking = true; } }); // 返回顶部按钮 const backTop = document.querySelector('.back-top'); backTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });这里有个新手常踩的坑：scroll事件触发频率极高，如果直接在回调里写progressBar.style.width，会大量触发重排，长文章页面上拖动滚动条时明显掉帧。用requestAnimationFrame把赋值操作合并到下一帧，滚动立刻顺滑。behavior: 'smooth'是返回顶部按钮的必填参数，不加它页面会瞬间跳到顶部，很突兀。进度条的height我一般设在 3px 到 4px，太粗会盖住正文首行，太细在低分辨率屏幕上几乎看不见。
3.3 文章内容高亮与图片懒加载：接入第三方库的取舍
写技术博客，代码高亮几乎是刚需。最常见做法是引入 highlight.js 或 Prism.js，但要注意接入方式。很多 html+css+js 网页设计源码直接用了公共 CDN 链接，国内访问时不稳定，页面加载到一半卡住，代码块全是黑底白字。
<!-- 本地化 highlight.js 的引入方式 --> <link rel="stylesheet" href="js/highlight/styles/github.min.css"> <script src="js/highlight/highlight.min.js"></script> <script>hljs.highlightAll();</script><!-- 图片懒加载：只改img标签属性即可 --> <img src="images/screenshot.png" alt="页面截图" loading="lazy" width="800" height="450">把highlight.min.js和主题 css 下载到项目本地，再按上面方式引入。hljs.highlightAll()会自动查找页面里所有<pre><code>块并高亮。如果博客文章都是自己写的，也可以只保留用到的语言，重新构建一个更小的包，把体积从 200KB 降到 60KB 左右。
图片懒加载现在不需要写 JavaScript，浏览器原生支持loading="lazy"。lazy的取值还有eager，表示首屏图片立即加载，首页 logo 和头图不要设懒加载，否则首次绘制会闪一下。width和height也必须写，浏览器需要预留图片空间，否则图片加载完成后页面高度突然变化，阅读位置会跳动。
4. 个人博客源码上线前最容易踩的4个坑：乱码、路径、移动端与白屏
这部分全是血泪经验。我自己经手过不少下载来的博客源码，也帮人排查过问题，发现翻车点高度集中。把它们列出来，你改源码时可以一条条对照检查。
4.1 中文乱码：meta声明和文件编码不一致
现象：页面打开后所有中文变成“锟斤拷”或问号方块，但网页源码里看字符又没问题。
原因：浏览器解析 HTML 时，先看meta charset声明的编码去解码内容。当这个声明缺失，或声明的编码与实际文件的保存编码不一致时，就会乱码。最常见的是文件用 UTF-8 保存，但声明写成了gb2312，或者反过来。
解决：打开 HTML 文件，确认<head>里的meta charset与编辑器右下角的编码一致。统一用 UTF-8，这是兼容性最好的方案。还要注意，如果你的 html 源码是从某个工具或模板里复制出来的，复制时编码可能被隐式转成 GBK，保存前多看一眼编码状态。用 VSCode 可以在底部状态栏直接点击编码名切换，重新保存后乱码问题通常立刻消失。
提示：把
<meta charset="utf-8">排在<title>前面，且必须在<head>最前面几行。有些浏览器在遇到 title 之后才读到 meta 声明，就会用默认编码抢先解码，同样造成乱码。
4.2 图片全部裂掉：相对路径与部署路径错位
现象：本地双击打开 index.html，页面排版正常图片正常；上传到服务器或 GitHub Pages 后，图片路径带../的全部 404。
原因：下载来的源码里写的是相对路径，比如background-image: url(../images/bg.jpg)。本地预览时，css 文件在css/子目录下，../images可以正确回到上级目录找到图片。部署后如果项目放在子路径，或者托管平台的目录层级变化，这个相对路径就失效了。
解决：写路径前先问一句“这个页面文件最终放在哪一层”。所有页面里的图片引用，建议以网站根目录为基准写绝对路径，比如/images/bg.jpg；如果部署后可能挂在/blog/这样的子路径，那就统一用相对路径并且保证目录结构不被破坏。部署前先跑一遍目录树，确认 css、js、images 的相对位置和本地一致。排查时打开开发者工具 Network 面板，红色 404 请求里能直接看到浏览器实际请求的 URL，比对它就能定位是路径层级多了一层还是少了一层。
4.3 手机上一片小字：缺少viewport设置
现象：用手机打开博客，整体页面缩成一张小图，字看不清，双击才能放大阅读，体验极差。
原因：页面缺失<meta name="viewport" content="width=device-width, initial-scale=1">。没有这句话，移动浏览器默认用 980px 宽度的视口渲染页面，再把页面等比缩小塞进手机屏。页面里的所有字体同时被缩小，所以看起来像“蚂蚁字”。
解决：在<head>里补上 viewport 标签。如果是从旧模板拿来的源码，还要检查有没有user-scalable=no或maximum-scale=1这种禁止缩放的写法，出于无障碍考虑，建议去掉，让用户可以捏合缩放。补上 viewport 之后，再确认布局是不是响应式的——个人博客最简单的验证是：把浏览器窗口拉到 360px 宽，正文和侧边栏如果还挤在两列，就需要加一个媒体查询，把侧边栏移到正文下方。
4.4 本地预览一切正常，部署后白屏
现象：双击 index.html，页面完整展示；同样的文件部署到服务器上，打开只有空白页或半个页面，控制台一堆红色报错。
原因：本地用file://协议打开文件时，浏览器对资源加载的限制比较宽松。部署到服务器后走http://或https://协议，浏览器对脚本和跨域资源的限制变严格。最常见是两种情况：一是 js 文件加载路径是绝对路径/js/main.js，而项目部署在二级目录，请求落到了域名根路径导致 404；二是源码里某些脚本用到了document.write或直接操作 DOM，但脚本加载顺序在 DOM 节点之前，执行时找不到元素直接抛错中断。
解决：部署后第一时间打开浏览器控制台，看 Network 面板里有没有资源 404，再看 Console 面板里第一条报错信息。404 就按路径问题处理，DOM 找不到就检查脚本放到了</body>之前，或者给脚本加defer属性。我个人的习惯是，任何源码部署前先在本地起一个静态服务器模拟线上环境：
# 在项目根目录执行，模拟线上http环境 python3 -m http.server 8080然后用http://localhost:8080访问页面，走一遍部署流程。如果这个环境正常而线上白屏，问题基本锁定在服务器目录配置，和代码无关。
4.5 排查源码问题前先做的三件事
遇到问题别急着改代码，先做三件事：第一，打开浏览器开发者工具按 F12，切换到 Console 面板，所有红色报错都要先读一遍；第二，Network 面板刷新页面，按状态码排序，重点看 404 和 500；第三，确认浏览器缓存在排除问题，因为本地刷新经常加载到旧缓存文件，让人误以为代码没改对。
提示：个人博客源码排查时，不要同时改多个地方。一次只改一个变量、一个路径、一个标签，改完立即刷新验证。三处同时修正会让问题相互掩盖，最终无法定位是哪一处起了作用。
5. 源码改到最后一步：响应式排版体检与首屏加载优化
源码功能完整了，布局也符合预期，接下来要做的是发布前的体检。这一步很多人忽略，恰恰是“能看”和“能用”的分界线。
用开发者工具的设备模拟器，分别切到 320px、375px、768px 和 1280px 四种宽度做一遍横纵检查。重点不是看页面有没有变形，而是看表格和代码块有没有溢出。下面是一份我每次上线前必过的检查表：
| 检查项 | 合格标准 | 不合格时的参考调整 |
|---|---|---|
| 横向滚动 | 任何宽度下都不出现横向滚动条 | 给pre和table加overflow-x: auto |
| 字体可读 | 320px 宽度下正文字号不小于 14px | 媒体查询里调整html字号 |
| 点击目标 | 导航链接点击区域不小于 40px 高 | 给a和button加padding |
| 图片比例 | 所有图片无拉伸变形、无位移跳动 | 补width和height属性 |
首屏加载优化里最省力的一招，是管住字体和图片。很多人为了让博客显得精致，用了好几套网络字体，但一个字体文件动辄几百 KB，会拖垮整站首屏。保底做法是给字体加载加font-display: swap：
@font-face { font-family: "BlogFont"; src: url("../fonts/BlogFont.woff2") format("woff2"); font-display: swap; }font-display: swap的含义是让浏览器先用系统字体渲染文字，等自定义字体下载完成后再替换。这样读者感受到的是“稍微变了个字体”，而不是“页面卡住 3 秒空白”。图片方面，博客文章不可能每张都压缩得完美，但至少要保证第一屏内不要出现超过 200KB 的图片，超过的用工具压一遍，肉眼几乎看不出差别。
我现在的习惯是每套源码上线前都固定跑一遍上述流程：先起本地服务器模拟线上环境，再做四档宽度响应式体检，最后清掉缓存重新加载一次看首屏时间。这三个动作做完，个人博客网页设计 html 源码才真正从“能打开”变成了“能给别人看”。希望帮到你。
本文还有配套的精品资源，点击获取