第19篇：高级语义与微数据

第19篇高级语义与微数据HTML5 不仅提供了结构标签还提供了让机器读懂内容的工具。time、address、details/summary等高级语义标签以及微数据Microdata让你的网页对搜索引擎和自动化工具更友好。学习目标掌握time、address、details/summary、data等高级语义标签理解微数据Microdata的基本概念和语法学会使用 Schema.org 词汇表标记结构化数据了解这些技术对 SEO 和可访问性的实际价值能够在网页中正确应用微数据核心知识点一、时间标签timetime标签标记日期和时间通过datetime属性提供机器可读的格式。!-- 基础用法 --p文章发布于timedatetime2024-06-012024年6月1日/time。/p!-- 带具体时间 --p会议时间timedatetime2024-06-01T14:30:0008:002024年6月1日 下午2:30/time/p!-- 只有时间 --p开放时间timedatetime09:00上午9点/time至timedatetime18:00下午6点/time/p!-- 持续时间 --p视频时长timedatetimePT15M30S15分30秒/time/pdatetime格式速查类型格式示例日期YYYY-MM-DD2024-06-01时间HH:MM/HH:MM:SS14:30/14:30:00日期时间YYYY-MM-DDTHH:MM:SS2024-06-01T14:30:00带时区HH:MM2024-06-01T14:30:0008:00持续时间PTH#MS#SPT15M30S15分30秒年月YYYY-MM2024-06年仅YYYY2024为什么用 time搜索引擎通过datetime理解内容的时效性日历应用可以自动识别并添加事件。二、联系信息addressaddress标记内容作者/所有者的联系信息不是通用的地址。articleh2文章标题/h2p文章内容.../p!-- 标记文章作者的联系信息 --addressp作者张三/pp邮箱ahrefmailto:zhangsanexample.comzhangsanexample.com/a/ppGitHubahrefhttps://github.com/zhangsanzhangsan/a/p/address/article!-- 页面级联系信息 --footeraddressp© 2024 示例公司/pp北京市朝阳区 xxx 大厦/pp电话010-1234-5678/p/address/footeraddress的使用范围✅ 适合❌ 不适合文章作者的联系信息任意地址如快递收货地址网站运营方的联系方式没有联系人属性的纯位置组织的联系信息—三、折叠详情detailssummary无需 JavaScript就能实现点击展开/收起的效果。detailssummary常见问题如何退款/summaryp您可以在购买后 7 天内申请退款。请登录账户在订单详情页点击申请退款按钮。/p/detailsdetailssummary常见问题支持哪些支付方式/summaryulli支付宝/lili微信支付/lili银行卡/li/ul/detailsopen属性!-- 默认展开 --detailsopensummary默认展开的内容/summaryp这段内容默认可见。/p/details多级嵌套detailssummary第一章HTML 基础/summarydetailssummary1.1 什么是 HTML/summarypHTML 是超文本标记语言.../p/detailsdetailssummary1.2 HTML 文档结构/summaryp一个基本的 HTML 文档包含.../p/details/details应用场景FAQ、文档目录、设置面板、评论折叠等。四、机器可读数据datadata标签为内容提供一个机器可读的等价值。!-- 产品价格人类可读 机器可读 --p价格datavalue299.00¥299/data/p!-- 库存数量 --p库存datavalue50仅剩 50 件/data/p!-- 产品编号 --p型号datavalueSKU-12345Pro Max 2024/data/pdata vs timetime专用于日期时间data用于任何需要机器可读值的场景。五、微数据Microdata入门微数据是一种在 HTML 中嵌入结构化数据的方式让搜索引擎理解页面内容的含义。基本语法divitemscopeitemtypehttps://schema.org/Personspanitempropname张三/spanspanitempropjobTitle前端工程师/spanahrefmailto:zhangsanexample.comitempropemailzhangsanexample.com/a/div属性作用itemscope定义一个数据项的范围itemtype指定数据类型来自 Schema.orgitemprop定义数据项的属性在 DevTools 中查看Chrome DevTools → Elements → 右键元素 → “Show HTML5 Microdata”部分版本支持六、Schema.org 常用类型Schema.org 是 Google、Bing、Yahoo 共同支持的结构化数据词汇表。文章Articlearticleitemscopeitemtypehttps://schema.org/Articleheaderh1itempropheadlineHTML5 语义化指南/h1p作者spanitempropauthoritemscopeitemtypehttps://schema.org/Personspanitempropname张三/span/span/ptimeitempropdatePublisheddatetime2024-06-012024年6月1日/time/headerdivitemproparticleBodyp文章内容.../p/div/article产品Productdivitemscopeitemtypehttps://schema.org/Producth2itempropname无线蓝牙耳机/h2imgsrcheadphone.jpgalt耳机图片itempropimagewidth200divitempropoffersitemscopeitemtypehttps://schema.org/Offerspanitemproppricecontent299.00¥299/spanmetaitemproppriceCurrencycontentCNYspanitempropavailabilitycontenthttps://schema.org/InStock有货/span/divdivitempropaggregateRatingitemscopeitemtypehttps://schema.org/AggregateRating评分spanitempropratingValue4.5/span/spanitempropbestRating5/spanspanitempropreviewCount128/span条评价/div/div面包屑导航BreadcrumbListnavaria-label面包屑olitemscopeitemtypehttps://schema.org/BreadcrumbListliitempropitemListElementitemscopeitemtypehttps://schema.org/ListItemaitempropitemhref/spanitempropname首页/span/ametaitemproppositioncontent1/liliitempropitemListElementitemscopeitemtypehttps://schema.org/ListItemaitempropitemhref/articlesspanitempropname文章/span/ametaitemproppositioncontent2/liliitempropitemListElementitemscopeitemtypehttps://schema.org/ListItemspanitempropname当前文章/spanmetaitemproppositioncontent3/li/ol/nav七、微数据的 SEO 价值搜索结果富媒体展示 ┌─────────────────────────────────────────┐ │ HTML5 语义化完全指南 │ │ example.com │ │ │ │ ⭐ 4.5 (128条评价) │ ← 来自 AggregateRating │ ¥299 | 有货 │ ← 来自 Product/Offer │ 2024年6月1日 · 张三 │ ← 来自 Article └─────────────────────────────────────────┘微数据类型搜索结果效果Article显示作者、发布时间Product显示价格、库存、评价Recipe显示烹饪时间、评分、图片FAQPage显示问答折叠HowTo显示步骤列表动手练习练习 1time 标签实践为一篇新闻文章添加时间标记发布日期2024 年 6 月 15 日最后修改时间2024 年 6 月 16 日 10:30北京时间活动持续时间2 小时 30 分钟使用正确的datetime格式练习 2details/summary FAQ创建一个包含 5 个问题的 FAQ 页面每个问题用detailssummary第一个问题默认展开open尝试嵌套结构如账户相关下面有多个子问题练习 3为个人主页添加微数据为一个个人简介页面添加 Schema.org Person 微数据姓名、职位、公司邮箱、电话、地址社交媒体链接使用 Google 的 富媒体测试工具 验证常见误区 ⚠️误区真相“address可以写任意地址”只应写作者/所有者的联系信息。收货地址用p“time只能标记完整日期”可以标记日期、时间、年月、持续时间等“details/summary需要 JavaScript”❌ 纯 HTML 原生支持无需 JS“微数据对 SEO 没有实际影响”Google 明确使用微数据生成富媒体结果提升点击率“Schema.org 只有英文”有中文翻译但itemtypeURL 仍用英文“所有页面都需要微数据”不是必须但对产品、文章、事件页面强烈建议“data和time可以互换”不能time专用于时间data用于其他机器可读值“微数据只能用于搜索引擎”也用于屏幕阅读器、智能助手、自动化工具速查卡片 高级语义标签速查标签语义示例time日期/时间time datetime2024-06-016月1日/timeaddress作者联系信息addressa hrefmailto:.../addressdetails可折叠详情detailssummary标题/summary.../detailssummarydetails 的标题必须作为 details 的第一个子元素data机器可读数据data value299¥299/data微数据三要素divitemscopeitemtypehttps://schema.org/类型spanitemprop属性名属性值/span/div常用 Schema.org 类型类型适用场景Article博客文章、新闻Person个人简介Product产品页面Organization公司/组织BreadcrumbList面包屑导航FAQPageFAQ 页面HowTo教程/步骤time datetime 格式日期 YYYY-MM-DD → 2024-06-01 时间 HH:MM:SS → 14:30:00 日期时间YYYY-MM-DDTHH:MM → 2024-06-01T14:30 带时区 HH:MM → 2024-06-01T14:3008:00 持续时间PTH#MS#S → PT2H30M2小时30分钟高级语义 checklist日期时间用timedatetime作者联系信息用addressFAQ/可折叠内容用detailssummary机器可读值用datavalue产品/文章页面考虑添加微数据用 Google 富媒体测试工具验证微数据扩展阅读MDN:元素MDN: 元素MDN: 和Schema.org 官网英文Google 富媒体测试工具下一步HTML 不仅是结构标记还能调用浏览器的高级能力。进入 第20篇HTML5 新 API 概览了解 Canvas、Geolocation、LocalStorage 等浏览器端 API。