跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

这是您第一次登陆到 developerWorks，已经自动为您创建了您的概要文件。 选择您概要文件中可以公开的信息的信息（如姓名、国家/地区，以及公司），这些信息同时也会与您所发布的内容相关联。 您可以随时更新您的 IBM 账号。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

选择语言：

  • 关闭 [x]
  • 关闭 [x]

使 HTML5 微数据发挥作用，第 1 部分: 在微数据之上使用 jQuery

使用 jQuery UI Map 插件和您的微数据创建一个交互式地图

Lin Clark, Drupal 开发人员, Digital Enterprise Research Institute, NUI Galway
Lin Clark 的照片
Lin Clark 是 Drupal 的一名开发人员，专门从事 Linked Data 方面的工作。她是多个 Drupal 模块（比如 Microdata 和 SPARQL Views）的维护人员，还积极参与了 W3C 的 HTML Data Task Force 和 Drupal 的 HTML 5 计划。她曾就读于卡耐基梅隆大学，现正在攻读 NUI Galway 的 Digital Enterprise Research Institute 的研究硕士学位。您可以在 lin-clark.com 上了找到关于她的更多信息。

简介： 微数据规范列出了两条使用微数据的理由：允许通用脚本提供针对页面自定义的服务，或是以一致的方式用单一脚本处理来自各位合作作者的内容。在由两部分组成的本系列文章中，将学习如何用这两种方式使用微数据，先从微数据上的通用脚本开始介绍。在本文中，您将编写一段 HTML 来为您提供一个交互式事件地图，并使 Google、Bing 和 Yahoo 能够使用 Rich Snippet 在搜索结果中更好地显示您的页面。

查看本系列更多内容

发布日期： 2011 年 12 月 19 日
级别： 中级
原创语言： 英文
访问情况 ： 7713 次浏览
评论： 


简介

像 jQuery 此类的库使开发人员创建站点的方式发生了革命性的变化，促进了大量可方便地添加至 HTML 的实用脚本的开发。微数据具有进一步推进此项革命的潜力，可以更加容易地创建可在任何站点上进行无缝工作的脚本，无论 HTML 模板有何变化。

常用缩写词

  • CSV：逗号分割值
  • JSON：JavaScript 对象表示法
  • RDF：资源描述框架
  • RDFa：属性中的 RDF
  • SEO：搜索引擎优化

例如，要在地图上显示计划的事件，jQuery 插件会集成 Google 地图，使在您站点上创建交互式地图变得简单。而您所要做的是以一种结构化格式（比如 JSON 或 CSV）创建一个包含位置的文件。但是，如果您还希望在页面上以 HTML 格式显示信息，拥有这种具有独立的结构化格式的数据可能是个难题。要同时去维护 HTML 和数据文件中的内容，您要么必须编写一段脚本来实现页面上 HTML 和数据文件之间转换，要么您必须重复执行工作。这种方法可能会很快导致 HTML 和数据文件不同步。

保持文件同步是使用像微数据和 RDFa 等 HTML 数据格式的一项重要优势，您可以像平常一样编写 HTML，然后在 HTML 标记中添加一些属性，使它和您的数据存储大小翻倍。因为这些 HTML 数据格式都是由 WHARWG 和 W3C 开发和批准的，人们已经构建了如何从 HTML 提取数据的构建工具，并且您可以在您的站点上轻松重用这些工具。

由于微数据只最近才开始受到人们的关注，所有只有少量已发布的插件提供了支持。有一个 jQuery UI Map 插件示例，它提供了上面所描述的地图。

回页首

创建一个预配 Rich Snippet 的事件地图

您可以使用一小段的 HTML 以同时获得交互式事件地图和较出色的 SEO。

正如之前一篇文章（参见 参考资料 获得链接）所介绍的，微数据可与 Schema.org 词汇表中的术语结合使用，以帮助搜索引擎更好地理解您的内容。此方法使搜索引擎能够显示 Rich Snippet，后者可在搜索结果自身中显示关于页面的最重要信息。

为获得 Rich Snippet 而添加的注释可执行双重任务。除了能够更好地搜索结果，还可以将它使用在您自己的页面上实现更出色的显示。

您将使用一个 jQuery 插件完成此项任务。我在示例代码 下载 中提供了相关的文件，其中包含该插件略加修改的版本。

回页首

基本的事件清单

让我们创建一个全球的 DrupalCamp 事件清单。首先，创建一个包含两个事件的 HTML 页面，如 清单 1 中所示。


清单 1. 列出两个事件的基本 HTML
				
 
<!DOCTYPE html>
  <head>
    <title>Upcoming DrupalCamps</title>
  </head>
  <body id="doc">
    <h1>Upcoming DrupalCamps</h1>

    <!-- Event 1: DrupalCamp Toulouse -->
    <div>
      <h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
      <img src='images/drupalicon_fr.png' />
      <p>Vous l&rsquo;attendiez tous, le DrupalCamp Toulouse aura bien lieu, 
r&#233;uni avec 2 autres &#233;v&#233;nements sous la bannière 
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy 
(&#233;v&#232;nement KDE).</p>
      <div>
        ENSEEIHT, Toulouse, Haute-Garonne, FR
      </div>
      <div>
        <time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> &ndash;
        <time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
      </div>
    </div>

    <!-- Event 2: DrupalCamp Ohio -->
    <div>
      <h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
      <img src='images/drupalicon_oh.png' />
      <p>The Central Ohio Drupal User Group (CODUG) is proud to announce 
Ohio&rsquo;s first Drupalcamp. On Saturday, December 3rd, we&rsquo;ll hold an 
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The 
Ohio State University&rsquo;s Nationwide and Ohio Farm Bureau 4-H Center.</p>
      <div>
        The Ohio State University, Columbus, Ohio, US
      </div>
      <div>
        <time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> &ndash;
        <time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
      </div>
    </div>

  </body>
</html>

请注意，您使用一个特殊元素标记了日期。此元素是新时间元素，该元素是核心 HTML5 标准的一部分。它能够向页面添加准确时间，所以可由应用程序轻松地解析和应用。在此示例中，Google 使用这些时间元素从页面中选择另外 3 个事件以便在 Rich Snippet 中显示。请注意，在发布时，关于是否将时间元素更改为一种更加通用的数据元素的问题存在着争议。如果这一提议得以通过，“time” 将替换为 “data”，“datetime” 将替换为下面代码中的 “value”。

datetime 是以 YYYY-MM-DD 格式开始的。接下来，一个 “T” 将日期与时间分开，时间格式显示为 HH:MM:SS。然后提供相对于世界标准时间 (UTC) 的偏移。例如，冬天的法国，时间要比 UTC 提早一小时，所以要在 datetime 字符串末尾加上 ‘+01:00’ 的偏移量。冬天的 Ohio 要比 UTC 晚 5 小时，所以要在 datetime 字符串末尾添加 ‘-05:00’ 的偏移量。这种添加会使中部标准时间 2011 年 12 月 3 日上午 9 点得到机器可读的值 “2011-12-03T09:00:00-05:00”。

将文件保存到 Web 服务器中的 jquery-ui-map/demos 目录并将它加载到您的浏览器中。图 1 显示 清单 1 中描述的两个事件的详细信息。


图 1. 列出两个事件的基本页面
列出两个事件的基本页面的屏幕截图

回页首

实现事件的 Rich Snippet

具有时间元素的页面包含少量机器可理解的信息。现在看看，如果这一添加发生更改，Google 会如何显示结果。转到 Google 的 Rich Snippets Testing Tool，输入您页面的 URL（参见 图 2）。您看到的不是事件详细信息，而是预览生成错误信息，上面显示着页面没有作者标记、Rich Snippet 标记或作者信息的。


图 2. Rich Snippets Testing Tool 中没有基本 HTML 的结果
Rich Snippets Testing Tool 中没有基本 HTML 的结果

即使 Google 知道您的页面列出了时间，但它也不知道这些时间是事件的开始和结束时间。要帮助 Google 理解这一点，您需要添加一些 Schema.org 术语（参见 清单 2）。关于使用微数据发布 Schema.org 标记已在之前的一篇文章有更详细地介绍（请参见 参考资料 获取链接）。


清单 2. 将每个事件的 <div> 添加到一个 Event 项中
				
 
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

接下来将 url 和 name 属性添加到事件中。请注意，在名称两边添加一个 <span>，以留出空间来添加 itemprop 属性。您还要添加 image 属性。虽然在 Rich Snippet 中无需用到该 image，但在稍后就会用到它。


清单 3. 向事件添加 url 和 name 属性
				
 
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span 
itemprop="name">DrupalCamp Toulouse 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_fr.png' />
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcampohio" itemprop="url"><span 
itemprop="name">Drupalcamp Ohio 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_oh.png' />
  ...
</div>

现在您可以添加一个开始时间（可选项）和一个结束时间。因为您使用了时间元素，所以您已经拥有开始时间和结束时间的机器可读值。您只需添加 Schema.org 术语来让 Google 知道各种值的对应关系（参见 清单 4）。


清单 4. 在时间元素上添加 startDate 和 endDate 属性
				
 
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26, 
10:00am</time> &ndash;
    <time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27, 
6:00pm</time>
  </div>
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3, 
9:00am</time> &ndash;
    <time itemprop="endDate" 
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
  </div>
</div>

再次在 Testing Tool 中测试该页面。因为 URL 指向一个与基本 URL 不同的域，您会看到阻止 Rich Snippet 显示的警告（参见 图 3）。


图 3. 阻止 Rich Snippet 显示的警告
阻止 Rich Snippet 显示的警告的屏幕截图

Google 要求事件的链接指向相同域中的页面。这一要求旨在预防垃圾信息。如果您搜索 example.com 并将其替换为您的域，然后再次进行测试，您应该会看到 Rich Snippet 的显示，如 图 4 所示。


图 4. 同时显示了两个事件及其开始日期的 Rich Snippet
同时显示了两个事件及其开始日期的 Rich Snippet 的屏幕截图

请注意，即使测试工具向您显示了一个 Rich Snippet，您也无法保证在真实的搜索结果中会显示 Rich Snippet。您必须向 Google 申请检查您的站点，Google 才会在搜索结果中启用您页面的 Rich Snippet 输出。更多相关信息请查看常见问题解答。

回页首

添加 jQuery UI 地图

因为 DrupalCamps 在全球各地举办，所以您的访问者希望有个地图来显示合理旅行范围内所发生的事件。要获得地图，只需添加另外一些信息。

首先，设置地图的显示。在文档中添加一个 <div> 以将地图放置在页面标题下和事件清单上（参见 清单 5）。


清单 5. 添加地图 <div>
				
 
<body id="doc">
  <h1>Upcoming DrupalCamps</h1>

  <div>
    <div id="map_canvas"></div>
  </div>

 <!-- Event 1: DrupalCamp Toulouse -->

您需要添加一些 JavaScript 文件来将此 <div> 转换为一种交互式地图。另外还要添加一些 CSS 文件，为 #map_canvas <div> 提供一个高度，使您可以看到它。本地文件包含在源代码中（参见 下载）。


清单 6. 添加外部 CSS、JavaScript 库和内联 jQuery
				
 
<head>
  <title>Upcoming DrupalCamps</title>

  <!-- External Stylesheets -->
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <!-- Google Maps API and jQuery, served by Google -->
  <script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <!-- jQuery UI Maps files for placing markers and for parsing Microdata -->
  <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.services.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.microdata.js"></script>
  ...

然后添加一个 jQuery 代码块，它会在页面初始化时获取 #map_canvas div 并将其转换为一个地图（参见 清单 7）。稍后将更详细地介绍此功能。


清单 7. 初始化地图
				
 
...
  <!-- Grab the #map_canvas div and turn it into a map -->
  <script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
      });
    });
  </script>
</head>

重新加载页面时，您将会看到地图（如 图 5 所示）。它还未标记任何事件，您还需要添加更多信息来显示这些事件。


图 5. 没有任何标记的基本地图
没有任何标记的基本地图的屏幕截图

回页首

在微数据中添加位置

在将标记添加到地图之前，您需要在微数据中添加事件的位置。暂时先将每个地址视为单个字符串。但是，地址包含多个不同的部分，并且您希望在微数据中表达此结构，即使以后对 HTML 结构进行更改也能轻松一致地获得正确的值。

首先，添加 location 属性，它会为它的值获得一个 Place（参见 清单 8）。


清单 8. 向事件添加 location 属性
				
 
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    ENSEEIHT, Toulouse, Haute-Garonne, FR
  </div>
  ...
</div>

Place 可以拥有一个姓名和一个通信地址。通信地址拥有自身的属性项，其中包括街道地址、城市 (addressLocality)、州 (addressRegion) 和 addressCountry (应该是一个二位字母代码 ISO 3166-1 alpha-2）。清单 9 使用 span 标记将这些属性隔开。


清单 9. 使用 span 标记
				
 
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">ENSEEIHT</span><br /> 
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
      <span itemprop="addressLocality">Toulouse</span>,
      <span itemprop="addressRegion">Haute-Garonne</span>,
      <span itemprop="addressCountry">FR</span>
    </span>
  </div>
  ...
</div>

您可采用相同方式格式化其它事件的地址。

回页首

在地图上放置位置

您已准备好向地图中添加标记。首先，将页面上的微数据解析为一个可以使用的对象。为此，指定哪种类型的顶级项是您想要的数据来源。微数据中的顶级项可视为根项；这些项不是任何其它项的属性，而是拥有自己的属性。指定 http://schema.org/Event。这会为每个事件返回一个对象（参见 清单 10）。


清单 10. 将微数据解析为对象
				
 
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          window.console.log(result);
        });
      });
    });
</script>

您可以在 Firefox 和 Chrome 等浏览器中看到在 JavaScript 控制台中由微数据创建的对象。微数据中的每项被转换成一个具有自己的属性对象的对象，其中包含来自该项的所有 itemprop 值。因为微数据中的属性可能具有多个值，所以将 itemprop 值当作数组来处理（参见 图 6）。


图 6. 在 Chrome JavaScript 控制台中检查对象
Chrome JavaScript 控制台中的对象源的屏幕截图

这个对象拥有您获得位置的地理坐标所需的所有属性，您需要在事件上放置该位置的标记。要获得此信息，从对象中提取地址的各部分并将它们组合成一个 Google 能读取的地址字符串。您然后可使用 Google 的 Geocoder 获得此地址的坐标。jQuery UI Map 库提供了一个包装器函数，您可以使用它运行 Geocoder 请求。

请注意，如果您获得了一个未定义的错误，请仔细检查以确保您在所列出的所有事件上拥有所有需要的属性（参见 清单 11）。


清单 11. 运行地址的 Geocoder 请求
				
 
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress = 
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            window.console.log(result);
            // We will place the marker here.
          });
        });
      });
    });
</script>

如果在控制台中查看结果，您将看到该服务返回了一个或多个与您的地址匹配的位置。您将近使用第一个位置，因为这是最佳的匹配值。该对象有一个 geometry 属性，其中包含您需要的地理坐标信息（参见 清单 12）。


清单 12. 放置标记
				
 
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              // Create a LatLng object.
              var lat = result[0].geometry.location.lat();
              var lng = result[0].geometry.location.lng();
              var latlng = new google.maps.LatLng(lat, lng);
  
              // Place the marker.
              var markerOptions = { 
                'bounds':true,
                'position': latlng
              };
              map.gmap('addMarker', markerOptions);
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
        });
      });
    });
</script>

当重新加载页面时，您应该看到如 图 7 中所示的位置标记。


图 7. 放置在地图上的标记
放置在地图上的标记的屏幕截图

回页首

实现交互式地图

如果用户可单击标记来获得事件详细信息，比如事件的日期和链接，地图会变得更有用。添加此功能并不难。

首先，从解析的微数据中提取您想要的关于该事件的附加信息（参见 清单 13）。


清单 13. 获得补充信息
				
 
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          var eventName = result.properties.name[0];
          var logo = result.properties.image[0];
          var url = result.properties.url[0];
          var start = result.properties.startDate[0];

          ...
      });
    });
</script>

在您将标记添加到地图之前，创建一个包含事件详细信息的 HTML 代码块（参见 清单 14）。


清单 14. 创建信息窗口的 HTML
				
 
            // Run the Geocoder request for the address.
            map.gmap('search', {'address': address } , function(result, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                // Create a LatLng object.
                var lat = result[0].geometry.location.lat();
                var lng = result[0].geometry.location.lng();
                var latlng = new google.maps.LatLng(lat, lng);
    
                var eventDetails = '';
                eventDetails += '<div class="iw">';
                eventDetails += '<img src="'+logo+'"></img>';
                eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
                eventDetails += new Date(start).toDateString();
                eventDetails += '</div>';
    
                // Place the marker.
                ...

然后将事件详细信息添加到您创建的标记。使用 jQuery 的 .click 来表明您希望在某人单击该标记时运行哪个函数。在该函数中，使用 jQuery UI Maps 库提供的 openInfoWindow 帮助器函数来构建窗口，并传入您的 HTML 作为该窗口的内容（参见 清单 15）。


清单 15. 添加 Info Window 作为单击事件
				
 
            // Place the marker.
            ...
            map.gmap('addMarker', markerOptions).click( function() {
              map.gmap('openInfoWindow', { 'content': eventDetails }, this ); 
            });

完成此任务后重新加载，然后单击该标记。您将看到弹出了一个包含事件详细信息的窗口（参见 图 8）。


图 8. 单击事件标记
在用户单击事件标记后弹出的包含事件详细信息的窗口的屏幕截图

要改善外观，添加一些 CSS 规则。我在可下载的示例代码中添加了这些规则（参见 下载）。最后，您的地图类似于 图 9。


图 9. 最终的地图
包含两个事件标记、一个弹出窗口和完整的事件详细信息的最终地图的屏幕截图

回页首

结束语

微数据通过利用 jQuery 插件使您可以轻松地以动态方式在您页面上使用数据，比如在 Google 地图上。微数据规范探讨了通用脚本，该脚本可用在不同和不相关站点上作为插件。微数据还使通过组合来自多个不同站点的数据来创建新应用程序的过程变得简单。在下一篇文章中，我将演示如何使用 Drupal 创建这样一个应用程序。


回页首

下载

描述名字大小下载方法
文章源代码jquerymicrodatapt1_source.zip464KBHTTP

关于下载方法的信息


参考资料

学习

获得产品和技术

讨论

关于作者

Lin Clark 的照片

Lin Clark 是 Drupal 的一名开发人员，专门从事 Linked Data 方面的工作。她是多个 Drupal 模块（比如 Microdata 和 SPARQL Views）的维护人员，还积极参与了 W3C 的 HTML Data Task Force 和 Drupal 的 HTML 5 计划。她曾就读于卡耐基梅隆大学，现正在攻读 NUI Galway 的 Digital Enterprise Research Institute 的研究硕士学位。您可以在 lin-clark.com 上了找到关于她的更多信息。

关闭 [x]

关于报告滥用的帮助

报告滥用

谢谢! 此内容已经标识给管理员注意。

关闭 [x]

关于报告滥用的帮助

报告滥用

报告滥用提交失败。 请稍后重试。

关闭 [x]

developerWorks：登录


需要一个 IBM ID？
忘记 IBM ID？


忘记密码？
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 使用条款

 

当您初次登录到 developerWorks 时，将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人，但您可以随时修改这些信息的显示状态。您的姓名（除非选择隐藏）和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

关闭 [x]

请选择您的昵称：

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

（长度在 3 至 31 个字符之间）

单击提交则表示您同意developerWorks 的条款和条件。 使用条款.

 

所有提交的信息确保安全。

为本文评分

评论

回页首

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=XML, Open source, Web development
ArticleID=781589
ArticleTitle=使 HTML5 微数据发挥作用，第 1 部分: 在微数据之上使用 jQuery
publish-date=12192011

内容

分享此页面：

  • 关闭 [x]

关注 developerWorks 中国网站：

  • 关闭 [x]