简单了解微格式(Microformat)

首先,请不要一厢情愿地把微格式(Microformat)理解为某种语言的简化,这是完全错误的字面理解,事实完全相反,从经典个例“hCard微格式”看出,它是把XHTML语言在Web中的应用“冗余”话了。当然初识它的人都难免会犯类似错误。什么是微格式呢?它存在的意义又是什么?本文或许会让你对Microformat有所了解,并对其蕴含的巨大潜力及广泛用途折服。

什么是微格式

微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响(ITPUB)。

设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要作的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。

从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。

那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:

  • 在爬取Web内容时,能够更为准确地识别内容块的语义;
  • 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。

简单的微格式

我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的:

<a href=”http://www.bbon.cn” >Web Design Blog</a>

而现在我们要为这个代码元素<a>加上rel属性。

<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design Blog</a>

上面的链接标记<a>包括rel=”home”属性,该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。

时间: 2024-11-18 14:30:14

简单了解微格式(Microformat)的相关文章

网站使用微格式试验以及好处

最近对微格式进行了一些学习,在学习过程中收获不少.在此分享下,欢迎交流!微型格式的优点:1,语义化的HTML和CSS类名称来标记共同内容.2,使机器可以阅读和理解可能只有人类可理解的数据,一系列的标准化方法.3,微格式允许网站上的内容轻易地与其他应用对接,从而提高信息的使用率. hCalendar微格式基本规则:1,属性和子属性通过class来描述.2,特定的hCalendar属性是建立在iCalendar属性名称基础上的如:vevent3,属性和子属性名字大小写敏感4,"根"属性不能

jQuery实现简单的列表式导航菜单效果代码_jquery

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h

Illustrator简单制作抽出式小标签教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下简单制作抽出式小标签的教程. 技巧分享:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的简单制作抽出式小标签的教程解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在看到这里是非常的清楚了制作方法了吧,那么大家就快去按照小编上面的教程自己去制作一下吧.

css简单实现响应式菜单例子

最终效果如上,手机端(左).电脑端(右) ps://www.idevs.cn/wp-content/uploads/%E6%9C%AA%E6%A0%87%E9%A2%98-5.png" /> 我有一个十分奇葩的毛病,那就是莫名其妙的对前端框架十分抵触,总觉得它很臃肿,所以日常一些小项目我都是手写代码,尽量只写用到的代码,强迫症患者,好像这样效率低一些,不过可以锻炼一下嘛(尼玛CSS和HTML有什么好锻炼的,借口!) 正好最近在做一个网站的时候,要用到响应式,页面内容很容易,只是nav需要j

20分钟成功编写bootstrap响应式页面 就这么简单_javascript技巧

最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面.图 1. 移动优先,适应不同设备 一.安装最简单的方式是直接在网页中引用

Web体验的设计师:响应式网页设计的陷阱

文章简介:虽然响应式Web设计仍处于发展初期,但已经有很多指导和最佳实践,当你创建可跨设备工作的设计时可以采用.对于那些希望为使用不同设备的用户提供顶尖Web体验的设计师来说,则需要更多的思考与努力. 设计师们无法回避移动设备的大势所趋,当然在网站设计上有大量新的概念来迎合移动设备.但是单独的网站,无法在移动设备层出不穷的大潮中站稳脚跟.无论是在个人电脑.笔记本.智能手机.平板电脑.大屏幕手机.智能电视.上网本以及其它有前景的设备,都需引人入胜的设计. 响应式布局是这种情况下唯一理智的方式. 尽

响应式网页设计

响应式网页设计,这个概念在国外相当火热.不管是交互设计,视觉,前端开发都投入到这个老意识新概念的技术当中. 首先我们看下什么是响应式网页设计.它为用户从他们的电脑切换到iPad.iPhone.黑莓.HTC.平板电脑等等,该网站能自动切换适应的分辨率,图像大小和脚本.换句话说,该网站能自动响应用户的喜好.通俗点说法就是有求必应的网页!  它不仅仅是一种趋势,而是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题. 前面说了,其实这个是一个设计问题

【译】使用Apache Kafka构建流式数据平台(1)

前言:前段时间接触过一个流式计算的任务,使用了阿里巴巴集团的JStorm,发现这个领域值得探索,就发现了这篇文章--Putting Apache Kafka To Use: A Practical Guide to Building a Stream Data Platform(Part 1).在读的过程中半总结半翻译,形成本文,跟大家分享. 最近你可能听说很多技术名词,例如"流式处理"."事件数据"以及"实时"等,与之相关的技术有Kafka.S

《数据结构与算法 C语言版》—— 2.3线性表的链式表示与实现

2.3线性表的链式表示与实现 线性表的顺序存储结构的特点是逻辑关系上相邻的两个元素在物理位置上也相邻,因此可以随机存取表中任一元素,它的存储位置可用一个简单.直观的公式来表示.然而,从另一方面来看,这个特点也造成了这种存储结构的弱点:在作插入或删除操作时,需移动大量元素.本节我们将讨论线性表的另一种表示方法--链式存储结构,其特点是用一组地址任意的存储单元存储线性表中的数据元素.由于它不要求逻辑上相邻的元素在物理位置上也相邻,因此它没有顺序存储结构所具有的弱点,但同时也失去了顺序表随机存取的特点