简介面向体育赛事网站开发学习者与前端初学者的HTML5源码包提供一套风格简洁、动画酷炫的多页面网站模板适合快速搭建赛事资讯、运动员介绍、新闻公告等板块无论是用于教学演示还是个人作品集都能快速上手。压缩包共121个文件以HTML页面为主辅以少量CSS、JS和图片资源其中87张JPG与19张PNG覆盖页面展示所需视觉素材整体体积37.31MB目录结构清晰便于按需调用。已有8240人学习下载口碑和实用性得到初步验证。源码内置多种风格模板和独立页面涵盖新闻、赛事、注册、明星球员等多个模块注释完整、代码规范可自由拆分或扩展为自定义版块直接点击index.html即可预览运行适合课程设计、个人练习或商业二次开发。对于希望快速掌握HTML5页面布局与CSS动画实现的前端开发者这份源码也是现成的高质量参考。1. 从标题看HTML5体育网站的定位与交付拿到“HTML5实现简洁的体育网站.zip”这个源码包很多人的第一反应是解压后双击 index.html 看个效果。但作为工程师我更在意这个包里的 HTML5 是否用对了语义标签页面有没有踩中移动端适配的坑以及打包交付时文件结构是否干净。一个真正能在生产环境跑的体育网站不是把比分文字和图片塞进 HTML 那么简单。它要处理赛事数据更新、跨终端展示、资源缓存甚至离线访问。这篇文章就顺着这条线从 HTML5 的语义结构、CSS3 的布局方案、JavaScript 的数据请求到最终把整个项目压成 zip 交付完整过一遍。适合正在做网页设计作业、想独立搭建小型站点或者需要把静态原型转成可用产品的开发者。2. 用HTML5搭建体育网站的信息架构与页面骨架体育网站的信息密度通常很高比分、赛程、新闻、球队排名、球员数据。如果不先做模块划分页面很快就会变成一堆 div 的堆叠后期维护成本极高。HTML5 提供了一组语义化标签正是用来解决“这个区域是什么内容”的问题。我一般会先画出首页和赛程页的线框再决定每个区块用什么标签承载。2.1 体育网站常见的页面模块与原型划分通常一个简洁的体育网站只需要四个核心页面首页、赛程页面、球队详情页、新闻列表页。对于更轻量的场景比如学校社团的赛事网站甚至可以把新闻和赛程合并到首页。下面是我常用的一种模块划分方式它既照顾了视觉层级也方便后续用 CSS Grid 做整体布局。页面主要模块语义标签建议首页导航栏、焦点赛事、比分列表、最新新闻、页脚header、main、section、article、aside、footer赛程页日期切换、比赛卡片、排序/筛选main、section、ul/li、time球队详情球队信息、近期战绩、球员列表header、dl/dt/dd、table、figure新闻列表新闻卡片、分页、推荐位main、article、time、nav在原型阶段我会用一张表格把每个模块的标签类型、数据来源、更新频率列清楚。比分数据能通过现场接口拿到就用 fetch 拉取拿不到就固定存一个 JSON 文件模拟。新闻列表则是典型的静态内容适合直接用 HTML 模板输出再由 JS 做加载状态管理。这样划分后每个页面区域都有明确的归属不再需要为“这个 div 是什么”去翻代码。2.2 用HTML5语义标签搭建首屏骨架以首页为例一个干净的骨架大致长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title球讯快报 - 简洁体育/title link relstylesheet hrefcss/style.css /head body header classsite-header h1球讯快报/h1 nav aria-label主导航 a href#score比分/a a href#news新闻/a a href#standings排名/a /nav /header main idscore section classscoreboard h2今日赛事/h2 ul classmatch-list idmatch-list !-- 动态插入比赛卡片 -- /ul /section section classnews idnews h2最新快报/h2 article classnews-item time datetime2025-04-10T20:30今晚 20:30/time h3主场逆转 3:2 进入四强/h3 p在刚刚结束的淘汰赛中客队上半场领先两球但主队下半场连进三球完成逆转。/p /article /section /main aside idstandings h2积分榜/h2 table thead trth排名/thth球队/thth积分/th/tr /thead tbody idstandings-body/tbody /table /aside footer classsite-footer p数据仅供参考更新于 time idupdate-time/time/p /footer /body /html这段代码里最值得关注的是main、section、article、aside的分工。main只放当前页面最核心的内容不要让侧边栏爬进main里。article适用于可独立分发的内容比如一条新闻因为它自带标题和正文即使被 RSS 抓走也不会丢语义。aside用来放积分榜这种跟主内容有弱关联的补充信息。time标签的datetime属性是给机器读的时间戳我在页面底部标注更新时间时也会用到它方便后续脚本校验数据新鲜度。2.3 页面信息层级与区块命名规范HTML5 语义标签解决的是“这是什么”但 CSS 和 JavaScript 还需要一个稳定的类名体系。常见的 BEM 命名在这里很合适比如.match-list__item表示比赛列表中的一项.match-list__item--highlight表示重点比赛。配合语义标签我通常用>.match-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; } .match-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 8px; background: #f8f9fa; border-left: 4px solid #28a745; } .match-card--live { border-left-color: #dc3545; } .team { font-weight: 600; font-size: 1rem; } .score { font-size: 1.4rem; font-family: Scoreboard, sans-serif; letter-spacing: 2px; }repeat(auto-fit, minmax(260px, 1fr))是被我用到最多的写法。它会让卡片在桌面端一行排三四列到了手机上自动变成单列不需要写媒体查询。minmax(260px, 1fr)里的 260px 是卡片允许的最小宽度如果屏幕宽度不够就换行。1fr让剩余空间均匀分配卡片不会一边宽一边窄。border-left则用来区分比赛状态红色代表直播中绿色代表已结束我习惯用>// data/matches.json [ { id: 1, home: 红队, away: 蓝队, homeScore: 2, awayScore: 1, status: live, matchTime: 2025-04-10T20:00:0008:00 }, { id: 2, home: 绿队, away: 黄队, homeScore: 0, awayScore: 0, status: scheduled, matchTime: 2025-04-11T19:30:0008:00 } ]async function loadMatches() { const list document.getElementById(match-list); try { const response await fetch(data/matches.json, { headers: { Accept: application/json } }); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const matches await response.json(); renderMatches(matches); } catch (err) { list.innerHTML li classmatch-card数据加载失败请检查网络或本地文件。/li; console.error(fetch error, err); } } function renderMatches(matches) { const list document.getElementById(match-list); list.innerHTML matches.map(m li classmatch-card>let refreshTimer null; function startRefresh(callback, interval 30000) { if (refreshTimer) clearInterval(refreshTimer); refreshTimer setInterval(callback, interval); } // 初次加载 loadMatches(); // 根据页面可见性调整频率 document.addEventListener(visibilitychange, () { if (document.hidden) { if (refreshTimer) clearInterval(refreshTimer); } else { loadMatches(); startRefresh(loadMatches, 30000); } });这里的关键是页面切到后台时停止刷新回到前台立刻拉一次最新数据。visibilitychange是 HTML5 的页面生命周期 API比单纯依赖setInterval更省电。如果比赛数据里带有time字段你还可以在渲染前比较当前时间决定显示“进行中”“已结束”还是“未开始”避免后端忘了改状态。容错方面除了try/catch我还会为接口响应加上超时控制用AbortController在 5 秒内没有响应时主动中止请求避免比赛页一直转圈。4. 把站点打包成zip的正确姿势与目录规范标题里的.zip提醒我最终交付物不只是一个 index.html而是一个可以解压后直接运行的站点目录。如果路径写错、文件缺失或者压缩方式不对用户拿到的包就会白屏。这里涉及的不只是压缩命令还有一套约定俗成的目录规范。我见过太多zip包解压后一堆.scss或.psd源文件混在里面这种包不是给人用的。4.1 准备符合相对路径的目录结构网页中的所有资源引用都必须使用相对路径才能保证在本地和服务器上都正常工作。一个简洁体育网站的完整目录通常长这样sports-site/ ├── index.html ├── pages/ │ ├── schedule.html │ └── team.html ├── css/ │ ├── style.css │ └── responsive.css ├── js/ │ ├── main.js │ └── matches-data.js ├── data/ │ └── matches.json ├── assets/ │ ├── logo.png │ └── bg.svg └── README.txt核心规则是把代码和资源分开css和js都放根目录下的独立文件夹中data放静态数据assets放图片图标。HTML 文件里引用时使用相对路径例如css/style.css而不是/css/style.css。开头带/的写法在本地打开时会指向磁盘根目录直接导致白屏。另外文件命名尽量不要带中文或空格否则在 zip 解压后可能因为系统编码差异出现链接失效。4.2 用命令行工具生成zip包并校验在 macOS/Linux 下用系统自带zip命令在 Windows 下可以用 PowerShell 的Compress-Archive。我通常会把整个sports-site目录作为压缩根这样用户解压后得到一个顶层文件夹不会让文件散落一地。# 在站点根目录的上一级执行 zip -r sports-site.zip sports-site \ -x */.DS_Store \ -x */Thumbs.db \ -x *.scss \ -x */node_modules/* # 验证包内容 unzip -l sports-site.zip | head -20zip -r表示递归压缩子目录。-x参数用来排除无关文件.DS_Store和Thumbs.db是 macOS 和 Windows 自动生成的元数据不该出现在发布包里。*.scss排除源样式文件因为我们只发布编译后的 CSS。压缩完成后用unzip -l列出包内文件列表检查是否包含index.html和data/matches.json。如果发现缺失某个文件多半是路径在压缩时多了一层父目录。4.3 跨平台打开zip的编码与权限问题zip 包在不同操作系统之间流传时最烦人的是文件名中文乱码。留个教训压缩时指定 UTF-8 编码许多 GUI 压缩工具默认用系统本地编码到了另一平台上就乱了。命令行zip工具一般直接按 UTF-8 压缩但用 Windows 自带右键压缩时建议改为使用 PowerShell 脚本强制指定编码Compress-Archive -Path .\sports-site\* -DestinationPath .\sports-site.zip -CompressionLevel Optimal表面上这是压缩命令实际上Compress-Archive会按照当前系统的 Unicode 字符串处理文件名不会额外做代码页转换。如果你是团队协作最好在README.txt里注明“解压时请保持目录结构不要单独移动文件”。另外如果站点内有可执行脚本比如start.batzip 解压后文件权限可能丢失导致脚本无法运行。我一般会在README.txt里写明遇到权限问题时的处理方式例如在 macOS 上使用chmod x重新赋予权限。5. 让静态体育网站更耐用的离线缓存与数据持久化当站点打包成 zip 之后它是完全静态的。但用户不可能永远联网尤其是看比分这类场景可能在地铁里打开。HTML5 提供了两个非常适合这里的 APIlocalStorage存用户偏好Service Worker做离线缓存。两者加起来可以让这个静态站点在断网时也保持可用。5.1 用localStorage记住用户关注的球队比分列表通常很长用户只关心自己主队的比赛。我用一个简单的关注功能演示localStorage的用法const SETTINGS_KEY sports-site.favorites; function toggleFavorite(teamName) { let favs JSON.parse(localStorage.getItem(SETTINGS_KEY)) || []; if (favs.includes(teamName)) { favs favs.filter(t t ! teamName); } else { favs.push(teamName); } localStorage.setItem(SETTINGS_KEY, JSON.stringify(favs)); updateUI(); } function isFavorite(teamName) { const favs JSON.parse(localStorage.getItem(SETTINGS_KEY)) || []; return favs.includes(teamName); }localStorage只能存字符串对象需要JSON.stringify后再存。读取时注意用JSON.parse如果键不存在会得到null我在这里用了|| []作为默认值。这个数据只会保存在当前浏览器的这个域名下清除浏览器缓存会一并删除。5.2 用Service Worker缓存HTML和JSON实现离线阅读Service Worker虽然没有标题里那么抢眼但它是让 zip 包脱胎换骨的关键。注册它只需要一个sw.js文件放在站点根目录下。下面是一个最简单的缓存策略优先返回缓存同时后台更新。// sw.js const CACHE_NAME sports-site-v1; const CACHE_ASSETS [ /, /index.html, /css/style.css, /js/main.js, /data/matches.json ]; self.addEventListener(install, (event) { event.waitUntil( caches.open(CACHE_NAME).then((cache) cache.addAll(CACHE_ASSETS)) ); }); self.addEventListener(fetch, (event) { event.respondWith( caches.match(event.request).then((cached) { const networkFetch fetch(event.request).then((response) { if (response.ok) { caches.open(CACHE_NAME).then((cache) cache.put(event.request, response.clone())); } return response; }).catch(() cached); return cached || networkFetch; }) ); });这个策略叫 stale-while-revalidate用户打开页面时立刻看到缓存内容然后在后台请求新数据更新缓存和当前标签页。需要注意install中的addAll如果有一个资源失败整个缓存会失败所以列表里的路径必须真实存在。fetch事件里我用了response.clone()因为响应流只能消费一次缓存存一份页面用一份。注册Service Worker时要在主页面里加上一句if (serviceWorker in navigator) { navigator.serviceWorker.register(sw.js); }它只在 HTTPS 或 localhost 下工作直接双击 index.html 用file://协议是无效的这也是发布时需要注意的一个边界。打包zip前要记得把sw.js放在根目录并且让它引用的路径都改成相对路径否则离线缓存会失效。这样刷新页面时Service Worker会先返回缓存副本再在后台请求新数据并更新缓存。本文还有配套的精品资源点击获取 HTML5体育网站实战：语义化布局、动态比分与离线缓存
简介面向体育赛事网站开发学习者与前端初学者的HTML5源码包提供一套风格简洁、动画酷炫的多页面网站模板适合快速搭建赛事资讯、运动员介绍、新闻公告等板块无论是用于教学演示还是个人作品集都能快速上手。压缩包共121个文件以HTML页面为主辅以少量CSS、JS和图片资源其中87张JPG与19张PNG覆盖页面展示所需视觉素材整体体积37.31MB目录结构清晰便于按需调用。已有8240人学习下载口碑和实用性得到初步验证。源码内置多种风格模板和独立页面涵盖新闻、赛事、注册、明星球员等多个模块注释完整、代码规范可自由拆分或扩展为自定义版块直接点击index.html即可预览运行适合课程设计、个人练习或商业二次开发。对于希望快速掌握HTML5页面布局与CSS动画实现的前端开发者这份源码也是现成的高质量参考。1. 从标题看HTML5体育网站的定位与交付拿到“HTML5实现简洁的体育网站.zip”这个源码包很多人的第一反应是解压后双击 index.html 看个效果。但作为工程师我更在意这个包里的 HTML5 是否用对了语义标签页面有没有踩中移动端适配的坑以及打包交付时文件结构是否干净。一个真正能在生产环境跑的体育网站不是把比分文字和图片塞进 HTML 那么简单。它要处理赛事数据更新、跨终端展示、资源缓存甚至离线访问。这篇文章就顺着这条线从 HTML5 的语义结构、CSS3 的布局方案、JavaScript 的数据请求到最终把整个项目压成 zip 交付完整过一遍。适合正在做网页设计作业、想独立搭建小型站点或者需要把静态原型转成可用产品的开发者。2. 用HTML5搭建体育网站的信息架构与页面骨架体育网站的信息密度通常很高比分、赛程、新闻、球队排名、球员数据。如果不先做模块划分页面很快就会变成一堆 div 的堆叠后期维护成本极高。HTML5 提供了一组语义化标签正是用来解决“这个区域是什么内容”的问题。我一般会先画出首页和赛程页的线框再决定每个区块用什么标签承载。2.1 体育网站常见的页面模块与原型划分通常一个简洁的体育网站只需要四个核心页面首页、赛程页面、球队详情页、新闻列表页。对于更轻量的场景比如学校社团的赛事网站甚至可以把新闻和赛程合并到首页。下面是我常用的一种模块划分方式它既照顾了视觉层级也方便后续用 CSS Grid 做整体布局。页面主要模块语义标签建议首页导航栏、焦点赛事、比分列表、最新新闻、页脚header、main、section、article、aside、footer赛程页日期切换、比赛卡片、排序/筛选main、section、ul/li、time球队详情球队信息、近期战绩、球员列表header、dl/dt/dd、table、figure新闻列表新闻卡片、分页、推荐位main、article、time、nav在原型阶段我会用一张表格把每个模块的标签类型、数据来源、更新频率列清楚。比分数据能通过现场接口拿到就用 fetch 拉取拿不到就固定存一个 JSON 文件模拟。新闻列表则是典型的静态内容适合直接用 HTML 模板输出再由 JS 做加载状态管理。这样划分后每个页面区域都有明确的归属不再需要为“这个 div 是什么”去翻代码。2.2 用HTML5语义标签搭建首屏骨架以首页为例一个干净的骨架大致长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title球讯快报 - 简洁体育/title link relstylesheet hrefcss/style.css /head body header classsite-header h1球讯快报/h1 nav aria-label主导航 a href#score比分/a a href#news新闻/a a href#standings排名/a /nav /header main idscore section classscoreboard h2今日赛事/h2 ul classmatch-list idmatch-list !-- 动态插入比赛卡片 -- /ul /section section classnews idnews h2最新快报/h2 article classnews-item time datetime2025-04-10T20:30今晚 20:30/time h3主场逆转 3:2 进入四强/h3 p在刚刚结束的淘汰赛中客队上半场领先两球但主队下半场连进三球完成逆转。/p /article /section /main aside idstandings h2积分榜/h2 table thead trth排名/thth球队/thth积分/th/tr /thead tbody idstandings-body/tbody /table /aside footer classsite-footer p数据仅供参考更新于 time idupdate-time/time/p /footer /body /html这段代码里最值得关注的是main、section、article、aside的分工。main只放当前页面最核心的内容不要让侧边栏爬进main里。article适用于可独立分发的内容比如一条新闻因为它自带标题和正文即使被 RSS 抓走也不会丢语义。aside用来放积分榜这种跟主内容有弱关联的补充信息。time标签的datetime属性是给机器读的时间戳我在页面底部标注更新时间时也会用到它方便后续脚本校验数据新鲜度。2.3 页面信息层级与区块命名规范HTML5 语义标签解决的是“这是什么”但 CSS 和 JavaScript 还需要一个稳定的类名体系。常见的 BEM 命名在这里很合适比如.match-list__item表示比赛列表中的一项.match-list__item--highlight表示重点比赛。配合语义标签我通常用>.match-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; } .match-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 8px; background: #f8f9fa; border-left: 4px solid #28a745; } .match-card--live { border-left-color: #dc3545; } .team { font-weight: 600; font-size: 1rem; } .score { font-size: 1.4rem; font-family: Scoreboard, sans-serif; letter-spacing: 2px; }repeat(auto-fit, minmax(260px, 1fr))是被我用到最多的写法。它会让卡片在桌面端一行排三四列到了手机上自动变成单列不需要写媒体查询。minmax(260px, 1fr)里的 260px 是卡片允许的最小宽度如果屏幕宽度不够就换行。1fr让剩余空间均匀分配卡片不会一边宽一边窄。border-left则用来区分比赛状态红色代表直播中绿色代表已结束我习惯用>// data/matches.json [ { id: 1, home: 红队, away: 蓝队, homeScore: 2, awayScore: 1, status: live, matchTime: 2025-04-10T20:00:0008:00 }, { id: 2, home: 绿队, away: 黄队, homeScore: 0, awayScore: 0, status: scheduled, matchTime: 2025-04-11T19:30:0008:00 } ]async function loadMatches() { const list document.getElementById(match-list); try { const response await fetch(data/matches.json, { headers: { Accept: application/json } }); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const matches await response.json(); renderMatches(matches); } catch (err) { list.innerHTML li classmatch-card数据加载失败请检查网络或本地文件。/li; console.error(fetch error, err); } } function renderMatches(matches) { const list document.getElementById(match-list); list.innerHTML matches.map(m li classmatch-card>let refreshTimer null; function startRefresh(callback, interval 30000) { if (refreshTimer) clearInterval(refreshTimer); refreshTimer setInterval(callback, interval); } // 初次加载 loadMatches(); // 根据页面可见性调整频率 document.addEventListener(visibilitychange, () { if (document.hidden) { if (refreshTimer) clearInterval(refreshTimer); } else { loadMatches(); startRefresh(loadMatches, 30000); } });这里的关键是页面切到后台时停止刷新回到前台立刻拉一次最新数据。visibilitychange是 HTML5 的页面生命周期 API比单纯依赖setInterval更省电。如果比赛数据里带有time字段你还可以在渲染前比较当前时间决定显示“进行中”“已结束”还是“未开始”避免后端忘了改状态。容错方面除了try/catch我还会为接口响应加上超时控制用AbortController在 5 秒内没有响应时主动中止请求避免比赛页一直转圈。4. 把站点打包成zip的正确姿势与目录规范标题里的.zip提醒我最终交付物不只是一个 index.html而是一个可以解压后直接运行的站点目录。如果路径写错、文件缺失或者压缩方式不对用户拿到的包就会白屏。这里涉及的不只是压缩命令还有一套约定俗成的目录规范。我见过太多zip包解压后一堆.scss或.psd源文件混在里面这种包不是给人用的。4.1 准备符合相对路径的目录结构网页中的所有资源引用都必须使用相对路径才能保证在本地和服务器上都正常工作。一个简洁体育网站的完整目录通常长这样sports-site/ ├── index.html ├── pages/ │ ├── schedule.html │ └── team.html ├── css/ │ ├── style.css │ └── responsive.css ├── js/ │ ├── main.js │ └── matches-data.js ├── data/ │ └── matches.json ├── assets/ │ ├── logo.png │ └── bg.svg └── README.txt核心规则是把代码和资源分开css和js都放根目录下的独立文件夹中data放静态数据assets放图片图标。HTML 文件里引用时使用相对路径例如css/style.css而不是/css/style.css。开头带/的写法在本地打开时会指向磁盘根目录直接导致白屏。另外文件命名尽量不要带中文或空格否则在 zip 解压后可能因为系统编码差异出现链接失效。4.2 用命令行工具生成zip包并校验在 macOS/Linux 下用系统自带zip命令在 Windows 下可以用 PowerShell 的Compress-Archive。我通常会把整个sports-site目录作为压缩根这样用户解压后得到一个顶层文件夹不会让文件散落一地。# 在站点根目录的上一级执行 zip -r sports-site.zip sports-site \ -x */.DS_Store \ -x */Thumbs.db \ -x *.scss \ -x */node_modules/* # 验证包内容 unzip -l sports-site.zip | head -20zip -r表示递归压缩子目录。-x参数用来排除无关文件.DS_Store和Thumbs.db是 macOS 和 Windows 自动生成的元数据不该出现在发布包里。*.scss排除源样式文件因为我们只发布编译后的 CSS。压缩完成后用unzip -l列出包内文件列表检查是否包含index.html和data/matches.json。如果发现缺失某个文件多半是路径在压缩时多了一层父目录。4.3 跨平台打开zip的编码与权限问题zip 包在不同操作系统之间流传时最烦人的是文件名中文乱码。留个教训压缩时指定 UTF-8 编码许多 GUI 压缩工具默认用系统本地编码到了另一平台上就乱了。命令行zip工具一般直接按 UTF-8 压缩但用 Windows 自带右键压缩时建议改为使用 PowerShell 脚本强制指定编码Compress-Archive -Path .\sports-site\* -DestinationPath .\sports-site.zip -CompressionLevel Optimal表面上这是压缩命令实际上Compress-Archive会按照当前系统的 Unicode 字符串处理文件名不会额外做代码页转换。如果你是团队协作最好在README.txt里注明“解压时请保持目录结构不要单独移动文件”。另外如果站点内有可执行脚本比如start.batzip 解压后文件权限可能丢失导致脚本无法运行。我一般会在README.txt里写明遇到权限问题时的处理方式例如在 macOS 上使用chmod x重新赋予权限。5. 让静态体育网站更耐用的离线缓存与数据持久化当站点打包成 zip 之后它是完全静态的。但用户不可能永远联网尤其是看比分这类场景可能在地铁里打开。HTML5 提供了两个非常适合这里的 APIlocalStorage存用户偏好Service Worker做离线缓存。两者加起来可以让这个静态站点在断网时也保持可用。5.1 用localStorage记住用户关注的球队比分列表通常很长用户只关心自己主队的比赛。我用一个简单的关注功能演示localStorage的用法const SETTINGS_KEY sports-site.favorites; function toggleFavorite(teamName) { let favs JSON.parse(localStorage.getItem(SETTINGS_KEY)) || []; if (favs.includes(teamName)) { favs favs.filter(t t ! teamName); } else { favs.push(teamName); } localStorage.setItem(SETTINGS_KEY, JSON.stringify(favs)); updateUI(); } function isFavorite(teamName) { const favs JSON.parse(localStorage.getItem(SETTINGS_KEY)) || []; return favs.includes(teamName); }localStorage只能存字符串对象需要JSON.stringify后再存。读取时注意用JSON.parse如果键不存在会得到null我在这里用了|| []作为默认值。这个数据只会保存在当前浏览器的这个域名下清除浏览器缓存会一并删除。5.2 用Service Worker缓存HTML和JSON实现离线阅读Service Worker虽然没有标题里那么抢眼但它是让 zip 包脱胎换骨的关键。注册它只需要一个sw.js文件放在站点根目录下。下面是一个最简单的缓存策略优先返回缓存同时后台更新。// sw.js const CACHE_NAME sports-site-v1; const CACHE_ASSETS [ /, /index.html, /css/style.css, /js/main.js, /data/matches.json ]; self.addEventListener(install, (event) { event.waitUntil( caches.open(CACHE_NAME).then((cache) cache.addAll(CACHE_ASSETS)) ); }); self.addEventListener(fetch, (event) { event.respondWith( caches.match(event.request).then((cached) { const networkFetch fetch(event.request).then((response) { if (response.ok) { caches.open(CACHE_NAME).then((cache) cache.put(event.request, response.clone())); } return response; }).catch(() cached); return cached || networkFetch; }) ); });这个策略叫 stale-while-revalidate用户打开页面时立刻看到缓存内容然后在后台请求新数据更新缓存和当前标签页。需要注意install中的addAll如果有一个资源失败整个缓存会失败所以列表里的路径必须真实存在。fetch事件里我用了response.clone()因为响应流只能消费一次缓存存一份页面用一份。注册Service Worker时要在主页面里加上一句if (serviceWorker in navigator) { navigator.serviceWorker.register(sw.js); }它只在 HTTPS 或 localhost 下工作直接双击 index.html 用file://协议是无效的这也是发布时需要注意的一个边界。打包zip前要记得把sw.js放在根目录并且让它引用的路径都改成相对路径否则离线缓存会失效。这样刷新页面时Service Worker会先返回缓存副本再在后台请求新数据并更新缓存。本文还有配套的精品资源点击获取