In letzter Zeit habe ich mich mit Mikroformaten beschäftigt und dabei viel gelernt. Teilen Sie es hier und freuen Sie sich über die Kommunikation!
Vorteile des Mikroformats:
Semantische HTML- und CSS-Klassennamen zur Kennzeichnung allgemeiner Inhalte.
Eine Reihe standardisierter Methoden, die es Maschinen ermöglichen, Daten zu lesen und zu verstehen, die möglicherweise nur für Menschen verständlich sind.
Mikroformate ermöglichen die einfache Integration von Inhalten einer Website in andere Anwendungen und erhöhen so die Nutzung von Informationen.
Grundregeln für hCalendar-Mikroformate:
Eigenschaften und Untereigenschaften werden durch Klassen beschrieben.
Bestimmte hCalendar-Eigenschaften basieren auf iCalendar-Eigenschaftsnamen wie:vevent
Bei Attribut- und Unterattributnamen wird die Groß-/Kleinschreibung beachtet
Das Attribut „root“ kann nicht mit anderen Attributen kombiniert werden. Beispielsweise ist <div class=vevent summary"> ungültig.
| <dl class="vevent"> <dt>Mein persönlicher Zeitplan:</dt> <dd> <a href=" http://sports.163.com " class="summary"> <span class="category">Schwimmen</span></a></dd> <dt>Aktivitätszeit:</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">hält 4 Wochen</abbr></dd> <dd class="vcard"> <a class="fn" href=" http://www.ued163.com > <span class="title">Front-End-Entwicklung</span> <span class="locality "> Guangzhou</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"> 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"> chrom</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"> Copyright: UED163</a></div> |
Die obige Demo ist relativ einfach und leicht zu verstehen. Versuchen Sie also, sie anzuwenden.
Beschreibung des Ereignisattributs:
zusammenfassende zusammenfassende Informationen des Ereignisses
Kategorie Art der Veranstaltung
URL-Ereignislink
dtstart Die Startzeit/das Startdatum des Ereignisses, das das Ereignis auslöst
Dauer Die Dauer des Ereignisses
Definition der Dauer-Datums-/Uhrzeitinformationen:
P2Y = dauert 2 Jahre
P10D = dauert 10 Tage
P3H = Dauert 3 Stunden
P2W = dauert 2 Wochen
P8DT8H8M = dauert 12 Tage, 8 Stunden und 8 Minuten
vcard-Kontaktinformationen:
fn-Tabellennamen-Attributwert
Wert des Mail-Attributs der E-Mail-Tabelle
Beschreibung des Reg-Attributs
Mein Tag: reg="tag"
Beschreibung des Urheberrechts-Nutzungsrechtes des rel-Attributs: rel="license"
Der obige Code erzeugt den folgenden Effekt:
Mikroformat-Plugins erkennen (derzeit nur Firefox und Safari):
Firefox:Operator,Tails-Export
Safari: Safari-Mikroformate
Referenz zu Mikroformaten:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver-Mikroformaterweiterung
http://www.Webstandards.org/action/dwtf/microformats/
Originaltext: http://www.ued163.com/?p=459