最近私はマイクロフォーマットを勉強しており、学習の過程で多くのことを学びました。ここで共有してコミュニケーションを歓迎します!
マイクロフォーマットの利点:
共通のコンテンツをマークするためのセマンティック HTML および CSS クラス名。
人間にしか理解できないデータを機械が読み取って理解できるようにする一連の標準化された方法。
マイクロフォーマットを使用すると、Web サイト上のコンテンツを他のアプリケーションと簡単に統合できるため、情報の利用が増加します。
hCalendar マイクロフォーマットの基本ルール:
プロパティとサブプロパティはクラスによって記述されます。
特定の hCalendar プロパティは、次のような iCalendar プロパティ名に基づいています:vevent
属性名とサブ属性名では大文字と小文字が区別されます
「root」属性を他の属性と組み合わせることはできません。たとえば、<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">4 週間続きます</abbr></dd> <dd class="vcard"> <a class="fn" href=" http://www.ued163.com > <span class="title">フロントエンド開発</span> <span class="locality "> 広州</span> <span class="org">UED163</span> <a href=" mailto:[email protected] " class="email"> [email protected]</a></ dd> </dl> <div class="mytag"> <a href=" http://www.163.com/firefox/ " title="firefox" rel="tag">ファイアフォックス</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">サファリ</a> <a href=" http://www.163.com/chrome/ " title="chrome" rel="tag">クロム</a> <a href=" http://www.163.com/oprea/ " title="oprea" rel="tag">オプレア</a> </div> <div class="copyright"> <a href=" http://www.ued163.com/ " rel="license">著作権: UED163</a></div> |
上記のデモは比較的基本的でわかりやすいので、応用してみてください。
イベント属性の説明:
概要 イベントの概要情報
カテゴリ イベントの種類
URLイベントリンク
dtstart イベントをトリガーするイベントの開始時刻/日付
期間 イベントの期間
期間日時情報定義：
P2Y = 2 年間持続します
P10D = 10 日間持続します
P3H = 3 時間持続します
P2W = 2 週間続きます
P8DT8H8M = 12 日と 8 時間 8 分持続します
vcard の連絡先情報:
fn テーブル名属性値
電子メールテーブルのメール属性値
reg 属性の説明
私のタグ: reg="タグ"
著作権使用権 rel 属性の説明: rel="license"
上記のコードは次のような効果をもたらします。
マイクロフォーマット プラグインを検出します (現時点では Firefox と Safari のみ):
Firefox:オペレーター、テール エクスポート
Safari:Safari マイクロフォーマット
マイクロフォーマットのリファレンス:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver マイクロフォーマット拡張機能
http://www.Webstandards.org/action/dwtf/microformats/
原文：http://www.ued163.com/?p=459