简介这是一份基于HTML、CSS与JavaScript构建的静态旅游网站源码适合前端初学者、网页设计课程作业或小型旅行社展示站点使用无需后端环境即可直接部署浏览能够帮助读者快速理解多页面静态站点的组织方式。压缩包共173个文件以gif动图、htm页面、jpg图片、css样式表为主另有swf动画、js脚本及少量配置说明文件整体约872KB目录结构清晰便于替换图文内容并进行二次开发。已有2513人学习下载。源码涵盖景点介绍、旅游套餐、预订表单等典型页面重点演示了CSS布局美化、响应式适配、图片懒加载与SEO基础优化。通过阅读代码可掌握多页面站点组织方式、轮播与菜单交互实现思路以及符合W3C规范的命名注释习惯对理解静态网站完整工作流有直接帮助。 最近我把手头一套一直在用的html静态旅游网站源码整理了出来找我索取的朋友挺多。这套源码没有数据库、没有后端框架就是纯粹的HTMLCSSJavaScript解压后用浏览器打开index.html就能看到完整效果部署也简单。如果你是前端初学者、正在做课设或毕设或者想给旅行社、景区做一个展示型官网这套源码的结构和写法都可以直接拿去做底盘。当然单纯的源码文件给出去意义不大我更想借这篇博客把拆解思路、页面设计逻辑、响应式写法、性能与SEO优化点以及我在实际部署中踩过的一些坑一并讲清楚。1. 这套旅游站源码的定位与整体结构1.1 为什么坚持用纯静态而不是动态站先说一个很多人容易误解的点静态网站不等于简陋网站。景区官网、旅行社展示页、目的地介绍站这类站点的核心诉求是“把信息清楚地展示给访客”基本没有复杂的用户登录、订单后台、内容管理流程。用纯HTML搭建反而比引入一套PHP或Java框架更合适。原因很直白不需要数据库不需要服务端运行时随便一个HTTP服务就能跑没有注入点安全风险小页面加载速度快首屏几乎全是静态资源CDN一挂就能扛住大部分流量。这套旅游站点我没有用Vue、React也没有上构建工具而是刻意保持“打开源码就能看懂”的形态。源码里只有浏览器原生支持的HTML、CSS、JavaScript所有页面都是真实存在的.html文件不是脚手架编译出来的产物。这样做的好处是你不需要npm install不需要知道webpack是什么双击index.html就能开始改。对于想学前端基础、赶课设毕设、或者帮小商家做展示页的人来说这是最容易上手、也最容易复制的一套方案。1.2 源码包目录结构每一层都做了什么拿到这套源码建议先看一眼目录结构不要急着打开页面。我的目录组织方式是这样的travel-website/ ├── index.html # 首页 ├── destination.html # 目的地列表页 ├── detail.html # 景点详情页 ├── article.html # 旅游攻略列表页 ├── about.html # 关于/联系方式页 ├── css/ │ ├── style.css # 全局样式、组件样式 │ └── responsive.css # 响应式断点适配 ├── js/ │ ├── main.js # 导航折叠、轮播、返回顶部 │ ├── filter.js # 列表页筛选逻辑 │ └── lazyload.js # 图片懒加载 ├── images/ │ ├── hero/ # 首屏大图 │ ├── scenic/ # 景点配图 │ └── avatars/ # 用户评价头像 └── assets/ └── favicon.ico # 站点图标页面文件直接放在根目录是因为简单站点通常只有五六个页面再建一层pages/目录反而多余。CSS和JS按“全局”和“响应式”、“页面功能”做了拆分但刻意没有按页面拆成无数个文件。对于小项目文件太多会造成重复请求合并成两三个文件更利于浏览器缓存。图片目录按用途分类后期换图不迷路。这套结构不是唯一标准但它是我这几年做展示型站点用下来最顺手的一种方式新增一个页面时复制一个现有页面改内容再往css/style.css里补齐这个页面的专属样式即可不需要改动入口配置也没有路由注册的步骤。2. 页面骨架与模块拆解从首页到详情页的代码组织2.1 首页的语义化区块与导航结构首页的骨架我坚持用HTML5语义化标签而不是一水的div。这直接关系到SEO和屏幕阅读器的体验。打开index.html整体结构大概是这样的header classsite-header div classcontainer a hrefindex.html classlogo img srcassets/logo.png alt远方旅行 /a nav classmain-nav aria-label主导航 ul lia hrefindex.html classactive首页/a/li lia hrefdestination.html目的地/a/li lia hrefarticle.html攻略/a/li lia hrefabout.html关于/a/li /ul /nav button classnav-toggle aria-label展开菜单.../button /div /header main section classhero h1探索下一段旅程/h1 p精选国内外目的地与深度旅行攻略/p /section section classdestinations h2热门目的地/h2 !-- 目的地卡片列表 -- /section section classarticles h2最新攻略/h2 !-- 文章列表 -- /section section classreviews h2旅友评价/h2 !-- 评价卡片 -- /section /main footer classsite-footer div classcontainer p© 2024 远方旅行/p /div /footer注意h1只保留一个放在首屏的hero区块里。很多人喜欢在logo里放h1但logo本身是一个链接语义上更接近“站点标识”不适合作为页面唯一的一级标题。我用h1表达当前页面最核心的内容再让h2统领每个内容板块这样的标题层级对搜索引擎更友好。导航里的.active类也很讲究。它表示“当前所在页面”在CSS里高亮当前页的菜单项。这个类需要在每个页面手动改不能偷懒。否则访客在一个五六个页面的站里很容易转晕分不清自己在哪个栏目下。2.2 列表页、详情页与攻略页的复用思路目的地列表页destination.html的核心不是大片文字而是卡片栅格。每张卡片的结构我固定成下面这样方便批量复制article classcard a hrefdetail.html figure img classlazy>const filterBtns document.querySelectorAll(.filter-btn); const cards document.querySelectorAll(.card); filterBtns.forEach(btn { btn.addEventListener(click, () { const city btn.dataset.city; cards.forEach(card { const show city all || card.dataset.city city; card.style.display show ? block : none; }); }); });这个功能如果放到动态站上通常会走一遍数据库查询。但在静态站里数据量不大、筛选规则简单纯前端处理就是最优解。不需要刷新页面交互感更好实现成本也几乎为零。3. 响应式布局与交互细节为什么导航、轮播、懒加载要这样写3.1 栅格方案与断点取舍响应式是整个源码里最值得细看的部分。我没有引入Bootstrap的栅格系统因为这套源码的页面结构并不复杂原生Grid完全够用少一个依赖就少一分维护负担。景点卡片列表的栅格我是这样写的.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }auto-fill加minmax(260px, 1fr)的组合很巧妙当容器宽度足够时浏览器自动计算可以放几列当宽度变小列数自动减少。这个方案可以覆盖绝大多数情况不需要为每个断点单独写列数。不过栅格只是基础真正的响应式还要处理导航、字体和间距。我设了三个断点992px平板横屏导航从完整文字切换成图标加文字卡片列数减少768px平板竖屏导航变成汉堡菜单首页Banner文字缩小480px手机横竖屏所有内边距收紧详情页的图片和文字改成单列。这里的取舍是移动端优先。现在旅游类网站的流量大头在手机端如果先把桌面版写漂亮再回头压手机端往往要推翻一大半样式。从手机往桌面适配CSS的覆盖方向更自然后续维护也省心。3.2 导航折叠、轮播、返回顶部与懒加载这几个交互都是“源码开箱即用”的部分也是我建议初学者认真读一读的JavaScript片段。导航折叠用最直接的class切换实现const toggle document.querySelector(.nav-toggle); const nav document.querySelector(.main-nav); toggle.addEventListener(click, () { nav.classList.toggle(open); });在移动端.main-nav默认display: none或高度为0加上.open后展开为下拉菜单。为什么不直接用display:none和display:block切换因为如果后面想做平滑展开动画display无法过渡而用max-height或transform可以。源码里我选择了max-height配合transition展开收起都有过渡动画视觉上不会突然跳变。首页轮播用的是最简单的“横向位移”方案核心逻辑是把所有轮播项放在一个容器里通过transform: translateX(-100%)每次移动一屏的宽度let current 0; const track document.querySelector(.carousel-track); const slides document.querySelectorAll(.carousel-slide); function goToSlide(index) { current (index slides.length) % slides.length; track.style.transform translateX(-${current * 100}%); }这种写法没有引入Swiper二三十行代码就能满足自动播放和左右切换。缺点是不支持手势滑动如果产品硬性要求手机端能手指拖动还是得换Swiper这类库。但对于一个展示型旅游站自动播放加上左右按钮已经足够。返回顶部我建议不要用window.scrollTo(0, 0)瞬间跳转太生硬。用scrollTo({ top: 0, behavior: smooth })一行代码就能获得平滑滚动效果。懒加载部分源码同时用了HTML原生属性和JavaScript兜底img loadinglazy srcimages/scenic/beijing.jpg alt北京故宫原生loadinglazy在现代浏览器里已经很可靠但为了兼容老设备我额外用IntersectionObserver监控>img srcimages/scenic/hangzhou.jpg srcsetimages/scenic/hangzhou2x.jpg 2x alt杭州西湖 loadinglazy还有一个很多人忽略的点懒加载必须配合图片占位。前面提到的aspect-ratio就是解决办法之一。否则用户快速滑动页面时图片区域会不断撑高、收缩不仅视觉跳动还会让IntersectionObserver的计算出现偏差。4.2 CSS/JS的加载顺序与基础SEO标签性能优化不只是压缩图片资源的加载顺序也很关键。CSS放在head里是因为浏览器要等CSS解析完才能正确渲染样式如果放在页面底部会出现先看到裸HTML、再突然“啪”一下变出样式的闪烁问题。而JavaScript放在/body之前是因为大部分脚本需要操作DOM元素必须等DOM结构生成完再执行即使放在head里并加了defer也不如直接放底部来得直观。SEO方面我坚持给每个页面写独立的title和description不要五个页面共用一套。搜索引擎对每个页面的标题描述是非常重视的这也是零成本优化title青岛旅游攻略 - 远方旅行/title meta namedescription content青岛三天两夜旅游攻略栈桥、八大关、小麦岛公园路线与美食推荐。然后加上Open Graph标签让链接分享到社交平台时有漂亮的卡片meta propertyog:title content青岛旅游攻略 meta propertyog:description content青岛三天两夜旅游攻略含景点路线与美食推荐。 meta propertyog:image contenthttps://your-domain.com/images/hero/qingdao.jpg对于旅游这种带有明确实体的内容我还在详情页里加了JSON-LD结构化数据帮助搜索引擎理解页面主题script typeapplication/ldjson { context: https://schema.org, type: TouristAttraction, name: 栈桥, description: 青岛标志性海滨景点适合看海鸥与日落。, address: { type: PostalAddress, addressLocality: 青岛, addressCountry: CN } } /script结构化数据不会直接改变页面外观但在搜索结果里可能获得更丰富的展示位置对景点类内容很值得做。5. 二次开发、部署上线与踩坑记录5.1 改文案、换图、新增页面的标准流程拿到这套源码后很多人问的第一句话是“我想把里面的景点换成我家那边的该怎么改”。我的建议是先不要着急替换先打开css/style.css找到CSS变量这一段:root { --primary: #16a085; --text-color: #333333; --bg-light: #f7f7f7; }把--primary改成你自己品牌的主色调全站按钮、链接、高亮颜色就会跟着变。这一步我会放在最前面因为先确定整体视觉后续换图才有参照。换文案更简单直接在对应HTML文件里搜索景点名称或描述文字原地替换即可。要注意的是如果替换成更长的文字卡片标题和描述可能会出现换行不整齐建议顺手看一眼卡片区域是否仍然统一。新增页面的标准流程是复制一个现有页面改成新文件名然后改三处地方一是title和meta namedescription二是main里的主体内容三是导航菜单里的.active类位置。如果新页面需要自己的样式在responsive.css末尾追加一节不要随手插在文件中间这样以后排查问题会方便很多。5.2 部署上线与高频Bug处理本地预览时很多人习惯直接双击index.html。大部分静态页面这样看没问题但涉及到fetch请求本地JSON、或者某些浏览器对本地文件的安全限制时功能可能会静默失效。更稳妥的方式是起一个本地静态服务器在源码目录下执行cd travel-website python3 -m http.server 8080然后访问http://localhost:8080就能看到效果。如果你的电脑没装Python也可以用npx serve或者VS Code的Live Server插件。上线部署的方案我常用的是把它扔到GitHub Pages、Gitee Pages或者自己的Nginx目录里。以Nginx为例把整个travel-website目录拷到服务器web目录下确保目录权限可读即可不需要任何额外配置。部署之后如果页面打开是纯文本、没有样式十有八九是CSS路径写错了。我踩过最典型的坑是把路径写成了绝对路径link relstylesheet href/css/style.css这种写法在本地双击时可能正常但部署到子目录时浏览器会去域名根目录找css/style.css自然找不到。改成相对路径link relstylesheet href./css/style.css就能保证当前页面无论放在哪个层级都能正确找到样式文件。另一个高频坑是图片名大小写不一致。Windows本地上传文件不区分大小写页面照样显示但部署到Linux服务器后Scenic/Qingdao.jpg和scenic/qingdao.jpg会被当成两个完全不同的路径图片就裂了。所以我的习惯是所有图片文件一律用小写字母加中划线命名从源头避免这个问题。最后再分享一个我的个人习惯每完成一个页面我都会用浏览器开发者工具里的Lighthouse跑一遍移动端性能评分重点看Performance和SEO两项。很多问题比如图片没压缩、标题缺失、字体过大都会在报告里直接标出来。这个习惯帮我省掉了大量上线后返工的时间也推荐你试试。本文还有配套的精品资源点击获取