简介：以HTML5和CSS3为核心构建的个人博客网站完整工程源码，适合前端初学者、网页设计课程作业参考者及需要快速搭建个人博客的开发者。项目覆盖响应式布局、语义化标签、CSS3动画过渡和交互脚本等常见知识点，可直接运行并支持二次修改。
压缩包共324个文件，大小约16.03MB。其中33个html页面构成博客主体结构，25个css样式文件包含全局样式及Bootstrap相关样式，23个js脚本负责交互与数据请求，126张jpg与68张png等图片素材用于文章配图与界面展示，另附字体、图标和少量PHP文件，整体目录清晰，便于按模块查找。目前已有335人学习下载。
项目融合了HTML5离线存储、语义化标签与CSS3媒体查询、弹性布局等特性，并引入Bootstrap辅助响应式设计，对理解移动端适配、页面模块划分和静态资源组织方式都有直接参考价值。跟随源码梳理一遍样式与脚本实现，能较快掌握从页面骨架搭建到视觉呈现的完整设计思路，适合作为个人博客开发的起步样板。
1. 为什么一份作业型HTML5博客源码，值得拆开看
前端这个圈子里，能默写 flex 布局的人很多，能独立把一个博客从零搭到上线的人比例没那么高。这个基于 HTML5+CSS3 的个人博客网站设计与实现源码包，从文件名就能看出是典型的作业型项目：压缩包里有bootstrap.min.css和bootstrap.css，目录名还留着YxwBlog-master的痕迹。别因为它带着“设计与实现”几个字就觉得低一档，拆开看，它把 HTML5 语义化结构、CSS3 动画参数、响应式断点、离线缓存这几样现代前端的看家功夫都过了一遍。新手可以拿它当练手模板，熟手也能从动效延迟、填充模式这类细节里找回一点写项目的直觉。
2. 从YxwBlog-master看目录骨架与HTML5语义化布局
拿到压缩包先别急着双击 index.html。先看文件结构：这类源码通常解压后能看到index.html、css/、js/、img/，而压缩包里同时出现bootstrap.css和bootstrap.min.css，说明项目实际引入了 Bootstrap。这两个文件的区别值得多说一句：.min.css是压缩版，去掉了换行和注释，体积小、加载快；而bootstrap.css保留了可读格式，是在浏览器里定位样式问题时用的。我一般的习惯是开发期引用原版，发布前全部切到.min版本。
2.1 语义化标签：博客的骨架不只是div
早期博客模板满屏都是<div id="header">、<div class="content">，这类结构对浏览器和搜索引擎都不够友好。HTML5 引入的<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>这组语义化标签，把页面的区域职责直接写进标签名里：导航就是<nav>，正文就是<article>，侧栏就是<aside>。
对博客来说，<article>的价值最大。搜索引擎在提取页面正文时，看到<article>会比看到一串嵌套<div>更快锁定核心内容；屏幕阅读器也可以让视障用户直接跳转到文章主体，而不是从头朗读一遍导航菜单。这是纯用<div>布局很难做到的。骨架代码通常长这样：
<body> <header class="site-header"> <nav aria-label="主导航"> <a href="/">首页</a> <a href="/archive.html">归档</a> <a href="/about.html">关于</a> </nav> </header> <main class="container"> <section class="row"> <article class="col-md-8 col-lg-8"> <h1>HTML5 语义化标签到底改变了什么</h1> <p>文章内容……</p> </article> <aside class="col-md-4 col-lg-4"> <h2>作者信息</h2> <p>这里放头像和标签云</p> </aside> </section> </main> <footer class="site-footer"> <p>© 2024 个人博客</p> </footer> </body>这段结构里每层都有明确职责：<main>告诉浏览器页面的主体内容在哪一块，<section class="row">是 Bootstrap 的栅格行，<article>和<aside>在里面做左右分栏。aria-label是给读屏器用的可访问性标记，对只有一个<nav>的页面不是必须的，但如果有多个<nav>，就需要用它区分“主导航”和“页脚导航”。
2.2 栅格系统：三行代码搭出页面骨架
这个项目引入 Bootstrap 的核心原因，就是它自带的栅格系统。栅格把页面宽度横向切成 12 列，所有列的宽度总和不超过 12 就能排在同一行。col-md-8表示在中等屏幕（一般是平板横屏及以上）下占 8 列，col-lg-4表示在大屏下占 4 列，剩下 4 列分给侧栏。
代码里同时写了col-md-8和col-lg-8，这在 Bootstrap 里是允许的：小屏默认单列，中等屏按 8:4 分栏，大屏继续保持这个比例。如果你想在大屏上让侧栏更窄，可以写成col-md-8 col-lg-9。栅格外层的.container会按断点自动设置最大宽度，比如 768px 断点以下是全宽，以上逐级变成 720px、960px、1140px。这里有个容易忽略的点：.container本身有padding，如果页面背景要做全宽通栏，要把它放到.container外面。
3. 博客里的多媒体与CSS3动效怎么落地
博客页面最容易显得死板，问题通常出在两处：一是没有多媒体元素，二是动效只有 hover 变色。HTML5 在这两项上给了足够的原生能力，不需要再依赖 Flash 或复杂的 jQuery 插件。
3.1 用video标签做博客头图视频，附倍速控制
HTML5 的<video>标签把视频播放变成了浏览器的内置能力，controls属性直接带出播放条，poster指定视频加载前的封面图。写视频源时，最好同时准备 MP4 和 WebM 两种格式，因为不同浏览器对编码格式的支持不一样。写这样一段：
<video id="introVideo" controls preload="metadata" poster="img/poster.jpg"> <source src="media/intro-720.mp4" type="video/mp4"> <source src="media/intro-720.webm" type="video/webm"> 你的浏览器不支持 HTML5 video，请升级浏览器。 </video> <div> <button><canvas id="bgCanvas"></canvas> <script> const canvas = document.querySelector('#bgCanvas'); const ctx = canvas.getContext('2d'); canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; function drawFrame(t) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = `hsl(${t / 20 % 360}, 80%, 60%)`; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 30 + Math.sin(t / 300) * 15, 0, Math.PI * 2); ctx.fill(); requestAnimationFrame(drawFrame); } requestAnimationFrame(drawFrame); </script>getContext('2d')拿到绘图上下文，所有绘制指令都通过它发出；clearRect每帧清空画布，避免上一帧图形残留。requestAnimationFrame的帧率由浏览器根据屏幕刷新率决定，比setInterval定时器更平滑也更省电。注意canvas.width和 CSS 宽度不是一回事，设置 CSS 宽度只影响显示大小，绘图分辨率由属性决定，响应式布局里要记得用canvas.offsetWidth同步实际像素。
3.3 CSS3动画延迟、执行次数与逆向播放的参数配合
CSS3 动画真正难的不是写@keyframes，而是理解执行时序。很多课程会把“css3动画延迟和完成后状态的保持”单独拆成一节，就是因为这两个参数组合起来很容易翻车。
先看延迟：animation-delay让动画等一段时间再执行，但它只延迟动画的开始，不保证动画结束后的状态。看这段代码：
.article-card { opacity: 0; transform: translateY(24px); animation: floatIn .6s ease-out forwards; animation-delay: .15s; } .article-card:nth-child(2) { animation-delay: .3s; } .article-card:nth-child(3) { animation-delay: .45s; } @keyframes floatIn { to { opacity: 1; transform: translateY(0); } }forwards是完状态保持的关键：动画结束后，元素保留最后一帧的样式。如果不写，动画播完元素会跳回初始状态，opacity 回到 0，卡片直接消失。这个属性值的作用范围只覆盖自身，所以延迟阶段元素仍然保持opacity: 0的初值。这样三张卡片会从 0.15s 开始依次浮入，形成轻微的阶梯感。
再看执行次数与方向。animation-iteration-count控制播放几遍，animation-direction控制方向，两者配合能做出很多看似复杂的往复效果：
.switch-line { animation: pulse 1s ease-in-out 3 alternate; } @keyframes pulse { from { background-color: #4a90d9; } to { background-color: #ff7f50; } }这里3 alternate的含义是：正向播放 3 次，每次结束后反向播放一次，最终呈现 前→后→前 的交替效果。如果把alternate换成reverse，动画会从to那一帧开始向from播放。参数之间的关系可以这样整理：
| 参数 | 取值示例 | 实际效果 |
|---|---|---|
animation-delay | .15s | 动画开始前等待 0.15 秒 |
animation-fill-mode | forwards | 结束后保留最后一帧样式 |
animation-iteration-count | 3/infinite | 播放 3 次或无限循环 |
animation-direction | alternate | 奇数次正向，偶数次反向 |
animation-direction | reverse | 从to帧向from帧播放 |
需要提醒的是，动画结束后的“保持”效果只在animation-fill-mode生效期间存在。一旦你把元素改成display: none再显示，动画会重新执行，这不是 bug，而是初始化后的正常行为。
4. 断点设计：媒体查询与Flexbox/Grid的响应式配合
个人博客的访问场景比企业站更杂：有人用手机看，有人用平板，还有人在 2560px 宽的大屏上打开两个窗口。响应式不是“在不同尺寸里做三套页面”，而是同一套内容在不同断点下重新排列。
4.1 移动优先断点怎么选而不是抄
很多模板直接抄来 320px、768px、1024px 三个断点，结果在自己页面上要么内容提前换行，要么大屏上卡片被拉得不成比例。选断点之前，先把页面里最容易断行的元素找出来：标题字号、卡片宽度、侧栏宽度。我一般会在浏览器里拖动窗口，记录布局开始变难看的临界宽度，再围绕这些数值取整作为断点。常见的断点参数表如下：
| 断点区间 | 覆盖设备 | 常见布局策略 |
|---|---|---|
max-width: 575.98px | 手机竖屏 | 单列、隐藏次要侧栏 |
min-width: 576px和max-width: 767.98px | 手机横屏、小平板 | 两列卡片 |
min-width: 768px和max-width: 1199.98px | 平板、小笔记本 | 主栏+侧栏 |
min-width: 1200px | 桌面显示器 | 三列卡片、固定最大宽度 |
注意 767.98px 而不是 768px：这是为了避免在正好 768px 的屏幕上同时命中两个媒体查询导致样式冲突。用min-width写“向上适配”的规则，可以免掉一大部分边界值判断。
4.2 卡片流：原生Flexbox写法和Bootstrap类写法对照
博客首页最常见的就是卡片列表。用原生 Flexbox 实现时，核心是flex-wrap加flex-basis，写出来是这样：
.post-grid { display: flex; flex-wrap: wrap; gap: 16px; } .post-grid .post-item { flex: 1 1 100%; /* 小屏默认整行显示 */ } @media (min-width: 768px) { .post-grid .post-item { flex: 1 1 calc(50% - 16px); /* 两列卡片 */ } } @media (min-width: 1200px) { .post-grid .post-item { flex: 1 1 calc(33.3333% - 16px); /* 三列卡片 */ } }flex: 1 1 100%里的三个值分别是flex-grow、flex-shrink、flex-basis，意思是允许放大、允许缩小、基础宽度是 100%。每次断点切换，只改flex-basis就够，gap: 16px会自动参与宽度计算，所以卡片宽度要减去 16px 的间隙，否则最后一行会被挤到下一行。
如果你在源码里用了 Bootstrap 的栅格类，这段逻辑不用自己写。Bootstrap 的.row自带display: flex; flex-wrap: wrap;，里面的.col-md-6 .col-lg-4就等价于上面两段媒体查询：
<section class="row post-grid"> <article class="col-md-6 col-lg-4 post-item">文章卡片1</article> <article class="col-md-6 col-lg-4 post-item">文章卡片2</article> <article class="col-md-6 col-lg-4 post-item">文章卡片3</article> </section>二者的取舍在于：用框架类，代码短、断点统一，但框架自身的 CSS 会给你加很多用不到的样式；手写 Flexbox，加载量小，断点完全可控，但要自己维护边界。个人博客页面数量少，我偏向手写。
4.3 用Grid处理复杂区域，“伪响应式”的坑
Flexbox 适合一维排列，也就是一行或一列；如果博客首页是“头部大图 + 侧栏文章列表 + 底部推荐”这种块状分布，CSS Grid 的可读性更好：
.home-layout { display: grid; grid-template-columns: 1fr 300px; grid-template-areas: "hero aside" "posts aside" "footer aside"; gap: 24px; }grid-template-areas把区域位置直接命名出来，哪里放 hero、哪里放 posts 一目了然。配合媒体查询，在小屏上只需一句：
@media (max-width: 767.98px) { .home-layout { grid-template-columns: 1fr; grid-template-areas: "hero" "posts" "aside" "footer"; } }还有一个常见误区：只在 CSS 里写媒体查询，忘了<head>里的<meta name="viewport" content="width=device-width, initial-scale=1.0">。没有这个标签，手机浏览器会默认用 980px 的虚拟宽度渲染页面，媒体查询的断点永远不生效，这就是“伪响应式”。模板里如果没带这个 meta，要手动补上。
5. 用Web Storage和Service Worker做离线可用的博客
博客的体验上限，很多不在视觉而在“可用性”。信号差的地铁里打开一篇文章，如果白屏，再好看的设计也白搭。HTML5 的 Web Storage 和 Service Worker 提供了两条互补的离线能力路径。
5.1 Web Storage：记住主题与阅读记录
Web Storage 分为localStorage和sessionStorage，前者持久保存在本地，后者在标签页关闭后失效。对博客来说，最常见的用法是记住用户选择的主题：
// 进入页面时读取主题 const savedTheme = localStorage.getItem('blog-theme') || 'light'; document.documentElement.dataset.theme = savedTheme; // 切换主题时写入 document.querySelector('#switchTheme').addEventListener('click', () => { const current = document.documentElement.dataset.theme; const next = current === 'light' ? 'dark' : 'light'; document.documentElement.dataset.theme = next; localStorage.setItem('blog-theme', next); });无论当前是light还是dark，刷新后都会恢复到用户上次的选择。CSS 侧用属性选择器控制主题色：
html[data-theme="dark"] { --bg-color: #1e1e1e; --text-color: #d4d4d4; }注意 localStorage 只能存字符串，存对象时要JSON.stringify，取出来再JSON.parse。它解决的是“状态记忆”，不缓存任何页面资源，和 Service Worker 是两回事。
5.2 Service Worker：断网也能读历史文章
Service Worker 是浏览器后台的独立线程，可以拦截整个页面发出的网络请求。它的注册代码很简单：
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker .register('/sw.js') .then((reg) => console.log('SW 注册成功，作用域：', reg.scope)) .catch((err) => console.error('SW 注册失败', err)); }); }把这段代码放进main.js，同时创建一个/sw.js放在网站根目录。注意注册路径里的/sw.js是相对域名的绝对路径，URL 是https://你的域名/sw.js；如果博客部署在/blog/子目录下，就要写成register('/blog/sw.js')，否则会 404。
5.3 缓存策略别乱选：先看数据再决定
sw.js里最核心的是缓存策略，常见思路有这几种：
| 策略 | 请求顺序 | 适用场景 |
|---|---|---|
| 仅缓存 | 直接读缓存 | 不常变的静态资源 |
| 缓存优先 | 缓存，没有则走网络 | 图片、CSS、头像 |
| 网络优先 | 网络，失败则读缓存 | 文章页、接口数据 |
| 缓存后更新 | 先给缓存，再拿网络结果覆盖缓存 | 博客正文、首页 |
我一般会采用“缓存后更新”来缓存博客文章，体验最好：用户先看到上一次的缓存内容，网络返回新内容后自动覆盖。实现如下：
const CACHE_NAME = 'blog-cache-v1'; self.addEventListener('install', (event) => { self.skipWaiting(); }); self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((keys) => Promise.all( keys .filter((key) => key !== CACHE_NAME) .map((key) => caches.delete(key)) ) ) ); self.clients.claim(); }); self.addEventListener('fetch', (event) => { const request = event.request; if (request.method !== 'GET') return; event.respondWith( caches.match(request).then((cached) => { const network = fetch(request) .then((res) => { if (res && res.status === 200) { const clone = res.clone(); caches.open(CACHE_NAME).then((cache) => cache.put(request, clone)); } return res; }) .catch(() => cached); return cached || network; }) ); });install事件里skipWaiting()让新版本 Service Worker 立即激活，而不是等所有页面关闭后才生效；activate里清理旧版缓存。fetch事件里先caches.match查缓存，同时用fetch(request)发起真实请求，成功后用res.clone()存入缓存。之所以要clone()，是因为响应流只能使用一次，直接存进缓存再返回给页面会让请求被切断。
一个小坑是：caches.put不能缓存 chrome-extension 协议或chrome://开头的请求，常见于本地调试时服务栏控制台报错，不影响正式环境。
5.4 离线状态提示与网络感知
Service Worker 做完之后，页面上可以加一个状态提示：
window.addEventListener('offline', () => { document.querySelector('#networkStatus').textContent = '当前处于离线状态，正在展示缓存内容'; }); window.addEventListener('online', () => { document.querySelector('#networkStatus').textContent = ''; });offline和online是浏览器原生事件，navigator.onLine可以读取当前状态。提示文案不必做弹窗，放在文章页顶部一行不出格的小条就够了。
6. 上线前用半小时做一轮“白屏排错”
部署到服务器之后最常见的场景是：明明本地打开正常，线上网址访问却是白屏。别急着改代码，按排查顺序走一遍，大多数问题半小时内定位。
6.1 先查这五个位置
| 序号 | 排查对象 | 常见的失败原因 |
|---|---|---|
| 1 | 控制台 Network 面板 | bootstrap.min.css404，说明 CSS 路径写错 |
| 2 | 页面源码里的资源路径 | 用了以/开头的绝对路径，部署在子目录时失效 |
| 3 | JS 是否有报错 | 在head里引用了 DOM 节点，浏览器还没解析到就执行 |
| 4 | <meta name="viewport">是否缺失 | 页面在手机端缩小显示，看起来像没做响应式 |
| 5 | 是否残留http://混合内容 | 页面是 HTTPS，但引用了 HTTP 资源，浏览器直接拦截 |
我一般先看 Network 面板里第一个红色请求，基本就是白屏源头。如果是 JS 在head里操作 DOM，把<script>移到</body>前，或加上defer属性。defer会等文档解析完后执行，不会阻塞页面渲染。
6.2 给文章页加一条阅读进度线
最后加一个低成本高感知的小交互：文章页顶部有一条横向进度线，随着滚动变长。实现逻辑不复杂：
<div id="reading-bar"></div> <style> #reading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #4a90d9; z-index: 99; } </style> <script> const bar = document.querySelector('#reading-bar'); window.addEventListener('scroll', () => { const doc = document.documentElement; const max = doc.scrollHeight - doc.clientHeight; if (max > 0) { const pct = Math.min(doc.scrollTop / max, 1); bar.style.width = (pct * 100) + '%'; } }, { passive: true }); </script>scrollTop是当前已滚动的距离，scrollHeight - clientHeight是最大可滚动距离，两者相除得到进度比例。Math.min(…, 1)防止过度滚动时超出 100%。max为 0 的情况出现在文章内容不足一屏时，直接跳过更新。{ passive: true }是告诉浏览器这个监听器不会调用preventDefault()，可以使用更高效的滚动手势处理。把这段放到文章页的底部，刷新页面，滚动一下就能看到顶部的蓝色进度线在跟着内容移动。
本文还有配套的精品资源，点击获取
