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

hCalendar微格式 关于事件和基于时间或地点的活

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

本文主要包含hCalendar,微格式等相关知识,佚名 希望在学习及工作中可以帮助到您
我们又来了,兴奋的冲进微格式的世界~~根据我的计划,这篇文章应该到达此系列的半程了。到这里,我已经讨论了三种微格式的实现:

在第一部分中,使用rel来定义基于链接的关系
在第二部分中,使用XFN微格式为链接增加人际关系的描述
在第三部分中,使用hCard微格式来描述人、公司和地点
还不错。但是距离全面介绍微格式还有一定差距呢。

所以,今天让我们一起来探讨一下hCalendar微格式,通过该微格式我可以为那些关于事件和基于时间或地点的活动提供语义和结构化信息。

来源:iCalendar

iCalendar(或者iCal)是分享日历数据的标准。通常的,他被广泛用在Email交换中,虽然并不仅仅局限于此。同hCard类似,网站开发人员可以通过hCalendar将iCalendar数据嵌入到网页数据中。hCalendar同iCalendar之间同样是1:11:11:1的对应关系,从而允许解析器从网页中提取信息提供给日历应用使用。1:11:11:1的对应关系,从而允许解析器从网页中提取信息提供给日历应用使用。

历史回顾:iCalendar建立在vCalendar(虚拟日历Virtual Calendar)基础之上,vCalendar是一个开源的日历应用,用来在线发布和维护事件和时刻表。vCalendar同vCard电子商务名片格式一起开发的。

基于日期/时间的活动

hCalendar微格式描述在日历中使用的事件(或者任何基于日期/时间的活动)信息,包括(但不限于):

  • 概述
  • 日期和时间
  • 地点
  • 详细描述
  • 重复发生

基础知识

跟hCard一样,hCalendar遵循一些基本规则:

  • 属性和子属性通过class来描述。
  • 因为跟iCalendar之间1:1的对应关系,特定的hCalendar属性是建立在iCalendar属性名称基础上的(例如,vevent)
  • 属性和子属性名字大小写敏感
  • “根”属性不能同其他属性组合。因此<p class="vevent summary">是无效的。

还有一条虽然不是规则,但是需要铭记在心:使用什么样的标记元素并不重要。class的值(属性/子属性)才决定hCalendar微格式。但之前也说过,我非常鼓励使用具有语义特性的标记元素。

Profile

同所有微格式一样,非常鼓励您在网页的<head>部分中包含微格式的声明,使用hCalendar的Profile:

<head profile=”http://purl.org/uF/hCalendar/1.0/”>

W3C允许定义多个Profile值,使用空格隔开,所以可以自己选择使用多个Profile:

<head profile="http://gmpg.org/xfn/11 http://purl.org/uF/hCard/1.0/ http://purl.org/uF/hCalendar/1.0/“>

另外,如果您引用非提案微格式(hCalendar是非提案微格式),您可以替换使用组合Profile URL,该URL涵盖了所有非提案微格式:

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

如果您同时引用非提案和提案微格式,您同样可以使用上面这条组合Profile声明。

示例

本博客相对比较新,因此,我还没有更多的机会列举一些事件信息。实际上,我只有一个在线的例子,感谢最近一篇BarCamp Albuquerque 3的文章,在那里我使用了hCalendar微格式:

  1. <div class=”vevent”>
  2. <p>Yes, it's short notice, but mark your calendars: <a href="http://barcamp.org/BarCampAlbuquerque" class=”url summary”><span class=”category”>BarCamp</span> Albuquerque 3</a> is this weekend.</p>
  3. <dl>
  4. <dt>When:</dt>
  5. <dd><abbr class=”dtstart” title=”2008-09-13T09:00:00″>September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm both days</dd>
  6. <dt>Where:</dt>
  7. <dd class=”location vcard”><a class=”fn org url” href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google.com/maps” class=”adr”><span class=”street-address”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr></span>, <span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM</abbr> <span class=”postal-code”>87113</span></a></dd>
  8. <dt>What:</dt>
  9. <dd class=”description”>A <abbr class=”duration” title=”P2D”>two-day</abbr> event all about the web — design (visual, experience, information architecture), technology (infrastructure, programming), social and new media, and other stuff that is just plain cool.</dd>
  10. </dl>
  11. </div>

说说各部分

我们将上面的例子分开讨论一下。

“根”:vevent

您可能注意到在我例子中的根属性是vevent,而不是vcalendar。这是因为hCalendar有一个可选的根元素,只有在您需要在页面中描述超过一个日历事件时才需要出现。对于尽有一个日历事件的网页,vcalendar属性被假设已经出现在页面中。既然我的例子只是一个事件,我把所有的事件信息都包含在<div class="vevent">中,意味着所有的内容描述的都是同一个事件。

包含他的元素可以是任何元素(<dl>,<ul>,<p>,<span>等等)。<div>就满足我例子的要求了。

必要属性:summary和dtstart

hCalendar必须的属性为(除了根元素vevent)summary和dtstart.

summary

summary属性描述了事件的概要信息。此属性包含的内容通常是在日历应用中显示的基本信息,比如事件的名称。所以,在我的例子中,“BarCamp Albuquerque 3”被包含在summary之中,也就是在我个人日历中用来显示的名称:

<p>Yes, it's short notice, but mark your calendars: <a href="htt

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

  • hCalendar微格式 关于事件和基于时间或地点的活

相关文章

  • 2017-05-30CSS 异步加载技术 不影响页面渲染
  • 2017-08-06使用CSS3实现圆角,阴影,透明
  • 2017-08-06css实现文字图片垂直居中效果
  • 2017-08-06详解CSS中的规则声明
  • 2017-08-06image-set实现Retina屏幕下图片显示详细介绍
  • 2017-08-06用滤镜实现背景图片的拉伸效果代码
  • 2017-08-06利用CSS3实现开门效果实例源码
  • 2017-08-06css实现文本溢出显示省略号
  • 2017-08-06bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
  • 2017-08-06图片溢出div问题的快速解决方法推荐

文章分类

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

最近更新的内容

    • 完整css选择器总结
    • 浏览器全屏显示背景图片的css样式与html结构
    • Discuzx系统 CSS 编码规范、CSS属性书写顺序
    • IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
    • CSS display属性的table表格布局
    • CSS教程 CSS定位属性
    • css3中检验表单的required,focus,valid和invalid样式
    • CSS背景色渐变写法兼容ie6至ie9
    • CSS为指定的input文本框添加背景
    • 完全纯css实现div自适应居中兼容IE7 Chrome FireFox

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

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