如果你不熟悉这个概念豪华< / >(简单的旧语义HTML),首先要知道的是,生成反映内容上下文(而不是风格)的语义代码是网页设计过程的一个关键组成部分。虽然HTML有一大堆很棒的元素来传达意义,但为了更好地表示存在于页面上的内容类型,已经创建了大量专门构建的微格式(约定)。本指南讨论了可以增强网站语义和互操作性的流行微格式。

微格式是什么?

微格式是非常有趣的,如果你给他们机会。虽然它们不是W3C HTML规范的组成部分,但它们确实提供了一组有价值和有用的命名约定(使用idrel而且牧师属性值),标识页面上的兴趣点,如日历事件、内容许可协议的链接,甚至烹饪食谱等古怪的东西。

虽然微格式还不是W3C标准——尽管许多微格式已经被推荐给W3C作为标准或处于草案状态——但浏览器和web服务对它们的支持级别说明了它们的实用性。简单地说:微格式是值得学习的,并将其应用到你构建的网站中。微格式官方网站微格式官方网站< / >有一个社区维基,讨论板,和工具供您使用。

您可能已经在使用微格式,如果您使用CMS< / >就像WordPress< / >,因为它内置了对一些更简单的数据形式的支持,例如rel属性。如果您是微格式的新手,那么您可能想知道为什么要费力地使用它们。当然,它们有很多优点和缺点,但是任何能够帮助我们的网站更好地被外部机器理解的东西——比如为我们的网页建立索引的网络蜘蛛——都是值得付出额外努力的。

在众多微格式中,rel =“nofollow”< / >可能是最著名的。因为微格式使用传统的HTML语法和属性,所以可以在XHTML中使用它们。甚至XML页面(比如RSS和Atom提要)也可以利用微格式(如果您使用Feedburner这样的服务,它们确实可以利用微格式)。

这极大地增加了它们的潜在用途。他们也很好地结合RDFa< / >以及其他元数据。

使用微格式的好处

  1. 它们将提高你的内容的语义价值。
  2. 网络应用程序可以使用它们来发现你网站的数据;他们可以使用它们与站点上的数据进行交互。
  3. 社交网络正在用户档案中实现它们,这样第三方网络服务就可以与它们互操作。
  4. 浏览器扩展允许用户访问微格式数据。例如,Michromeformats< / >是一个谷歌Chrome扩展,发现网页上嵌入的微格式。
  5. 像Googlebot这样的网络蜘蛛会在站点索引中使用它们。

微格式的缺点

  1. 它们需要额外的HTML标记。
  2. 它们是你必须学习和维护的另一件事。
  3. 微格式只适用于相对较少的数据类型。
  4. 它们将注意力吸引到您的数据上(这是可以挖掘的)。
  5. Web浏览器并不统一支持它们。

操作人员插件FirefoxFirefox的Operator插件可以检测微格式代码,并使其具有人类可读性。hCard微格式< / >允许Firefox的外接程序,如tail Export,发现并连接一个人的虚拟名片。

微格式参考表

每种微格式都有表示特定类型信息的独特用途,它们都可能根据您的需要而有用。而广泛的细节可以在规格中找到微格式的网站< / >,下面是现有产品的快速参考清单。

的名字 目的
美国存托凭证< / > 标记街道地址
FOAF< / > 描述与另一个网站的关系
地理< / > 标示地理位置
hAtom< / > 添加syndication-friendly内容
hAudio< / > 描述音频或播客
hCalendar< / > 标记基于事件或日期的内容
hCard< / > 用于商业和个人联系
hListing< / > 商品和服务清单
hMedia< / > 列出媒体引用
hNews< / > 使用hAtom进行新闻报道
hProduct< / > 嵌入广泛的产品细节
hRecipe< / > 标记食谱和烹饪数据
hResume< / > 用来展示简历或简历
hReview< / > 产品和服务的评论和评级
hSlice< / > 在IE8中弹出内部或外部订阅窗口
rel< / > relattribute是HTML元素的微格式;一些流行的例子:
机器人排除概要< / > 给网络爬虫指令
VoteLinks< / > 提供喜欢或不喜欢链接的选项
XFN< / > 描述与网站的关系
XFolk< / > 列出了最喜欢的链接
XMDP< / > 将资源添加到页面的配置文件
亲亲抱抱< / > 概述文件或项目列表

rel属性值

为了解释上表,下面是rel(是“relationship”的缩写)属性值的描述:

  • 许可:在一个页面上标识一个许可协议(如知识共享或GPL)。
  • Nofollow:告诉搜索引擎不要添加权重或价值的链接资源。
  • 标签:应用关键字锚,以建立标签云或类别。
  • 目录:指示当前网站上目录(如文件夹)中的列表。
  • 附件:对于链接到可下载文件和其他非web文档的锚。
  • 家:生成到网站主页的永久链接。
  • 付款:要包括在指向购买或支付页面的锚。

使用微格式:例子

如果不提供如何使用微格式的说明,那么推荐微格式没有什么好处。所以,在这里,我们将讨论每个微格式的例子,可以实现到你的网站。首先,要理解的关键概念是,微格式是由包含在orgydF4y2BaidHTML元素的值。

元素可以在显示的数据类型中发挥作用(例如使用锚链接),但是如果没有语义替代,则可以使用divorgydF4y2Ba跨度将名称环绕在内容周围。尽管使用跨度可能看起来不优雅,它在这种情况下增加了特殊的意义。

美国存托凭证

< ul类= "美国存托凭证李“> < class = "街道地址">北街123号 
  • 邮政编码">MX43 991
  • FOAF

    如何创建FOAF概要文件:

    1. 访问FOAF-o-Matic< / >然后创建基本的个人资料。
    2. 将文档保存为foaf.rdf(这样您就知道它是干什么用的)在一个目录中(可能命名为misc).
    3. 使用链接标记中引用FOAF配置文件< >头< / >的HTML文档,例如:
    4. 将所有foaf相关文件上传到您的网站。现在可以使用它并建立索引了!

    地理

    < p class = "地理= " " > <简写的类纬度" title="37.408183">N 37°24.491 - <缩写class="经度" title="-122.13855">W 122°08.313 

    根的名字:地理所需的属性值:

    • 纬度
    • 经度

    hAtom

    < div class = "hAtom" > < div class = "hentry= " " > < h3类条目标题">I Love Microformats <缩写class="发表" title="2010-08-28, 14:37-07:00">Aug 28, 2010 

    你觉得这篇文章怎么样?< / > < / p > < div class = "条目的内容>

    将您的内容放在这里以获得最大的影响!< / p > < / div >

    Tags:
    微格式
  • .

    根的名字:hAtom, hfe属性值:

    • hentry
    • 条目标题
    • 条目的内容
    • entry-summary
    • 书签
    • 发表
    • 更新
    • 作者

    hAudio

    < p class = "haudio= " " > < em类fn"波西米亚狂想曲 by  < em类fn组织">Queen found on hCalendar
             

    你可以使用hCalendar创造者< / >而不是手动编写代码。

    < p class = "vEvent" > < class = "url" href="http://www.yoursitehere.com/">MySite 新网站上线: <缩写class="dtstart" title="20091202"> 12月2日- <缩写class="dtend" Title ="20091204">4, at hCard
             

    你可以使用hCard的创造者< / >而不是手动编写代码。

    < ul id = "hCard-John-Doe" class="vcard"fn">John Doe 
  • Special Stores
  • (电子邮件保护)< / >" >(电子邮件保护)< / >< / > < /李> <李类= "美国存托凭证">
    • 44语义驱动
    • Markup City
    • World Wide Web
    • BP33 9HQ
    • Internet
  • hListing
    < div class = "hlisting"> 

    办公空间 dtlisted标题="20100202">2/2/10)

    50平方英尺的空间可在当地技术办公室:

    < span class = "街道地址" > 123 Microland道路。< / span > < span class = "位置“网络空间> < / span >, < span class = "地区" > XD < / span > < span class = "邮政编码" > 12345 < / span > < span class = "国家">Mars
    April 2010 for $1500/qtr

    联系方式:John Doe at < span class = "价值“> (01)12345 - 678900 < / span >(<方法类= "类型title="cell">C)
  • 根的名字:hlisting所需的属性值:

    • 描述
    • Lister (fn, email, url, tel)
    • 行动(出售、出租、交易、见面、宣布、提供、通缉、事件、服务)

    其他属性值:

    • 版本
    • dtlisted
    • dtexpired
    • 价格
    • 项目(fn, url, photo, geo, adr)
    • 总结
    • 标签
    • 永久链接

    hMedia

    < div class = "hmedia"> 

    Open Media Web简介

    .

    根的名字:hMedia属性值:

    • fn
    • 贡献者
    • 照片
    • 球员
    • 外壳

    hNews

    < div class = "hnews hentry项= " " > < h4类条目标题">微格式太棒了 

    By John Doe < span class = "org fn">Associated Press - 4月19日2010

    News story

    .

    根的名字:hNews所需的属性值:

    • hentry
    • 条目标题
    • 作者
    • source-org
    • 电子名片
    • 更新

    其他属性值:

    • 国际日期变更线
    • 地理(经度、纬度)
    • item-license
    • 原则

    hProduct

    < ul类= "hproduct李“> < class = "品牌“> MySite !<李> / <李class = "类别”李李< / > < >软件类= "fn">Microsoft Office 2007 
  • url李”> http://office.microsoft.com < / > < / ul >
  • 根的名字:hProduct必要的属性值:

    • fn

    其他属性值:

    • 品牌
    • 类别
    • 价格
    • 描述
    • 照片
    • url
    • 审查
    • 清单
    • 标识符(类型(model, mpn, upc, isbn, issn, ean, jan, sn, vin, sku),值)

    hRecipe

    < div class = "hrecipe= " " > < h3类fn">快面 

    成分hcard" > < span class = "价值">2.5 kg 袋泡面。< / p > < ul类= "指令"水烧开,加粉做酱汁,加面条,搅拌好。

    持续时间" > 5 <简写的title =“分钟”>分钟< /方法> < / span >。< / p > < p class = "营养hcard价值" > 500 < / span > < span class = "类型" >焦耳< / span >的能量。< / p > < / div >

    根的名字:hRecipe所需的属性值:

    • fn
    • 成分(值类型)

    其他属性值:

    • 收益率
    • 指令
    • 持续时间
    • 照片
    • 总结
    • 作者
    • 发表
    • 营养(价值,类型),标签

    hResume

    您可以使用hResume创建器来代替手动编写代码。

    < div id = "hResume“> < p class = "总结">我生产微格式化数据多年了

      教育vevent" > < class = "url的总结" href = " http://example/ " > < / >示例(<简写的class = "dtstart"标题="2007-02-11">2007 - <缩写class="dtend“title = " 2009-03-22 " > 2009 < /方法>)< /李> < / ol > < ol类= "vcalendar">< li class="experience vevent">CEOMicroland 2006年5月 - present

    我有技能" rel = "标签" href="http://en.wikipedia.org/wiki/HTML">HTML and < / >。< / p > < / div >

    根的名字:hResume必要的属性值:

    • 联系方式(hCard + adr)

    其他属性值:

    • 总结
    • 教育(hCard + vEvent)
    • 体验(hCard + vEvent)
    • 联系(hCard)
    • 技能
    • 出版物

    hReview

    你可以使用hReview创造者< / >而不是手动编写代码。

    < div class = "hreview" > < p > < span class = "评级">5 out of 5 stars

    面馆

    fn">John Doe - <缩写class="dtreviewed" title=" 20070418t2.3 -0700">April 18, 2007

    < span class = "fn组织“>面屋< span>是最好的小地方之一!”

    • 到访日期:2007年4月
    • 食用食物:方便面