HTML怎么显示服务时间_HTML营业时间语义化标记【说明】-html教程-PHP中文网

应使用展示营业时间，仅用于有具体日期的时间点；机器识别需用schema.org json-ld，例外信息须单独标记。

html怎么显示服务时间_html营业时间语义化标记【说明】

用 `<time></time>` 标记营业时间，但别乱加 `datetime`

HTML 里显示“服务时间”最靠谱的方式是用 <time></time> 元素，但它不是万能时间容器——只适合表达机器可读的、有明确日历/时钟意义的时间点或区间。营业时间（比如“周一至周五 9:00–18:00”）属于周期性、无具体起止日期的常规安排，datetime 属性不能填模糊描述。

常见错误是这么写：<time datetime="9:00–18:00">9:00–18:00</time> —— 这违反规范，datetime 值必须符合 WHATWG 时间格式要求，不接受范围、中文、省略日期等写法。

正确做法：用 <time></time> 包裹纯时间字符串，仅当它对应真实时刻（如“开业时间：2024-06-01T09:00”）才设 datetime
营业时间这种常规安排，语义上更接近“描述性文本”，优先用 <p></p> 或 <div>，配合 ARIA 属性辅助理解（见下条） <li>如果页面需结构化提取营业信息（比如被搜索引擎识别），应使用 <code>schema.org/OpeningHoursSpecification JSON-LD，而不是强塞 <time></time>

想让搜索引擎识别营业时间？直接加 JSON-LD，别靠 HTML 标签硬凑

Google 等搜索平台解析营业时间，几乎不依赖 <time></time> 或 class 名，而是认 script type="application/ld+json" 里的结构化数据。HTML 标签只负责人类可读展示，机器理解得靠 schema。

示例片段（放在或页面末尾）：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "咖啡馆",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "09:00",
    "closes": "18:00"
  }]
}

必须用 "dayOfWeek" 写英文枚举值（"Monday"），不能写“周一”或数字
"opens"/"closes" 是 24 小时制，带前导零（"09:00" ✅，"9:00" ❌）
多时段（如午休暂停）要拆成多个 OpeningHoursSpecification 对象
JSON-LD 不影响页面渲染，但漏掉 @context 或类型拼错（如写成 "OpenHoursSpecification"），整个块就失效

视觉呈现营业时间，用 `<dl></dl>` 比 `<table> 更合理 <p>虽然题目问 HTML 标记，但实际开发中，“怎么显示”绕不开样式和可访问性。<code><table> 看似直观，但营业时间本质不是二维数据表——没有行列关系、不涉及排序或计算，强行用 table 会误导屏幕阅读器用户以为在读数据表格。 <p>推荐用定义列表 <code><dl></dl>`：每天是 `<dt></dt>`，时间是 `<dd></dd>`，逻辑清晰且原生支持语义化导航。

避免写成 `<p>周一：9:00–18:00</p>` —— 无法 programmatically 区分“周一”和“9:00–18:00”

别给 `<dt></dt>` 加 `aria-label` 重复内容，它本身已是标签角色

若需响应式折叠（如移动端收起非今日时间），用 JS 控制 `hidden` 属性，别删 DOM 或改 display

服务时间含例外（节假日、临时调整）？单独标记，别混进常规时段

一旦出现“春节初一至初三暂停营业”这类例外，把它和常规营业时间分开处理，否则结构混乱、机器难解析、维护成本陡增。

常规时段用 JSON-LD 的 openingHoursSpecification 描述
例外用独立 specialOpeningHoursSpecification 字段（同属 schema.org/LocalBusiness）
HTML 层面，例外信息建议放在常规时间下方，用 <aside></aside> 包裹，并加 role="note" 和 aria-live="polite"（如果后续 JS 动态更新）
切忌把例外写成“备注”塞在 <dd></dd> 里，比如 <dd>9:00–18:00（除夕提前至15:00关门）</dd> —— 既难抽取，又破坏可访问性流