精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（1）

look_w

HTML 和微数据如果访问 Meetup.com 上的  ，您会看到一个类似图 1 的网页。
图 1. 一场即将举办的 HTML5 Denver User Group 会议的 Meetup.com 信息
可以看到，使用即将举办的活动信息进一步自定义 UGLI 主页所需的所有原始材料，都在 Meetup.com 页面上（即将发表的演讲的标题、会议时间和地点，等等），但        Meetup.com 页面的设计与该数据紧密耦合。您想要提取并在 MEAN 应用程序中重用的信息，与 HTML 元素杂乱地混在一起，如清单 1 所示。（为了清晰性和简洁性，我对        HTML 进行了编辑。）
清单 1. Meetup.com HTML        源代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<ul>     <li itemscope="" itemtype="http://data-vocabulary.org/Event">         <span itemprop="eventType"               style="display:none;">Meetup</span>         <h3>             <a href="http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/" itemprop="url">                 <span itemprop="summary">"Developing Offline Applications" and "HTML 5 Animations"</span>             </a>         </h3>         <!-- snip -->     </li> </ul>

Microformats、microdata 和 RDFa！哦天哪！可通过多种竞争方式向您的 HTML 标记添加元数据。
  是一项定义常见元数据类型（比如联系人信息          (hCard) 和日历事件 (hCalendar)）的方法。它们是最早在缺乏任何官方途径时 Web 开发人员创建的实用解决方案。在许多情况下，它们是之前的非 HTML 规范（比如          vCard 和 iCalendar）的 HTML 端口。
  随后作为向基于 XML 的 XHTML          添加新命名空间属性的官方方式出现。（其中的 a 表示资源描述框架 (Resource Description Framework) 中的属性。）RDFa 是万维网联盟 (W3C)          定义的规范之一 — 这家标准机构还发布了 HTML 和 CSS 规范。
  也是一个 W3C 规范，它与取代          XHTML 的新 HTML5 规范相关联。
我们不会详细讨论各种格式的相关特征，本教程仅介绍 Meetup.com          用于标记其网页的微数据。几年来，我基于客户已有的资源在各种项目中使用过每种格式，每种格式的实现难度都差不多。出于遗留原因，所有 3 种格式都受所有主要搜索引擎支持。
如果还未使用过任何这些格式，也可以选择最新的格式，那就是微数据。一些主要搜索引擎在            网站上协作，为它们在其搜索结果中明显支持的许多最常见信息类型提供了一个交流中心：组织、人员、地点、产品和活动等等。在这里可同时找到微数据和 RDFa 表示的示例。

活动的标题（“Developing Offline Applications” 和 “HTML 5 Animations”）深入嵌套在 HTML        中的多层中。就 HTML 文档（和您的 Web 浏览器）而言，这个任意的字符串只是嵌套在一个无序列表 (<ul>) 内的几个列表项          (<li>) 之一。这个列表项有一个三级标题        (<h3>)，大概二级和一级标题都已在文档分层结构中定义。在标题内是一个超链接 (<a        href>)，其中进而包含一个任意的文本 <span>。
信息要按 Meetup.com 想要的格式显示，所有这些 HTML        标记必不可少。您的任务是以一种完全不同的方式在您应用程序中显示信息：您需要找到一种方式来从显示中分离出信息。
需要使用两个不同的语义层，如清单 1 所示。最基本的语义层我刚才已讨论：一项是一个列表项，另一项是一个超链接。这就是文档 语义。另一层是事件        语义，由 eventType、url 和 summary        等关键字表示。这些关键字与文档的呈现方式毫无关系。它们向搜索引擎（和查看 HTML 源代码的初学者）暗示信息的 “更高级含义”。这些属性是   规范的一部分。（有关微数据及其元数据前身的更多信息，请参阅   边栏。）
这个特定的列表项中仅包含一个 event 的信息。搜索引擎知道此事实，是因为设计该页面的人向该列表项添加了          itemtype="http://data-vocabulary.org/Event"。该页面包含许多任意超链接，其中带有          itemprop="url" 的超链接是 event          本身的链接。eventType 为 Meetup— 一个任意字符串，但 Meetup.com        会在其所有网页上一致地使用它。活动的 summary 由带 itemprop="summary" 属性的          <span> 来标识。
<span> 元素是浏览器在呈现页面时忽略的一些 HTML 元素之一。<b>          元素内的文本呈现为加粗字体；<h1> 文本的显示字号比 <h2>          文本更大；<a> 文本可单击，通常使用蓝色且带下划线。当然，所有这些默认样式规则都可使用 CSS 覆盖。但          <span> 标记的存在仅用于添加您自己的 CSS 样式 — 或者对于          中的 Meetup.com HTML 代码段，用于将 "Developing Offline Applications" and "HTML          5 Animations" 字符串包装在 itemprop="summary" 语义标签中。
有关可添加到 MEAN 标记中来进一步描述事件的完整元数据项列表，可首先访问 Meetup.com 用于定义事件的 URL： 。