语义化html旅游行程应按天用组织有序事件，每项含iso 8601格式，用区分模块，类名标记状态，可选嵌入schema.org微数据。
用 HTML 标记旅游路线的行程安排，核心是让结构既符合人类阅读习惯，又能让搜索引擎、屏幕阅读器和后续工具（如导出 PDF、同步日志、生成地图）准确识别时间、地点、顺序和状态。不是堆 <div>，而是用语义化标签表达“谁在什么时候、去了哪里、做了什么”。<p><strong>关键原则：按天组织 + 按事件排序 + 时间可解析 + 状态可标记</strong></p>
<hr>
<h3>用 <code><ol></ol> 或 <time></time> 表达清晰的时间线
行程本质是有序事件流，<ol></ol> 天然表示先后顺序，比 <section></section> 或 <div> 更准确：<pre class="brush:html;toolbar:false;"><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></pre>
<ul>
<li>
<code>datetime 属性必须用 ISO 8601 格式（如 2026-09-10T08:30），便于机器提取、排序、提醒或导入日历；
<p>9月10日出发…</p>），那样无法被程序识别。用 <section></section> 区分行程模块，加 aria-label 提升可访问性
每天行程常含交通、住宿、景点、餐饮等类型，用 <section></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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </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"></span>是为兼容 Schema.org 结构化数据（后续可加itemscope itemtype="https://schema.org/Hotel"等）。
用类名 + CSS 控制状态，避免图片或 JS 依赖
行程中常需标注“待办 / 进行中 / 已完成”，纯 HTML/CSS 即可实现：
配合简单 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 查看是否被识别。
不复杂但容易忽略。
