语义化HTML旅游行程应按天用<ol>组织有序事件，每项含ISO 8601格式<time datetime>，用<section aria-label>区分模块，类名标记状态，可选嵌入Schema.org微数据。
用 HTML 标记旅游路线的行程安排，核心是让结构既符合人类阅读习惯，又能让搜索引擎、屏幕阅读器和后续工具（如导出 PDF、同步日志、生成地图）准确识别时间、地点、顺序和状态。不是堆 <div>，而是用语义化标签表达“谁在什么时候、去了哪里、做了什么”。
关键原则：按天组织 + 按事件排序 + 时间可解析 + 状态可标记
用 <ol> 或 <time> 表达清晰的时间线
行程本质是有序事件流，<ol> 天然表示先后顺序，比 <section> 或 <div> 更准确：
<ol class="itinerary-day">
<li>
<time datetime="2026-09-10T08:30">9月10日 上午8:30</time>
<strong>出发</strong>：厦门高崎机场 T4 → 北京首都机场（CA1802）
</li>
<li>
<time datetime="2026-09-10T12:15">中午12:15</time>
<strong>抵达</strong>：北京首都机场，接机专车等候（车牌：京A·XXXXX）
</li>
</ol>-
datetime属性必须用 ISO 8601 格式（如2026-09-10T08:30），便于机器提取、排序、提醒或导入日历； - 不要用“Day 1”“D1”等模糊表述，也不要把时间塞进普通文本里（如
<p>9月10日出发…</p>），那样无法被程序识别。
用 <section> 区分行程模块，加 aria-label 提升可访问性
每天行程常含交通、住宿、景点、餐饮等类型，用 <section> 包裹并标明用途：
立即学习“前端免费学习笔记（深入）”；
<section aria-label="9月10日 住宿安排"> <h3>住宿</h3> <p><strong>北京王府井希尔顿酒店</strong></p> <p>地址：<span property="address">北京市东城区王府井东街8号</span></p> <p>入住时间：14:00 后｜退房时间：12:00 前</p> </section> <section aria-label="9月10日 景点游览"> <h3>故宫博物院</h3> <p><time datetime="2026-09-10T14:30">14:30 入场</time>｜预约码已发至邮箱</p> <p>建议游览时长：2.5 小时｜含讲解服务</p> </section>
-
aria-label帮助读屏软件理解模块意图，比如“9月10日 景点游览”，比单纯<h3>景点</h3>更明确； - 地址用
<span property="address">是为兼容 Schema.org 结构化数据（后续可加itemscope itemtype="https://schema.org/Hotel"等）。
用类名 + CSS 控制状态，避免图片或 JS 依赖
行程中常需标注“待办 / 进行中 / 已完成”，纯 HTML/CSS 即可实现：
<li class="itinerary-item status-current"> <time datetime="2026-09-11T09:00">9月11日 09:00</time> <strong>华山北峰索道上山</strong> </li> <li class="itinerary-item status-done"> <time datetime="2026-09-11T12:30">12:30</time> <strong>北峰登顶｜合影留念</strong> </li>
配合简单 CSS：
.status-done { text-decoration: line-through; color: #6c757d; }
.status-current::before {
content: "▶";
margin-right: 6px;
color: #007bff;
}- 不依赖 JS 切换状态，静态页也能直观呈现进度；
- 避免用
<img src="done.png">或字体图标，确保无网络、高对比度模式下仍可读。
可选：嵌入 Schema.org 微数据增强 SEO 和智能设备支持
如果希望行程被 Google 搜索、Siri 或安卓日历自动识别，可加轻量微数据：
<div itemscope itemtype="https://schema.org/TouristTrip">
<meta itemprop="name" content="西安+华山7日文化之旅">
<meta itemprop="startDate" content="2026-09-10">
<meta itemprop="endDate" content="2026-09-16">
<div itemprop="itinerary" itemscope itemtype="https://schema.org/ItineraryItem">
<meta itemprop="name" content="兵马俑参观">
<meta itemprop="startDate" content="2026-09-12T08:30">
<meta itemprop="endDate" content="2026-09-12T12:00">
</div>
</div>- 不必全写，挑关键节点（首日、末日、核心景点）加几项即可；
- 验证可用 Google Rich Results Test 查看是否被识别。
不复杂但容易忽略。
