纯HTML无法实现可交互火车票查询页，必须结合JavaScript发起请求、校验日期并动态渲染；需用form包裹字段但onsubmit阻止默认行为，改用fetch调用接口，配合datalist实现站点提示，且须绕过file://协议限制运行于本地服务器。
怎么用纯 HTML 搭出可交互的火车票查询页
纯 HTML 本身不能发起请求、不能处理日期校验、也不能动态渲染车次列表——所谓“HTML 火车票查询页”，实际是 HTML + JavaScript 的最小可行组合，后端接口（如 12306 开放 API 或模拟 mock 接口）必不可少。直接写 <form></form> 提交到一个假地址或 javascript:void(0) 只会卡在表单提交环节，得不到任何结果。
实操建议：
- 用
<form></form>包裹查询字段（出发地、到达地、<input type="date">），但onsubmit阻止默认行为，改用fetch()调用接口 - 出发站/到达站建议用
<datalist></datalist>+<input list>实现简易站点提示，避免手写全称（如“北京南”“上海虹桥”） -
<input type="date">的min属性设为今天：min="{{new Date().toISOString().split('T')[0]}}"（模板中需 JS 注入，静态 HTML 里可先写死如min="2024-06-01"） - 不要用
<select></select>硬编码几百个车站——体积大、难维护、无法模糊匹配
查询结果页面怎么用 HTML 渲染真实数据结构
12306 返回的 JSON 中，关键字段如 train_no、from_station_name、to_station_name、start_time、arrive_time、lishi（历时）、yp_info（余票信息）都不是标准驼峰命名，HTML 模板必须严格对应字段名，拼错一个就渲染为空。
示例片段（JS 动态插入）：
立即学习“前端免费学习笔记（深入）”；
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.train_no}</td>
<td>${item.from_station_name}</td>
<td>${item.to_station_name}</td>
<td>${item.start_time}</td>
<td>${item.arrive_time}</td>
<td>${item.lishi}</td>
<td>${item.yz_num || '--'}</td>
`;注意点：
-
yz_num（硬座）、rz_num（软座）、dw_num（动卧）等余票字段可能为"--"字符串或null，需用|| '--'容错 - 历时
lishi格式是"03:24"，不是秒数，不可直接用于计算 - 车次号
train_no和真实显示的station_train_code（如“G101”）不同，后者才是用户看到的车次，别混用
为什么本地双击打开 HTML 文件查不到票
浏览器同源策略会拦截 file:// 协议下的 fetch() 请求（报错 Access to fetch at 'xxx' from origin 'null' has been blocked）。这不是代码写错了，是协议限制。
绕过方法只有两个：
- 用轻量 HTTP 服务跑起来：比如 Python 3 自带的
python -m http.server 8000，然后访问http://localhost:8000/index.html - Chrome 启动时加参数禁用安全策略（仅测试用）：
chrome --user-data-dir="/tmp/chrome_dev_test" --unsafely-treat-insecure-origin-as-secure="file://"（不推荐长期使用）
别试 XMLHttpRequest、document.write 或 iframe 假跳转——它们同样受同源限制，且 12306 不支持 JSONP。
CSS 怎么让车次表格在手机上不横向溢出
常见错误是给 <table> 加 <code>width: 100% 就以为响应式了，结果小屏上依然要左右拖。真正有效的是强制单列堆叠 + 横向滚动容器。
实操写法：
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
<table style="min-width: 600px;">
<!-- 表格内容 -->
</table>
</div>要点：
- 外层
<div> 控制横向滚动，<code>min-width确保表格不被压缩变形 - 去掉所有固定像素宽度（如
width="120"），改用max-width或百分比 - 小屏下可隐藏非关键列（如历时、余票详情），用
@media (max-width: 480px)+display: none
移动端点击区域太小也是高频问题：把每行 <tr> 包进 <code><a href="#"></a> 或加 padding: 12px 8px，不然用户点不中。
