Recently I have been studying microformats and gained a lot in the learning process. Share it here and welcome to communicate!
Advantages of micro format:
Semantic HTML and CSS class names to mark common content.
A series of standardized methods that enable machines to read and understand data that may only be understandable by humans.
Microformats allow content on a website to be easily integrated with other applications, thereby increasing the use of information.
Basic rules for hCalendar microformats:
Properties and sub-properties are described by classes.
Specific hCalendar properties are based on iCalendar property names such as:vevent
Attribute and sub-attribute names are case sensitive
The "root" attribute cannot be combined with other attributes. For example, <div class=vevent summary"> is invalid.
| <dl class="vevent"> <dt>My personal schedule:</dt> <dd> <a href=" http://sports.163.com " class="summary"> <span class="category">Swimming</span></a></dd> <dt>Activity time:</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">lasts for 4 weeks</abbr></dd> <dd class="vcard"> <a class="fn" href=" http://www.ued163.com > <span class="title">Front-end development</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"> 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"> Copyright: UED163</a></div> |
The above demo is relatively basic and easy to understand, so try applying it.
Event attribute description:
summary summary information of the event
category type of event
url event link
dtstart The start time/date of the event, which triggers the event
duration The duration of the event
duration date/time information definition:
P2Y = lasts 2 years
P10D = lasts 10 days
P3H = Lasts 3 hours
P2W = lasts 2 weeks
P8DT8H8M = lasts 12 days, 8 hours and 8 minutes
vcard contact information:
fn table name attribute value
email table mail attribute value
reg attribute description
My tag: reg="tag"
Copyright usage right rel attribute description: rel="license"
The above code produces the following effect:
Detect microformats plug-ins (currently only Firefox and Safari):
firefox:Operator,Tails Export
Safari:Safari Microformats
Microformats reference:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver microformats extension
http://www.Webstandards.org/action/dwtf/microformats/
Original text: http://www.ued163.com/?p=459