您现在的位置是:网站首页> 编程资料编程资料

为网页内容添加结构和语义的hAtom微格式_CSS教程_CSS_网页制作_

2021-09-08 791人已围观

简介 我们这次来讨论hAtom微格式,这个微格式用来为网页内容添加结构和语义从而使得网页内容或者局部内容可以被广播(syndication),比如博客日志或者新闻文章等。

来回顾一下我们之前讨论过的微格式:rel-系列, XFN,hCard 和 hCalendar。

我们这次来讨论hAtom微格式,这个微格式用来为网页内容添加结构和语义从而使得网页内容或者局部内容可以被广播(syndication),比如博客日志或者新闻文章等。

历史:Atom

hAtom微格式是建立在AtomXML同步格式基础之上的。跟之前hCard和hCalendar不同,hCard和hCalendar都和传统数据格式有着1:1的对应关系,但是hAtom同Atom之间却没有这种直接的对应关系。Atom是一个很稳定的模型,能够为内容广播提供非常多的功能。而hAtom仅仅是提供必须的元素,因此更像是Atom的子集。由此说来,hAtom具有的属性和子属性也都是基于Atom原有的术语而来的。

微内容(并不需要)广播

尽管hAtom基于Atom,hAtom本身并不是一个广播格式。hAtom的作者和编辑──David Janes──解释说

… hAtom was never intended to be a “syndication format” nor to compete with Atom or RSS. It’s simply designed to describe the microcontent on webpages, such as blog posts. We used Atom because it provides a well-defined nomenclature for describing such elements.”(译:hAtom从来都不是为了作为“广播格式”存在,更不是为了同Atom或者RSS之间竞争。他就是用来描述网页中的为内容,比如博客日志。我们使用Atom是因为他提供了很好的术语可以描述这样的元素。)

所以,hAtom不是专门为了那些需要广播的网页内容的。不过,为了这篇文章的目的,我会在博客日志的基础上讨论,而博客日志通常是需要支持广播的网页内容。

基础知识

在讨论hAtom细节之前,让我们来看一下基础的规则(同hCard和hCalendar类似):

  • 属性和子属性通过class值来表示
  • 因为同Atom的关系,规范中的hAtom属性和子属性基本对应Atom的元素
  • 属性和子属性名称大小写敏感
  • “根”属性不能和其他属性或子属性组合,因此

    是无效的

还是,对所有微格式适用:包含他们的标记元素是什么不重要(虽然应该是有效并且具有语义的)。Class的值(属性或子属性)决定了hAtom微格式。

Profile

如果您选择使用hAtom,同样应该在网页的代码中加上他的Profile说明:

profile=”http://purl.org/uF/hAtom/0.1/”>

对hCard和hCalendar,我提过使用组合Profile,可以覆盖所有非提案微格式:

W3C 允许 多个profile值,使用空格隔开即可):

  • class=”hentry”>
  • class=”entry-title”>Web Accessibility Is Important

  • class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008
  • rel=”tag”>Commentaries

  • Got something to say?

  • class=”entry-content”>
  • The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:

  • Tags:
  • rel=”tag”>accessibility
  • rel=”tag”>standards
  • rel=”tag”>web design
  • 根属性:hfeed

    hAtom的根属性是hfeed,他可以包含一个或者更多条目(在上面例子上,条目就是博客日志)。这个根属性是可选的。如果没有明确包含根属性,默认假设他已经存在于页面中了,上面的例子中就没有包含根属性。如果必要的话,页面中可以包含多个hfeed

    必要属性:hentry

    每个条目必须包含在hentry属性中。如之前提过的,可以应用一个或多个hentry属性。上面例子中,只有一个hentry是因为这个实现是应用在显示博客某一日志全文的页面中。我会在文章后面讨论如何使用多个条目。

    hentry属性包括了条目的所有信息

    必要子属性:entry-title

    entry-title是必需的子属性之一,用来说明条目的题目。在上面例子中,我为

    应用了entry-title属性,因为作为题目,把他放在“头条”结构中是具有一定语义信息的。

    必要子属性:author

    author是另一条必需的子属性,用来说明条目的作者。根据规范说米功能,包含在author子属性中的内容必须使用标记上hCard

    元素。

    注意:不要显示作者名字

    但是,也还有很多实际操作的例子中,发布者并不在意列举出作者名字,包括我的博客。hAtom的规范默认了这种情况并允许可以不在hentry属性中包含作者信息,不过是在当页面本身已经包括了hCard的信息,并含有指定class="author"子属性的

    元素。这个方案也在hAtom 的FAQ中作了解释

    因为我在我所有页面的页脚中都包括了hCard实现,所以,我没有在hAtom信息中包含author子属性,这样做是有效的。对于那些多作者协作的博客,如果他们不希望显示作者名字,目前还没有有效的方案。author必须出现在hentry属性中。我可以想象使用CSS方案来取消显示(display:none)可能也是可以接受的。

    注意:address和hCard

    上面的讨论涉及到另外一个问题:实现hCard时使用

    在第三部分讨论中曾经提到过,为hCard使用

    元素只有在hCard是文档拥有者时才有效。hCard的FAQ中也强烈建议不要在hCard不是文档拥有者时候使用
    。因此,如果hAtom的条目由不是文档拥有者创作的话,
    不是合适的语义元素。

    这个问题目前还在讨论中。目前的建议是取消

    的限制。

    必要子属性:updated

    updated子属性也是必需的,他表明条目最后被修改和更新的日期/时间。这里也有需要注意的事情:如果updated子属性没有被定义,子属性published将会用来表明日志更新的日期/时间。在上面的例子中,您会注意到我并没有包含updated子属性,不过使用了published

    可选子属性:published

    published是可选的子属性,基本上同updated的语义是一致的,都是表明条目的更新时间。尽有的区别在于,published更倾向于描述条目第一次发布的时间,而updated可以是发布的时间或者是条目后来更新的时间。如果同时包含publishedupdated来描述条目的日期时间信息也是有效的:

    published就符合我的目的了,所以我选择只使用他。

    日期时间设计模式

    对于updatedpublished,hAtom推荐使用的时间和日期格式跟我们之前讨论的日期时间设计模式相同

    <abbr class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008

    该模式定义容器元素为,在title属性中指定机器可读的日期/时间信息,而在内容中指定人类可读的日期/时间信息。而且,在title中包含的时间日期信息应该遵循ISO 8601格式要求。

    可选子属性:entry-summary

    entry-summary是可选的子属性。他说明条目的摘要信息。这个子属性可以在hentry中多次使用。在我的博客中,我没有为文章生成这样的摘要,所以我没有提供这个子属性的实现。

    可选子属性:entry-content

    entry-content是另一个可选的子属性,用来说明条目的全文内容。在上面的例子中,所有的文章内容都被包含在

    元素中。同样,可以在hentry中使用多次entry-content属性。

    可选:rel-bookmark

    hAtom还定义了一个rel属性值来说明条目的永久链接bookmark。在第一部分中,我们讨论了很多基于rel-的微格式,用来表明链接()和文档之间的关系。rel-bookmark也是用来描述链接关系的,不过不能作为微格式单独使用。必须作为hAtom的属性存在,描述文档内容的永久链接。

    使用hAtom,您可以简单的在条目的永久链接上添加rel="bookmark"

    rel=”bookmark”>Web Accessibility Is Important

    您可能会注意到,在我的例子中没有提供永久链接。这是因为我通常遵循一条规则:不在页面中提供本文链接(Nielsen’s #10 of the Ten Most Violated Homepage Design Guidelines)。而且因为rel-bookmark是可选的,所以我的实现是有效的。如果hentry没有指明永久链接,那么就会缺省认为本页链接为条目永久链接。如果hentry中定义了id属性,该值会被拼接到URL后面来为条目定义唯一值。

    组合微格式来定义分类

    之前我们在第一部分中讨论过rel-tag 微格式。他用来添加到链接()) 说明网页──或者网页的局部内容──是关于什么内容的。基本来说,通过标签来组织/分类已经在博客中广泛使用。hAtom可以充分发挥rel-tag的作用,只需要在hfeedhentry中做出实现:

    在前面的例子中,我在hentry中使用了rel-tag链接:

    href)中必须包括“标签”的值作为URL的最后一段,这被设计为“标签空间”。

    例子:多日志

    上面已经讨论了hAtom的大部分细节,应该给出一个例子说明如何应用在多日志的页面中。在我的博客上,在首页中添加了hAtom信息,用来描述我最近的三篇日志:

    1. class=”hentry”>
    2. class=”entry-title”>rel=”bookmark”>Web Accessibility Is Important

    3. class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008
    4. rel=”tag”>Commentaries

    5. class=”entry-content”>
    6. The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:

  • rel=”bookmark”>Continue Reading

  • Tags:
  • rel=”tag”>accessibility
  • rel=”tag”>standards
  • rel=”tag”>web design
  • class=”hentry”>
  • class=”entry-title”>rel=”bookmark”>Plateau

  • class=”published” title=”2008-08-27T13:59:51-07:00″>Aug 27, 2008
  • rel=”tag”>Commentaries

  • class=”entry-content”>
  • As I posted previously, I'm doing the one hundred push ups challenge: a six-week program designed to get me able to do 100 consecutive push ups. I am now on my seventh week.

  • rel=”bookmark”>Continue Reading

  • Tags:
  • rel=”tag”>exercise
  • rel=”tag”>fitness
  • rel=”tag”>push ups
  • class=”hentry”>
  • class=”entry-title”>rel=”bookmark”>Getting Semantic With Microformats, Introduction

  • class=”published” title=”2008-09-05T07:05:34-07:00″>Sep 5, 2008
  • rel=”tag”>Commentaries

  • class=”entry-content”>
  • I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.

  • rel=”bookmark”>Continue Reading

  • Tags:
  • rel=”tag”>French translation
  • 提示: 本文由整理自网络,如有侵权请联系本站删除!
    本站声明:
    1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!