完全可行，但需语义化结构（如<article><h2>）、Flexbox响应式布局、ARIA属性增强可访问性，并用静态筛选替代复杂交互。
用纯 HTML + CSS 实现旅行社线路列表页，不依赖框架可行吗？
完全可行，但必须明确：所谓“纯 HTML”页面实际需要内联或外链 CSS 控制布局与样式，否则浏览器默认渲染会严重偏离旅游线路展示需求（比如图片错位、价格信息挤成一团、行程天数无法对齐）。关键不是“能不能写”，而是怎么组织结构才能让内容语义清晰、后续好维护、手机上也能看。
线路卡片的 HTML 结构该怎么写才利于 SEO 和无障碍访问？
别用 <div> 堆砌。每条线路应包裹在 <article> 中，这是语义化核心。标题用 <h2>（不是 <h3> 或 <span>），出发地/目的地用 <dl><dt><dd> 组合而非无意义的 <p>，价格数字必须包在 <strong> 或 <span> 并加 aria-label 注明“起价”或“含税价”。
常见错误现象：
– 用多个 <div class="price"> 导致屏幕阅读器读不出数值含义
– 行程天数写成 “5天4晚” 纯文本，没用 <time datetime="P5D"> 标注时长
– 图片缺失 alt，或写成“线路图”这种无效描述
推荐结构要点：
立即学习“前端免费学习笔记（深入）”；
-
<article>包裹整条线路，加id="line-beijing-xian-7d"方便锚点跳转 -
<h2><a href="detail.html?id=123">西安兵马俑+华山7日游</a></h2>—— 标题可点，且带真实跳转链接 - 价格区块用
<div class="price"><strong>¥3980</strong><small>起/人</small></div> - 关键标签如“暑期特惠”“含高铁”用
<span class="tag tag-hot">，别用图片替代文字
响应式排版中，行程天数和出发日期怎么对齐才不乱？
移动端最常崩的就是“出发：6月15日｜天数：6天｜状态：余位紧张”这行信息。用浮动或 inline-block 容易换行错位，正确做法是用 CSS Flexbox，并设最小宽度保底。
实操建议：
- 容器加
display: flex; flex-wrap: wrap;，子项用flex: 1 1 120px;（保证小屏至少占 120px 宽） - “出发日期”字段必须含
datetime属性：<time datetime="2024-06-15">6月15日</time> - 避免用中文符号“｜”分隔，改用
::after伪元素加竖线，方便禁用时隐藏 - “余位紧张”这类状态文案，统一用
<span class="status status-limited">，CSS 控制颜色和背景，别写死颜色值
线路列表页要不要加搜索和筛选？如果加，前端怎么做最轻量？
如果后台没接口、纯静态页，就别硬加 JS 筛选——用户输完“云南”，你拿什么匹配？真要加，只做两级静态过滤：用 <select> 切换区域（华东 / 西南 / 出境），配合 data-region="yunnan" 属性 + 10 行 JS 显示/隐藏，别碰复杂条件组合。
容易踩的坑：
- 把所有线路数据塞进 JS 数组再渲染 —— 首屏变慢，SEO 友好性归零
- 筛选后 URL 不变，用户刷新就回到全量列表，分享链接失效
- 用
location.hash做状态但没监听hashchange，导致前进/后退失效
更务实的做法：把“按目的地筛选”做成带 href 的导航块，例如 <a href="?region=yunnan">云南线路</a>，服务端或构建时生成对应子页。前端只管样式联动。
真正难处理的是价格区间滑块、多选标签这类交互 —— 那已经超出纯 HTML/CSS 能力边界，该交由后端或轻量框架处理。别在静态页里强撑。
