尧图网站建设 
简介这是一套面向网页设计初学者与个人博主的HTML博客主题源码适合希望快速搭建作品展示、日志记录类个人站点的用户无需从零起步即可理解页面结构与样式组织方式。压缩包共30个文件以27个gif装饰图、1张jpg头像图、1个html页面和1个css样式表为主整体约37KB图片资源承担页面分割线、菜单背景与图标等视觉元素html与css则分别负责内容骨架和布局美化。目前已有3820人学习下载热度较高。源码中index.html清晰呈现头部、导航、文章区与页脚等模块划分style.css通过类选择器、盒模型与浮动定位控制字体、间距和背景便于读者对照理解HTML结构如何与CSS样式配合进而掌握个人博客页面的搭建思路与常见布局技巧适合作为课程作业或练手项目的参考模板。1. 个人博客网页设计html源码从一份静态模板到能上线的个人站点很多人第一次想搭个人博客第一反应是去装 WordPress 或者 Hexo结果卡在环境、主题、插件冲突上折腾一晚上首页还是白屏。其实对绝大多数只想放文章、放简介、放几张图的个人站点来说一份结构干净的个人博客网页设计 html 源码就够了——它本质是一套纯静态的 HTML CSS JavaScript 文件双击就能在浏览器里打开改完文字直接丢到任意静态托管上就能访问。这份资源解决的就是「不想碰后端、不想配数据库、只想有个能看的博客」这个诉求适合前端刚入门想练手的人、想快速上线个人主页的独立开发者以及需要一份可改可拆的静态模板做二次开发的人。下面我按「这套源码长什么样、怎么改、怎么部署、坑在哪」的顺序拆一遍。2. 拆开这套 html 源码目录结构、页面组成与技术栈2.1 一份典型个人博客静态源码的文件构成拿到一份个人博客网页设计 html 源码先别急着改样式先看清楚它由哪些文件组成。常见的目录结构大致是这样blog-html/ ├── index.html # 首页文章列表 个人简介 ├── about.html # 关于我页面 ├── article.html # 文章详情页模板 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── style.css # 主样式 │ └── responsive.css # 移动端适配 ├── js/ │ ├── main.js # 交互逻辑导航、返回顶部等 │ └── theme.js # 主题切换可选 ├── images/ │ ├── avatar.jpg # 头像 │ └── banner.jpg # 首页大图 └── fonts/ # 图标字体或自定义字体这套结构是静态博客最通用的组织方式好处是每个页面职责单一改首页不会误伤文章页。判断一份源码值不值得用我一般先看三点index.html里有没有把内容写死成一大坨、CSS 是不是全塞在一个文件里、JS 有没有依赖一堆外部库。如果首页 HTML 超过 500 行且全是硬编码文章那后期维护会很痛苦如果 CSS 分了 reset / style / responsive 三层说明作者是有工程意识的改起来顺手。2.2 页面骨架从 doctype 到语义化标签打开index.html开头一定是文档类型声明和语言设置这是 HTML5 的标准起手式!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录前端学习与技术笔记 title我的博客 | 首页/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head body header classsite-header nav classnav a hrefindex.html classlogoMyBlog/a ul classnav-list lia hrefindex.html首页/a/li lia hrefabout.html关于/a/li /ul /nav /header main classcontent section classpost-list article classpost-item h2a hrefarticle.html第一篇文章标题/a/h2 p classpost-meta2024-01-01 · 前端/p p classpost-excerpt这里是文章摘要……/p /article /section /main footer classsite-footer p© 2024 MyBlog/p /footer /body /html这里有几个参数值得注意。langzh-CN影响浏览器对中文的字体渲染和拼写检查写成zh也能跑但不够规范。viewport那行是移动端适配的命门缺了它手机上打开会缩成一团。description是给搜索引擎看的写不写不影响显示但影响收录。语义化标签header / nav / main / article / footer不只是好看它决定了屏幕阅读器和搜索引擎怎么理解你的页面结构比满屏div强得多。2.3 样式与交互CSS 布局和 JS 增强分别管什么CSS 负责视觉JS 负责行为这条边界在静态博客里要守住。常见做法是 CSS 用 Flex 或 Grid 做布局JS 只处理导航折叠、返回顶部、主题切换这类增强功能。/* style.css 片段文章列表用 Grid 自适应 */ .post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 16px; }repeat(auto-fill, minmax(300px, 1fr))这行的意思是每列最小 300px能塞几列塞几列屏幕宽就多列、窄就单列不用写一堆媒体查询。gap控制卡片间距max-width加margin: 0 auto是经典的居中约束。// main.js 片段返回顶部按钮 const backTop document.querySelector(.back-top); window.addEventListener(scroll, () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 300是显示阈值意思是往下滚超过 300px 才出现按钮避免一进页面就挡视线。behavior: smooth让滚动有过渡去掉就是瞬间跳顶。这段逻辑不依赖任何库原生 JS 十几行搞定这也是静态源码的好处——没有构建步骤改完刷新就见效。3. 把模板改成自己的博客内容替换、样式定制与本地预览3.1 替换个人信息与文章内容的正确顺序改模板最忌讳东改一处西改一处最后自己都不知道改了啥。我一般按「先内容、后样式、再交互」的顺序来。第一步先把所有占位文字换掉站名、导航、头像、简介、文章标题和正文。用编辑器全局搜索MyBlog、第一篇文章标题这类占位词逐个替换。# 在项目根目录下先看看哪些文件里有占位文字 grep -rn MyBlog . --include*.html grep -rn 第一篇文章 . --include*.htmlgrep -rn的-r是递归子目录-n是显示行号--include限定只搜 HTML。先搜出来心里有数再动手改比盲改靠谱。文章内容如果只有一两篇直接写在 HTML 里没问题如果打算长期更新建议把文章抽成单独的 HTML 文件首页只留标题和摘要加链接这样首页不会越改越臃肿。3.2 配色、字体与响应式断点的调整样式定制集中在style.css顶部的变量区最省事。如果源码用了 CSS 变量改几个值就能换整体风格:root { --primary-color: #2c3e50; /* 主色导航和标题 */ --accent-color: #3498db; /* 强调色链接和按钮 */ --text-color: #333; /* 正文颜色 */ --bg-color: #fff; /* 背景色 */ --font-family: PingFang SC, Microsoft YaHei, sans-serif; }改--primary-color就能整体换色调不用一个个找。字体那行把中文字体放前面是因为中文字体文件大优先用系统自带的能省加载时间。响应式断点一般在responsive.css里常见是 768px 和 480px 两档media (max-width: 768px) { .nav-list { display: none; } /* 移动端隐藏横向导航 */ .nav-toggle { display: block; } /* 显示汉堡菜单按钮 */ .post-list { grid-template-columns: 1fr; } /* 单列 */ }max-width: 768px表示屏幕宽度小于等于 768px 时生效这是平板竖屏和手机的常见分界。改断点前先在浏览器开发者工具里拖动模拟不同宽度看哪里开始挤再决定断点设多少别照抄别人的数值。3.3 本地起服务预览别直接双击文件双击 HTML 文件能看但有些功能会失效——比如用fetch加载本地 JSON、或者用了模块化typemodule的脚本file://协议下会被浏览器安全策略拦掉。正确做法是起一个本地静态服务# 方式一Python 自带装了 Python 就能用 python -m http.server 8000 # 方式二Node 环境用 npx npx serve . # 然后浏览器访问 http://localhost:8000python -m http.server 8000的8000是端口号被占用就换 8080。npx serve .里的.表示以当前目录为根。起服务后再预览路径引用、相对链接、AJAX 请求的行为才和线上一致这一步能提前暴露很多「本地好好的、上线就 404」的问题。4. 部署上线与常见坑排查4.1 静态托管的三种落地方式静态博客部署没有后端选择很多。常见做法有三类一是 GitHub Pages把代码推到仓库在设置里开启 Pages适合有 Git 习惯的人二是 Netlify / Vercel 这类拖拽文件夹或连仓库自动构建适合不想碰命令行的人三是自己的服务器把文件丢到 Nginx 的站点目录。# 推到 GitHub 后开启 Pages 的典型流程 git init git add . git commit -m init blog git branch -M main git remote add origin 你的仓库地址 git push -u origin main推上去之后在仓库 Settings → Pages 里选分支和目录等一两分钟就能拿到访问地址。注意index.html必须在选定的根目录下否则打开是 404。用 Nginx 的话把文件放到/var/www/blog配置里root指向这个目录、index写index.html即可。4.2 路径大小写、相对路径与缓存这三类翻车静态站点上线后最常见的问题就三类。第一类是路径大小写本地 Windows 不区分大小写Images/avatar.jpg和images/avatar.jpg都能打开传到 Linux 服务器就 404。血泪经验是文件名统一用小写引用时严格对齐。第二类是相对路径层级错乱文章页在子目录里引用 CSS 还写css/style.css就会找不到得写成../css/style.css。第三类是缓存改了 CSS 刷新没变化多半是浏览器缓存了旧文件可以在引用后面加版本号style.css?v2强制更新。4.3 避坑清单五条我踩过的具体记录现象手机打开页面横向溢出能左右拖动。原因某个元素宽度写死超过视口或者图片没设max-width: 100%。 解决全局加img { max-width: 100%; height: auto; }再检查有没有固定width: 1200px的容器。现象导航链接点了没反应地址栏变了但页面不动。原因href写成了#或者路径拼错指向了不存在的文件。 解决用开发者工具的 Network 面板看请求是不是 404逐个核对文件名和扩展名。现象中文字体在某些手机上变成宋体很难看。原因font-family只写了英文字体中文回退到系统默认。 解决把PingFang SC, Microsoft YaHei, Hiragino Sans GB这类中文字体排在前面。现象JS 报错Cannot read property of null交互全失效。原因脚本在 DOM 加载前执行querySelector拿不到元素。 解决把script放到/body前或用DOMContentLoaded包起来。现象部署后首页能开点进文章页样式全丢。原因文章页在子目录CSS 用了相对根路径的写法。 解决统一改成相对当前文件的路径或全部用绝对路径/css/style.css。5. 进阶把静态博客做得更像「自己的」5.1 用数据驱动文章列表减少重复劳动纯手写 HTML 的博客文章一多首页列表改起来就烦。进阶做法是把文章信息抽成一个 JSON 文件用 JS 渲染列表// posts.json [ { title: 第一篇文章, date: 2024-01-01, url: article.html, tag: 前端 } ]// 渲染列表 fetch(posts.json) .then(res res.json()) .then(posts { const list document.querySelector(.post-list); list.innerHTML posts.map(p article classpost-item h2a href${p.url}${p.title}/a/h2 p classpost-meta${p.date} · ${p.tag}/p /article ).join(); });这样新增文章只改 JSON不用碰 HTML。注意fetch在file://下会被拦必须走本地服务或线上环境这也是前面强调别双击打开的原因。参数上p.url是文章页路径p.tag是分类标签想加摘要就再加一个字段。5.2 验证清单上线前我会强制走一遍每次部署前我都会过一遍这几项用浏览器开发者工具逐条确认检查项怎么看合格标准控制台报错Console 面板无红色 error资源加载Network 面板无 404图片正常移动端设备模拟无横向滚动文字可读链接逐个点击导航和文章链接都能跳性能Lighthouse首屏加载可接受Lighthouse 在开发者工具的 Lighthouse 面板里跑一次能给出性能、可访问性、SEO 的分数分数低的地方它会直接告诉你哪张图太大、哪个标签缺alt。这套流程走下来基本能避免「上线才发现问题」的尴尬。5.3 一个具体技巧给静态博客加返回顶部与阅读进度返回顶部前面提过这里补一个阅读进度条纯 CSS 几行 JS 就能做体验提升明显// 阅读进度条 const progress document.querySelector(.progress-bar); window.addEventListener(scroll, () { const total document.documentElement.scrollHeight - window.innerHeight; const percent (window.scrollY / total) * 100; progress.style.width percent %; });scrollHeight是文档总高度innerHeight是视口高度两者相减是可滚动的总距离scrollY除以它就是当前进度百分比。把这个值赋给进度条的width滚动时进度条就跟着走。这个技巧在文章详情页特别有用读者能直观看到还剩多少内容。从那以后我每次拿到一份静态博客源码都先跑一遍本地服务、过一遍避坑清单、再部署绝不直接双击文件就开始改。这套习惯帮我省了太多「上线才发现」的返工。希望帮到你。本文还有配套的精品资源点击获取 个人博客网页设计HTML源码：从静态模板到上线部署全指南
简介这是一套面向网页设计初学者与个人博主的HTML博客主题源码适合希望快速搭建作品展示、日志记录类个人站点的用户无需从零起步即可理解页面结构与样式组织方式。压缩包共30个文件以27个gif装饰图、1张jpg头像图、1个html页面和1个css样式表为主整体约37KB图片资源承担页面分割线、菜单背景与图标等视觉元素html与css则分别负责内容骨架和布局美化。目前已有3820人学习下载热度较高。源码中index.html清晰呈现头部、导航、文章区与页脚等模块划分style.css通过类选择器、盒模型与浮动定位控制字体、间距和背景便于读者对照理解HTML结构如何与CSS样式配合进而掌握个人博客页面的搭建思路与常见布局技巧适合作为课程作业或练手项目的参考模板。1. 个人博客网页设计html源码从一份静态模板到能上线的个人站点很多人第一次想搭个人博客第一反应是去装 WordPress 或者 Hexo结果卡在环境、主题、插件冲突上折腾一晚上首页还是白屏。其实对绝大多数只想放文章、放简介、放几张图的个人站点来说一份结构干净的个人博客网页设计 html 源码就够了——它本质是一套纯静态的 HTML CSS JavaScript 文件双击就能在浏览器里打开改完文字直接丢到任意静态托管上就能访问。这份资源解决的就是「不想碰后端、不想配数据库、只想有个能看的博客」这个诉求适合前端刚入门想练手的人、想快速上线个人主页的独立开发者以及需要一份可改可拆的静态模板做二次开发的人。下面我按「这套源码长什么样、怎么改、怎么部署、坑在哪」的顺序拆一遍。2. 拆开这套 html 源码目录结构、页面组成与技术栈2.1 一份典型个人博客静态源码的文件构成拿到一份个人博客网页设计 html 源码先别急着改样式先看清楚它由哪些文件组成。常见的目录结构大致是这样blog-html/ ├── index.html # 首页文章列表 个人简介 ├── about.html # 关于我页面 ├── article.html # 文章详情页模板 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── style.css # 主样式 │ └── responsive.css # 移动端适配 ├── js/ │ ├── main.js # 交互逻辑导航、返回顶部等 │ └── theme.js # 主题切换可选 ├── images/ │ ├── avatar.jpg # 头像 │ └── banner.jpg # 首页大图 └── fonts/ # 图标字体或自定义字体这套结构是静态博客最通用的组织方式好处是每个页面职责单一改首页不会误伤文章页。判断一份源码值不值得用我一般先看三点index.html里有没有把内容写死成一大坨、CSS 是不是全塞在一个文件里、JS 有没有依赖一堆外部库。如果首页 HTML 超过 500 行且全是硬编码文章那后期维护会很痛苦如果 CSS 分了 reset / style / responsive 三层说明作者是有工程意识的改起来顺手。2.2 页面骨架从 doctype 到语义化标签打开index.html开头一定是文档类型声明和语言设置这是 HTML5 的标准起手式!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content个人博客记录前端学习与技术笔记 title我的博客 | 首页/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head body header classsite-header nav classnav a hrefindex.html classlogoMyBlog/a ul classnav-list lia hrefindex.html首页/a/li lia hrefabout.html关于/a/li /ul /nav /header main classcontent section classpost-list article classpost-item h2a hrefarticle.html第一篇文章标题/a/h2 p classpost-meta2024-01-01 · 前端/p p classpost-excerpt这里是文章摘要……/p /article /section /main footer classsite-footer p© 2024 MyBlog/p /footer /body /html这里有几个参数值得注意。langzh-CN影响浏览器对中文的字体渲染和拼写检查写成zh也能跑但不够规范。viewport那行是移动端适配的命门缺了它手机上打开会缩成一团。description是给搜索引擎看的写不写不影响显示但影响收录。语义化标签header / nav / main / article / footer不只是好看它决定了屏幕阅读器和搜索引擎怎么理解你的页面结构比满屏div强得多。2.3 样式与交互CSS 布局和 JS 增强分别管什么CSS 负责视觉JS 负责行为这条边界在静态博客里要守住。常见做法是 CSS 用 Flex 或 Grid 做布局JS 只处理导航折叠、返回顶部、主题切换这类增强功能。/* style.css 片段文章列表用 Grid 自适应 */ .post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 16px; }repeat(auto-fill, minmax(300px, 1fr))这行的意思是每列最小 300px能塞几列塞几列屏幕宽就多列、窄就单列不用写一堆媒体查询。gap控制卡片间距max-width加margin: 0 auto是经典的居中约束。// main.js 片段返回顶部按钮 const backTop document.querySelector(.back-top); window.addEventListener(scroll, () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 300是显示阈值意思是往下滚超过 300px 才出现按钮避免一进页面就挡视线。behavior: smooth让滚动有过渡去掉就是瞬间跳顶。这段逻辑不依赖任何库原生 JS 十几行搞定这也是静态源码的好处——没有构建步骤改完刷新就见效。3. 把模板改成自己的博客内容替换、样式定制与本地预览3.1 替换个人信息与文章内容的正确顺序改模板最忌讳东改一处西改一处最后自己都不知道改了啥。我一般按「先内容、后样式、再交互」的顺序来。第一步先把所有占位文字换掉站名、导航、头像、简介、文章标题和正文。用编辑器全局搜索MyBlog、第一篇文章标题这类占位词逐个替换。# 在项目根目录下先看看哪些文件里有占位文字 grep -rn MyBlog . --include*.html grep -rn 第一篇文章 . --include*.htmlgrep -rn的-r是递归子目录-n是显示行号--include限定只搜 HTML。先搜出来心里有数再动手改比盲改靠谱。文章内容如果只有一两篇直接写在 HTML 里没问题如果打算长期更新建议把文章抽成单独的 HTML 文件首页只留标题和摘要加链接这样首页不会越改越臃肿。3.2 配色、字体与响应式断点的调整样式定制集中在style.css顶部的变量区最省事。如果源码用了 CSS 变量改几个值就能换整体风格:root { --primary-color: #2c3e50; /* 主色导航和标题 */ --accent-color: #3498db; /* 强调色链接和按钮 */ --text-color: #333; /* 正文颜色 */ --bg-color: #fff; /* 背景色 */ --font-family: PingFang SC, Microsoft YaHei, sans-serif; }改--primary-color就能整体换色调不用一个个找。字体那行把中文字体放前面是因为中文字体文件大优先用系统自带的能省加载时间。响应式断点一般在responsive.css里常见是 768px 和 480px 两档media (max-width: 768px) { .nav-list { display: none; } /* 移动端隐藏横向导航 */ .nav-toggle { display: block; } /* 显示汉堡菜单按钮 */ .post-list { grid-template-columns: 1fr; } /* 单列 */ }max-width: 768px表示屏幕宽度小于等于 768px 时生效这是平板竖屏和手机的常见分界。改断点前先在浏览器开发者工具里拖动模拟不同宽度看哪里开始挤再决定断点设多少别照抄别人的数值。3.3 本地起服务预览别直接双击文件双击 HTML 文件能看但有些功能会失效——比如用fetch加载本地 JSON、或者用了模块化typemodule的脚本file://协议下会被浏览器安全策略拦掉。正确做法是起一个本地静态服务# 方式一Python 自带装了 Python 就能用 python -m http.server 8000 # 方式二Node 环境用 npx npx serve . # 然后浏览器访问 http://localhost:8000python -m http.server 8000的8000是端口号被占用就换 8080。npx serve .里的.表示以当前目录为根。起服务后再预览路径引用、相对链接、AJAX 请求的行为才和线上一致这一步能提前暴露很多「本地好好的、上线就 404」的问题。4. 部署上线与常见坑排查4.1 静态托管的三种落地方式静态博客部署没有后端选择很多。常见做法有三类一是 GitHub Pages把代码推到仓库在设置里开启 Pages适合有 Git 习惯的人二是 Netlify / Vercel 这类拖拽文件夹或连仓库自动构建适合不想碰命令行的人三是自己的服务器把文件丢到 Nginx 的站点目录。# 推到 GitHub 后开启 Pages 的典型流程 git init git add . git commit -m init blog git branch -M main git remote add origin 你的仓库地址 git push -u origin main推上去之后在仓库 Settings → Pages 里选分支和目录等一两分钟就能拿到访问地址。注意index.html必须在选定的根目录下否则打开是 404。用 Nginx 的话把文件放到/var/www/blog配置里root指向这个目录、index写index.html即可。4.2 路径大小写、相对路径与缓存这三类翻车静态站点上线后最常见的问题就三类。第一类是路径大小写本地 Windows 不区分大小写Images/avatar.jpg和images/avatar.jpg都能打开传到 Linux 服务器就 404。血泪经验是文件名统一用小写引用时严格对齐。第二类是相对路径层级错乱文章页在子目录里引用 CSS 还写css/style.css就会找不到得写成../css/style.css。第三类是缓存改了 CSS 刷新没变化多半是浏览器缓存了旧文件可以在引用后面加版本号style.css?v2强制更新。4.3 避坑清单五条我踩过的具体记录现象手机打开页面横向溢出能左右拖动。原因某个元素宽度写死超过视口或者图片没设max-width: 100%。 解决全局加img { max-width: 100%; height: auto; }再检查有没有固定width: 1200px的容器。现象导航链接点了没反应地址栏变了但页面不动。原因href写成了#或者路径拼错指向了不存在的文件。 解决用开发者工具的 Network 面板看请求是不是 404逐个核对文件名和扩展名。现象中文字体在某些手机上变成宋体很难看。原因font-family只写了英文字体中文回退到系统默认。 解决把PingFang SC, Microsoft YaHei, Hiragino Sans GB这类中文字体排在前面。现象JS 报错Cannot read property of null交互全失效。原因脚本在 DOM 加载前执行querySelector拿不到元素。 解决把script放到/body前或用DOMContentLoaded包起来。现象部署后首页能开点进文章页样式全丢。原因文章页在子目录CSS 用了相对根路径的写法。 解决统一改成相对当前文件的路径或全部用绝对路径/css/style.css。5. 进阶把静态博客做得更像「自己的」5.1 用数据驱动文章列表减少重复劳动纯手写 HTML 的博客文章一多首页列表改起来就烦。进阶做法是把文章信息抽成一个 JSON 文件用 JS 渲染列表// posts.json [ { title: 第一篇文章, date: 2024-01-01, url: article.html, tag: 前端 } ]// 渲染列表 fetch(posts.json) .then(res res.json()) .then(posts { const list document.querySelector(.post-list); list.innerHTML posts.map(p article classpost-item h2a href${p.url}${p.title}/a/h2 p classpost-meta${p.date} · ${p.tag}/p /article ).join(); });这样新增文章只改 JSON不用碰 HTML。注意fetch在file://下会被拦必须走本地服务或线上环境这也是前面强调别双击打开的原因。参数上p.url是文章页路径p.tag是分类标签想加摘要就再加一个字段。5.2 验证清单上线前我会强制走一遍每次部署前我都会过一遍这几项用浏览器开发者工具逐条确认检查项怎么看合格标准控制台报错Console 面板无红色 error资源加载Network 面板无 404图片正常移动端设备模拟无横向滚动文字可读链接逐个点击导航和文章链接都能跳性能Lighthouse首屏加载可接受Lighthouse 在开发者工具的 Lighthouse 面板里跑一次能给出性能、可访问性、SEO 的分数分数低的地方它会直接告诉你哪张图太大、哪个标签缺alt。这套流程走下来基本能避免「上线才发现问题」的尴尬。5.3 一个具体技巧给静态博客加返回顶部与阅读进度返回顶部前面提过这里补一个阅读进度条纯 CSS 几行 JS 就能做体验提升明显// 阅读进度条 const progress document.querySelector(.progress-bar); window.addEventListener(scroll, () { const total document.documentElement.scrollHeight - window.innerHeight; const percent (window.scrollY / total) * 100; progress.style.width percent %; });scrollHeight是文档总高度innerHeight是视口高度两者相减是可滚动的总距离scrollY除以它就是当前进度百分比。把这个值赋给进度条的width滚动时进度条就跟着走。这个技巧在文章详情页特别有用读者能直观看到还剩多少内容。从那以后我每次拿到一份静态博客源码都先跑一遍本地服务、过一遍避坑清单、再部署绝不直接双击文件就开始改。这套习惯帮我省了太多「上线才发现」的返工。希望帮到你。本文还有配套的精品资源点击获取