最近對微格式進(jìn)行了一些學(xué)習(xí),在學(xué)習(xí)過程中收獲不少。在此分享下,歡迎交流!
微型格式的優(yōu)點(diǎn):
語義化的HTML和CSS類名稱來標(biāo)記共同內(nèi)容。
使機(jī)器可以閱讀和理解可能只有人類可理解的數(shù)據(jù),一系列的標(biāo)準(zhǔn)化方法。
微格式允許網(wǎng)站上的內(nèi)容輕易地與其他應(yīng)用對接,從而提高信息的使用率。
hCalendar微格式基本規(guī)則:
屬性和子屬性通過class來描述。
特定的hCalendar屬性是建立在iCalendar屬性名稱基礎(chǔ)上的如:vevent
屬性和子屬性名字大小寫敏感
"根"屬性不能同其他屬性組合。如<div class=vevent summary">是無效的。
<dl class="vevent"> <dt>我的個人日程:</dt> <dd><a href="http://sports.163.com" class="summary"><span class="category">游泳</span></a></dd> <dt>活動時間:</dt> <dd><abbr class="dtstart" title="2009-05-19T18:00:00″>05-19</abbr>–<abbr class="dtend" title="2009-06-19T18:00:00″>06-19</abbr>, <abbr class="duration" title="P4W">持續(xù)4周</abbr></dd> <dd class="vcard"><a class="fn" href="Jalinhttp://www.ued163.com/">Jalin</a> <span class="title">前端開發(fā)</span> <span class="locality">廣州</span> <span class="org">UED163</span> <a href="mailto:jalin668@126.com" class="email">jalin668@126.com</a></dd> </dl> <div class="mytag"> <a href="http://www.163.com/firefox/" title="firefox" rel="tag">firefox</a> <a href="http://www.163.com/IE/" title="IE" rel="tag">IE</a> <a href="http://www.163.com/safari/" title="safari" rel="tag">safari</a> <a href="http://www.163.com/chrome/" title="chrome" rel="tag">chrome</a> <a href="http://www.163.com/oprea/" title="oprea" rel="tag">oprea</a> </div> <div class="copyright"><a href="http://www.ued163.com/" rel="license">版權(quán):UED163</a></div> |
以上demo比較基礎(chǔ)而且簡單易懂,試著應(yīng)用下吧。
事件屬性說明:
summary 事件的概要信息
category 事件的類型
url 事件的鏈接
dtstart 事件的開始時間/日期,即觸發(fā)事件
duration 事件的持續(xù)時間
duration 日期/時間信息定義:
P2Y = 持續(xù)2年
P10D = 持續(xù)10天
P3H = 持續(xù)3個小時
P2W = 持續(xù)2周
P8DT8H8M = 持續(xù)12天8小時8分鐘
vcard 聯(lián)系人說明:
fn 表姓名屬性值
email 表郵件屬性值
reg 屬性說明
我的標(biāo)簽:reg="tag"
版權(quán)使用權(quán)rel屬性說明:rel="license"
以上代碼產(chǎn)生效果顯示:
檢測微格式插件(現(xiàn)只有Firefox與Safari):
firefox:Operator,Tails Export
Safari:Safari Microformats
微格式參考資料:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver微格式擴(kuò)展
http://www.Webstandards.org/action/dwtf/microformats/
原文:http://www.ued163.com/?p=459
如對本文有疑問,請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答??! 點(diǎn)擊進(jìn)入論壇