html的特质语义:微格式及其他(重点介绍其中两种)
今天再次翻开html的书本, 感觉过了个周末似乎生疏了许多, 虽然我是刚接触html的, 但是对于他还是抱有极其大的兴趣的, 所以不爱看书的我, 也开始一遍遍的翻阅着书本, 寻找解决问题的方法, 下面就给大家分享下我心中的疑问和解决问题的办法吧, 同时也为大家带来今天我的收获!
一.html中的元数据
元数据本质上就是关于数据的数据. 举个例子吧, 当我们从iTunes音乐商店购买一首歌的时候, 这首歌曲的文件本身(AAC文件)就是数据, 而出现在音频播放器上面的歌曲信息(标题. 歌手. 专辑. 歌曲时长. 等等)则都是元数据, 这些信息以所谓的ID3格式存放在音频文件的起始处.
在html中历史上元数据是被包含在<meta>元素中的,并放在文档的标题处.自从html2.0开始, 这个元素就已经存在了, 而且非常开放, 他设计用来让作者在网页上包含各种元数据: 指定一个属性(通过name属性, 可以是任何想要的值)和一个值(通过content属性).
二.微格式
1. 首先我们来说说什么是微格式?
答:微格式就是建立在已有的 被广泛采用的标准基础之上的一组简单的, 开放的数据格式.
2. 微格式主要包括哪几种?
答:微格式主要包括hCard，hCalendar，hAtom等.
那么今天我们就主要来了解下hCard和hCalendar微格式吧, 也许会讲的过于模糊, 但是也算是一点收获吧, 望友友门给出宝贵的意见哈, 嘿嘿.
(1)hCard微格式及实例
hCard微格式是一种设计用来表示人员及公司, 组织和位置的格式, 或多或少使用了与vCard标准相同的属性和值, 但它使用的是(X)HTML.
先来看一个vCard样例:
BEGIN:VCARD
VERSION:5.0
N:HENAN, Paul
FN:Paul Henan
URL:http://www.baidu.com/
ORG:International Man of Mystety
END:VCARD
那么与之等同的hCard编码是:
<div class="vcard"> <a class="url fn" href="http://www.baidu.com/">Paul Henan</a> <div class="org">International Man of Mystery</div> </div>
效果如下:
再点击Paul Henan后他会跳转到我们所给定的url(类似于超链接)也就是百度首页了, 是不是很简单呢, 哈哈.
下面为大家附上一个实例, 通过直接将hCard类别名集成到表格标记中, 我们可以形成一个人员表格, 从而每个人都可以有自己的hCard, 下面请看代码和效果图:
<table> <tr> <th scope="col">Name and URL</th> <th scope="col">Organization</th> </tr> <tr> <td><a href="http://www.baidu.com">henan</a></td> <td><a href="http://www.taobao.com">internation</a></td> </tr> <tr> <td><a href="http://www.jingdong.com">vikki</a></td> <td><a href="http://www.tianmao.com/">julaibao</a></td> </tr> </table>
这其中的<th>标签的意思是定义单元格的, 但是与<td>标签不同的是<th>标签用于单元格的表头并且默认加粗显示.
其中<a>标签相当于超链接, 在你点击相应的地方的时候会跳转到指定的区域或者网址链接处.
下面为大家附上效果图:
下面来告诉大家如果一个公司有两个电话, 而其中一个电话是首选电话的话我们应该怎么解决呢, 不要焦急, 下面我就来告诉大家了, 哈哈! 敬请期待哦, 其实也是很简单的, 下面为大家献上代码:
<p class="vcard"><span class="fn">Christine Lockwood</span>can be contacted via telephone (<span class="tel"><span class="type">cell</span>(<span class="type">pref</span>erred): <span class="value">+44 1234 5656</span></span>, <span class="tel"><span class="type">work</span>:<span class="value">+44 1234 7878</span></span>) or by fax (<span class="tel"><span class="type">fax</span>:<span class="value">+44 1234 7979</span></span>).</p>
其中pref就是着重支出, 他的意思也就是perfect的意思啦, 不过主要因为pref是来自vCard标准, 所以这段标记才看起来像上面一样.下面附上效果图:
当然了, 也可以在其中加入媒体类信息, 就比如说是图片, 这个实现起来也是很简单的, 只要在合适的位置引入<img>标签就可以了, 就不再赘述了!
(2)hCalendar微格式与其实例
网上讨论的常见的事件通常由下列元素构成:概要或者标题. 位置. URL. 起始日期和时间. 终止日期和时间以及描述. 那么要完成这些也算是一个有挑战性的事情了(当然是对于我这样的新手来说).下面先上图吧, 正所谓有图有真相, 哈哈:
看到下面的日期格式了吧, 这并不想是添加一个类别名那么简单. iCalendar格式中的日期需要采用ISO-8601格式, 因此, 对于上面的事件, 日期就是20060811, 既"年月日", 对于这种格式来说是非常便于机器理解的, 但是对于人来说就比较头疼了, 不过既然是问题, 总有解决办法的, 那么我们就要借助于<abbr>元素来按照人类可读的格式来表示日期, 然后将ISO-8601格式的日期放在<abbr>的title属性中.
同时还由于我们不仅仅希望显示日期更加希望显示起始和结束时间, 所以我们也需要在事件中标出这两个时间点. 这里所需要用到的两个类别名就是dtstart和dtend, 下面就是具体代码:
<p class="description">The 1992 release of the "Director's Cut" only confirmed what the international film cognoscenti have known all along:Ridley Scott's <cite>Blade Runner</cite>,based on Philip k.Dick's brilliant and troubling SF novel<cite>Do Androids Dream of Electric Sheep</cite>, still rules as the most visually dense, thematically challenging, and influential SF film ever made.</p> <p>Date: August 11th, 2006. Registration begins at<abbr class="dtstart" title="20060811T0930">09:30</abbr>,discussion ends at <abbr class="dtend" title="20060812T1630">4:30</abbr> same day.</p> <p>Venue: <span class="location">Orwell House Independent Theater</span></p>
以上就是这两种格式的简单使用了, 有什么不对的还请各位指出, 同时也希望对大家有所帮助.
今天的分享就先进行到这里了, 等明天有时间了, 我会继续来这里进行知识填充的, 那么等明天我要分享的东西就是我们经常遇到的并且也是非常实用的东东, 敬请期待哦, 加油吧骚年们!
