旅游网站首页应以html5语义标签构建结构、css3实现响应式布局、js仅作轻量交互；顶部用替代，导航链接须指向真实页面，移动端添加aria属性，轮播图优选swiper库并动态加载，内容按用户动线组织，全站共享css变量与导航逻辑。
用 <header></header> + <nav></nav> 做顶部导航栏，别再套 <div id="top">
<p>很多学生作业还在用一堆 <code><div> 拼导航，结果语义混乱、SEO 差、屏幕阅读器无法识别。正确做法是：
<ul>
<li>
<code><header></header> 包住 logo 和主导航，<nav></nav> 里面只放 <ul><li><a></a></li></ul> 结构
href="scenic.html"，而不是 href="#" 占位——后者会让用户点开空白页还找不到返回入口aria-expanded 和 aria-controls 属性，不然折叠菜单对残障用户不可操作轮播图用 swiper 而不是手写 setInterval + opacity
手写轮播看似简单，但容易出三类问题：自动播放停不下来、触摸滑动冲突、图片加载失败后白屏。用现成库更稳：
- 优先选
swiper（v11+），它内置了 resize 监听、懒加载、键盘导航支持，且体积小（gzip 后约 28KB） - 避免把所有轮播图
<img>写死在 HTML 里——改图就得改代码；应改为 JS 动态注入，或用data-src+loading="lazy" - 轮播容器必须设固定高度（如
min-height: 400px），否则内容流下去会把下方板块顶飞
<main></main> 里按「核心信息流」组织区块，不是按设计稿分区
学生常把首页拆成「景点推荐」「美食地图」「交通指南」三个平行 div，结果用户扫一眼找不到重点。实际应按用户动线排：
- 第一屏放「行动召唤」：比如
<h1>无锡鼋头渚春日赏樱</h1> + <button>查看花期攻略</button>，按钮链接到blossom.html - 第二屏才是精选图集，每张图配简短说明（不超过 12 字）和
href跳转，不要塞长段介绍文字 - 底部放「实用工具」区块：嵌入一个轻量级的
<iframe src="https://www.google.com/maps/embed?..."></iframe>，比手绘地图 SVG 更准且免维护
index.html、scenic.html、contact.html 共享同一套 CSS 变量（比如 --primary-color: #1a6d7a;）和导航逻辑——否则改个颜色要手动同步 15 个文件。这点几乎没人提，但上线后改版成本全在这儿。
