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

css 微格式 XFN规范

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

本文主要包含css,微格式,XFN等相关知识,佚名 希望在学习及工作中可以帮助到您

现在,我们花费一点时间来好好看看这个非常酷的微格式。

在链接中放入个人信息

由GMPG──全球媒体协议组──拟定的XHTML好友网络是一个非常简单却强大的去中心化描述方式,通过使用链接(<a>)的rel属性来展现人际关系。

这个概念同我在第一部分中描述的基于链接的关系是一致的:

<a href="http://twitter.com/emilylewis" rel=”me”>Twitter</a>

在这个例子中,rel="me"代码说明这个链接的目的地址(href)指向关于我的一个页面 (或者是我负责的页面)。

XFN微格式所描述的基于链接的人际关系完全超越我们之前描述的概念。

我们都是连接在一起的

XFN扩展了rel-me的概念,不仅仅包含个人身份同社交网络之间的关系。您可以为链接中的rel属性简单的添加多个属性值用以描述关系信息。

例如,我经常在博客中引用我的老板兼好友,IanIanIanIanIanIanIanIan:

<a href="http://www.iso-100.com/" rel=”met colleague co-worker friend”>Ian Pitts</a>

在上面的例子中,我为指向他博客的链接添加了rel="met colleague co-worker friend“这些属性。这些rel属性值说明:

  • met:我见到过Ian本人。
  • colleague:Ian是我的同事,也就是说我认为他跟我是具有相似兴趣和技术的人。
  • co-worker:Ian是我的老板,因为他也是我的同事。
  • friend:我把Ian当作的我朋友(他很幸运吧)。
我们是如何连接在一起的

XFN规范提供了各种关系属性值,这些属性值都是非常简单并直观的。

友谊/熟悉度

仅能使用这个列表中的一个值:

  • friend:根据个人定义变化。但根本来说,这是在熟悉度类别中最“亲密”的值。
  • acquaintance:表明一个中等的熟悉程度。
  • contact:表明仅仅是我拥有联系信息的个人。
物理特性

met──相遇──表明曾经见过本人的关系。可以同其他所有属性值共存。

职业

可以使用其中一个或者两个属性值:

  • colleague:具有相似兴趣或者技术的人,同僚。
  • co-worker:同事。
地理信息

仅可使用其中一个属性值:

  • co-resident:跟您住在同一条街道上的人。
  • neighbor:一个更广义的地理引用,通常是住的非常近(靠您自己定义),但是不在同一个街道上的。
家族

仅可以使用其中一个属性值:

  • child:孩子
  • parent:父母
  • sibling:兄弟姐妹,也包括您结婚之后对方那边的兄弟姐妹
  • spouse:配偶(不论合法与否)
  • kin:任何亲戚,不管是直系,还是通过婚姻或者领养。
浪漫关系

可以使用一个或者多个属性值:

  • muse:获取灵感的人
  • crush:您单相思的人
  • date:您目前相对固定的约会对象
  • sweetheart:您目前非常心理或者物理投入的人

由于我尝试微格式开始时候的疑惑,有必要解释一下muse(获取灵感的人)。虽然他存在于“浪漫关系”这个分类,但他衡量于同“理性”对比的角度。灵感不属于理性,因为属于浪漫关系。(译注:没懂)

我经常引用一些业内英雄的链接(例如,Jeffrey Zeldman, Eric Meyer 和 Jason Santa Maria)。对于这些人的链接,我都使用了属性rel="muse"。

而这些绝对不是“浪漫关系”。我仅仅是(深刻的)崇拜他们的工作,并经常从他们那里获取灵感。

另外,我发现这里对这些“浪漫关系”的描述异常的有趣。

个人身份

me指向在另外一个不同地方(href)的自己。

我希望有一点非常明显的是,为您自己赋值friend是多余的,虽然您会认为您是自己的朋友。同样还包括met和其他一些属性值。但仅仅是因为不需要这样做,而不是因为这样做无效。

特意的简单 = 效率

包括我在内,作为非常关注细节的人,会非常感激使用这些简单而搞笑的词语。我们就简单的接受co-worker(同事关系),而不要去争吵究竟是不是需要添加领导还是下属的属性。

值得提的一点是,在使用这些属性值的时候没有特定的顺序要求。

此外,这些值是不具有对称性的。因此,如果您引用一个人为friend而他们引用您为acquaintance,这并没有任何逻辑上的错误(除非您感到异常的失落)。

指定Profile

除了在您认识的这些人的链接上加上rel声明,GMPG建议您最好也让浏览器和搜索引擎知道您的网页支持XFN,这个工作可以通过在<head>代码中指定XFN的资料链接。

对于我而言,我选择在所有页面中都声明XFN的资料链接,因为我的<head>代码通过一个全局文件来维护。这会让工作容易很多,同时,可以让rel="me"出现在我所有的页面中(同样,可以在页脚链接到我的Flickr、, Delicious、iLike 和 Twitter的个人资料页面):

<head profile=”http://gmpg.org/xfn/11″>

告诉全世界

GMPG也建议让人们知道您的网站是支持XFN的。他们提供了一个徽章,您可以加到自己的网站上:

XFN Friendly

从个人角度来说,我并不是这些按钮或者徽章的粉丝。但是我支持这个提议,所以在我的页脚中加上了XFN的链接:

<a href="http://gmpg.org/xfn" title="支持XHTML好友网络">XFN</a>

XFN link in A Blog Not Limited footer

让他变得更简单

虽然简单的为超链接添加这些属性和属性值不是一项特别浩大的工程,但是也有一些工具能够帮助您更容易实现XFN:

  • XFN 1.1 生成器是一个基于网页的向导,用来给链接指定合适的XFN值,并提供多种语言支持。
  • MTMTMTMT Blogroll 2.12 Manual是一个Movable Type的插件用来为引用链接定义XNF关系。 MTMTMTMT Blogroll 2.12 Manual是一个Movable Type的插件用来为引用链接定义XNF关系。
  • XFN Link Creator也是一个为链接加上XFN属性值的向导。
  • WordPress Links Manager可以配置允许您为blogroll链接添加XFN关系值。
  • WPWPWPWP Microformatted Blogroll 0.2是添加XFN链接的Word Press插件。 WPWPWPWP Microformatted Blogroll 0.2是添加XFN链接的Word Press插件。
  • rel-lint是一个JavaScript书签,用来检查那些XFN属性值,并标注出哪些他无法识别。

语义网

我知道我已经反反复复的重复好多遍(这也肯定不是我最后一次说):语义是微

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

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS中背景的Linear Gradients(线性渐变)应用
  • 2017-08-06利用CSS3实现单选框动画特效示例代码
  • 2017-08-06CSS3网格的三个新特性详解
  • 2017-08-06css实现鼠标悬停时滑出层提示的方法
  • 2017-08-06.clearfix:after(清除浮动)中各个属性及值详细解说
  • 2017-08-06利用CSS3的transition属性实现滑动效果
  • 2017-08-06CSS Grid布局教程之网格单元格布局
  • 2017-08-0625个CSS3动画按钮和菜单教程分享
  • 2017-08-06简单的CSS叠加外边距示例
  • 2017-08-06css3实现背景颜色渐变让图片不再是唯一的实现方式

文章分类

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

最近更新的内容

    • IE9下DIV本来应该居中的结果显示为居左
    • 写html时,经常用到tab结构
    • ie兼容性测试不用IE Test依然可以办到
    • ul里不能直接嵌套div(在ie7以前版本)
    • CSS实现圆环旋转加载动画
    • CSS3实现超慢速移动动画效果非常流畅无卡顿
    • 设计稿进行页面制作的流程和注意事项
    • CSS hack技巧之IE6,IE7,firefox显示不同效果
    • CSS3中线性颜色渐变的一些实现方法
    • CSS3 text shadow字体阴影效果

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

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