航班详情页核心结构必须用语义化html组织：以划分逻辑区块，区块内用+/表达键值对，时间字段用标签，配合aria-labelledby和标题id保障无障碍导航。
航班详情页核心结构怎么组织才不翻车
直接说结论：别用 div 堆砌“看起来像卡片”的布局，航班详情页的语义结构必须以 <section></section> 划分逻辑区块（如“出发信息”“到达信息”“乘客与值机”），每个区块内用 <dl></dl> + <dt></dt>/<dd></dd> 表达键值对——这是最贴合“航班号、起飞时间、登机口、状态”这类强字段关系的原生语义方案。
常见错误是把所有内容塞进一堆 <div class="item">，结果屏幕阅读器读不出字段含义，SEO 也抓不到关键信息。更麻烦的是后期加“可折叠行程段”或“多旅客信息”时，DOM 结构一改全乱。
<p>实操建议：</p>
<ul>
<li>用 <code><section aria-labelledby="sec-depart"></section> 配合 <h3 id="sec-depart">出发</h3>，确保无障碍导航可定位
<dt></dt> 写中文标签（如“计划起飞”），<dd></dd> 放具体值；避免用 <span class="label"></span> 模拟 dt<time datetime="2024-06-15T08:30">08:30</time>，浏览器和爬虫能识别时区与格式CSS 实现响应式航班卡片时，flex 和 grid 怎么选
别一上来就 grid。小屏（flex-direction: column 加 gap 更轻量、更可控；大屏才切到 display: grid 做两列或三列对齐（比如左侧时间轴、右侧状态+登机口）。
硬套 grid 的坑在于：当“中转航班”出现时，你得为每段行程动态生成 grid-template-areas，而 flex 只需给每个 <section></section> 加 flex: 1 就自动均分宽度，维护成本低得多。
实操建议：
- 基础层用
display: flex; flex-direction: column;，媒体查询里只在@media (min-width: 768px)启用 grid - 避免用
grid-column: span 2跨列控制“航班号横跨两行”，改用align-items: start+grid-template-columns: 1fr 2fr显式定义 - 登机口、状态等短文本用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止换行错位
动态更新航班状态时，DOM 操作要避开哪些雷
状态变更（如“已登机”→“准备登机”）不能整块 innerHTML = newHtml 替换，会丢失焦点、重置表单控件、触发无意义重绘。必须精准替换文本节点或切换 class。
典型翻车场景：用户正在输入“选座偏好”，页面突然刷新整个 <section></section>，输入框失焦且内容清空。或者用 document.querySelector('.status').innerText = '延误'，但没同步更新 aria-live 区域，视障用户根本不知道变了。
实操建议：
- 状态文案用
<span class="flight-status" aria-live="polite">准点</span>，只改textContent - 时间类字段（如预计到达）用
data-timestamp存毫秒数，JS 计算后只更新<time></time>的datetime属性和显示文本 - 避免监听
DOMNodeInserted这类废弃事件，改用MutationObserver监控特定 class 变化
为什么航班页千万别用 JavaScript 渲染核心信息
搜索引擎和微信内置浏览器默认不执行 JS，如果航班号、起降时间、机场三字码都靠 fetch() + render() 注入，SEO 为零，分享链接到微信里预览图就是空白页或“加载中”。更糟的是弱网用户等 3 秒白屏，直接关掉。
真实场景中，后端模板（如 EJS、Thymeleaf）或静态 HTML 预渲染是底线。JS 只负责补丁式增强：倒计时、实时地图、值机按钮状态轮询。
实操建议：
- HTML 中必须存在完整静态结构，哪怕初始值写死（如
<dd>PEK</dd>），再由 JS 覆盖 - 用
<link rel="preload" href="/api/flight/CA123" as="fetch">提前拉取接口，但绝不阻塞首屏渲染 - 服务端若支持，优先用
HTTP Server Push或Edge Side Includes注入动态字段，比客户端 JS 更稳
最易被忽略的点：中转航班的“经停机场”字段常被当成装饰性图标处理，但其实它影响行李直挂判断，必须作为 <dd></dd> 文本存在，不能只靠 SVG 图标传达。
