• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 为网页内容添加结构和语义的hAtom微格式

为网页内容添加结构和语义的hAtom微格式

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含hAtom,微格式等相关知识,佚名 希望在学习及工作中可以帮助到您
来回顾一下我们之前讨论过的微格式:rel-系列, XFN,hCard 和 hCalendar。

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

历史:Atom

hAtom微格式是建立在Atom XML同步格式基础之上的。跟之前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的元素
  • 属性和子属性名称大小写敏感
  • “根”属性不能和其他属性或子属性组合,因此<p class="hfeed author">是无效的

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

Profile

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

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

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

<head profile="http://purl.org/uF/2008/03/“>

不过,hAtom是提案规范,他的Profile没有涵盖在组合Profile里面,所以,还是需要明确的指明他。如果您还引用组合Profile,可以简单的添加hAtom Profile(W3C 允许 多个profile值,使用空格隔开即可):

<head profile="http://purl.org/uF/2008/03/ http://purl.org/uF/hAtom/0.1/“>

示例:单一日志

背景信息差不多了,现在我们来看实际的hAtom,下面的hAtom信息是描述我的博客日志全文的:

  1. <div class=”hentry”>
  2. <h3 class=”entry-title”>Web Accessibility Is Important</h3>
  3. <abbr class=”published” title=”2008-08-28T13:14:37-07:00″>Aug 28, 2008</abbr>
  4. <p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel=”tag”>Commentaries</a></p>
  5. <p><a href="#commentForm" title="Post your own comment">Got something to say?</a></p>
  6. <div class=”entry-content”>
  7. <p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
  8. …
  9. </div>
  10. <dl>
  11. <dt>Tags:</dt>
  12. <dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel=”tag”>accessibility</a></dd>
  13. <dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel=”tag”>standards</a></dd>
  14. <dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel=”tag”>web design</a></dd>
  15. </dl>
  16. </div>
根属性:hfeed

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

必要属性:hentry

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

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

必要子属性:entry-title

entry-title是必需的子属性之一,用来说明条目的题目。在上面例子中,我为<h3>应用了entry-title属性,因为作为题目,把他放在“头条”结构中是具有一定语义信息的。

必要子属性:author

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

注意:不要显示作者名字

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

您可能想查找下面的文章:

  • 为网页内容添加结构和语义的hAtom微格式

相关文章

  • 2017-08-06CSS使用盒模型实例讲解
  • 2017-08-06CSS3实现翘边的阴影效果的代码示例
  • 2017-08-06利用CSS3的特性改变文本选中时的颜色
  • 2017-08-06CSS IE6奇数宽度或高度的bug
  • 2017-08-06span 右浮动折行 解决ie6/7中span右浮动折行问题
  • 2017-08-06定义css设备类型-Media Queries图表简介及使用方法
  • 2017-08-06使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
  • 2017-08-06让多个div在同一行显示的样式及html代码
  • 2017-08-06CSS3 animation实现简易幻灯片轮播特效
  • 2017-08-06css实现随鼠标移动div渐变色效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何使用PS合成玫瑰花园中奔跑的女孩
    • CSS中几种浏览器对不同版本的支持与区分写法
    • 仅用CSS让你的div模块旋转
    • SCSS移动端页面遮罩层效果的实现及常见问题解决
    • DIV+CSS实现仿京东商城导航条效果
    • IE系列的Css if hack条件语法
    • 使用font-face改变字体即加载外部字体
    • div+css实现圆角即网页上常用的圆角效果
    • 详解CSS3中Media Queries的相关使用
    • css3选择器基本介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有