Recently, the micro-format for some learning, in the learning process to harvest a lot. In this share, welcome to exchange!
Advantages of micro-format:
1, semantic HTML and CSS class names to mark common content.
2, so that the machine can read and understand only human can understand the data, a series of standardized methods.
3, the micro-format allows the content of the Web site easily docking with other applications, thereby increasing the usage rate of information.
Hcalendar basic rules for micro-format:
1, attributes and child properties are described by class.
2, the specific Hcalendar property is based on the icalendar property name, such as: vevent
3, property and child property name case sensitive
4, the Root property cannot be combined with other properties. such as <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 "2009-06-19t18:00:00″>06-19</abbr>, <abbr class=" duration "title=" p4w "> lasted 4 weeks </abbr></dd >
<dd class= "vcard" ><a class= "FN" href= "http://www.ued163.com/">jalin</a> <span class= "title" > Front-End development </span> <span class= "locality" > Guangzhou </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 "> Copyright:ued163</a></div>
The above demo is more basic and easy to understand, try to apply it:
Event Property Description:
Summary information for the summary event
Type of category Event
Link to URL Event
The start time/date of the Dtstart event, which is the trigger event
Duration of the Duration 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 8 minutes
vcard Contact Description:
fn Table Name attribute value
Email Table Message Property value
Reg Property Description
My tags: reg= "tag"
Copyright Rights rel Attribute Description: rel= "License"
The above code has an effect that shows:
Detection of micro-format plug-ins (now only Firefox and Safari):
Firefox:operator,tails Export
Safari:safari microformats
Micro-format Reference:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver micro-format extension
http://www.Webstandards.org/action/dwtf/microformats/