The semantic semantics of HTML: micro-format and others (two of them are highlighted)

　　Today again turn over the HTML books, feel a weekend seems to be unfamiliar a lot, although I was just touch html, but for him still have very big interest, so do not love reading of me, also began to read through the books over and over, to find ways to solve the problem, The following will give you to share my heart of the question and solution to the problem, but also for everyone to bring my harvest today!

　　I. Meta-data in HTML

　　Metadata is essentially data about the data. For example, when we buy a song from the itunes Music Store, the song's file itself (the AAC file) is the data, and the song information appears on the audio player (title. Album, song duration, and so on) are all meta-data, This information is stored in the so-called ID3 format at the beginning of the audio file.

In HTML history metadata is included in the <meta> element and placed at the title of the document. Since html2.0, this element has existed and is very open, designed to allow authors to include various meta-data on a Web page: Specifying a property (via the Name property, can be any desired value) and a value (via the Content property).

　　Two. Micro-format

1. First of all, what is a micro-format?

A: Micro-format is a set of simple, open data formats based on existing widely adopted standards.

2. What are the main types of micro-formats?

A: The micro format mainly includes Hcard,hcalendar,hatom and so on.

　　So today we are mainly to understand the next hcard and Hcalendar micro-format bar, may be said too vague, but also a little harvest, look at friends door to give valuable advice ha, hey.

(1) Hcard micro-format and examples

Hcard micro-format is a format designed to represent people and companies, organizations and locations, more or less using the same properties and values as the vcard standard, but it uses (X) HTML.

First look at a vcard sample:

Begin:vcard

version:5.0

N:henan, Paul.

Fn:paul Henan

url:http://www.baidu.com/

Org:international Man of Mystety

End:vcard

Then the equivalent of the Hcard code is:

<Divclass= "vcard">    <aclass= "URL fn"href= "http://www.baidu.com/">Paul Henan</a>    <Divclass= "org">International Man of Mystery</Div></Div>

　　The effect is as follows:

Then click on Paul Henan he will jump to our given URL (similar to the hyperlink) that is Baidu homepage, is not very simple, haha.

Here is an example, by directly integrating the Hcard category name into the table tag, we can form a staffing table so that everyone can have their own hcard, as shown in the code below:

<Table><TR><thScope= "Col">Name and URL</th><thScope= "Col">Organization</th></TR><TR><TD><ahref= "Http://www.baidu.com">Henan</a></TD><TD><ahref= "Http://www.taobao.com">Internation</a></TD></TR><TR><TD><ahref= "Http://www.jingdong.com">Vikki</a></TD><TD><ahref= "http://www.tianmao.com/">Julaibao</a></TD></TR></Table>

The <th> tag means that the cell is defined, but unlike the <td> tag, the <th> label is used for the cell's header and is displayed by default.

The <a> tag is the equivalent of a hyperlink, which jumps to the designated area or URL link when you click the appropriate location.

Below for everyone attached:

　 　Below to tell everyone if a company has two phone calls, and one of the telephone is the preferred phone number, we should how to solve it, do not worry, I will tell you, haha! Please look forward to Oh, in fact, is very simple, the following for everyone to present the code:

<Pclass= "vcard"><spanclass= "FN">Christine Lockwood</span>Can be contacted via telephone (<spanclass= "Tel"><spanclass= "type">Cell</span>(<spanclass= "type">Pref</span>erred):<spanclass= "value">+44 1234 5656</span></span>,<spanclass= "Tel"><spanclass= "type">Work</span>:<spanclass= "value">+44 1234 7878</span></span>) or by fax (<spanclass= "Tel"><spanclass= "type">Fax</span>:<spanclass= "value">+44 1234 7979</span></span>).</P>

one of the pref is the emphasis on spending, he means perfect meaning, but mainly because pref is from the vcard standard, so this mark looks like above. Attached below:

of course, you can also add media information, such as a picture, this implementation is very simple, as long as the appropriate location to introduce tags can be, will not repeat it!

(2) Hcalendar micro-format and its example

common events that are discussed on the web are usually composed of the following elements: a summary or a title. Location. Url. The start date and time. Date and time of termination and description. It would be a challenging thing to do that (of course, for a novice like me). Let's just say there is a picture of the truth, haha:

　　See the date format below, it's not like adding a category name is as simple as that. The date in the icalendar format needs to be in the ISO-8601 format, so for the above event, the date is 20060811, both "Month Day", for this format is very easy to understand the machine, but for people is more headache, but since it is the problem, there is always a solution, Then we need to use the <abbr> element to represent the date in a human-readable format, and then place the date in the ISO-8601 format in the title property of <abbr>.

And because we don't just want the display date to show the start and end times more, we also need to be in the event to bid for both points in time. The two class names needed here are Dtstart and dtend, and here's the code:

<Pclass= "description">The 1992 release of the "Director ' s Cut" only confirmed what the international film cognoscenti has known all Along:ridle Y Scott ' s<cite>Blade Runner</cite>, based on Philip K.dick ' s brilliant and troubling SF novel<cite>Do androids Dream of Electric Sheep</cite>, still rules as the most visually dense, thematically challenging, and influential SF film ever made.</P><P>Date:august 11th, 2006. Registration begins at<abbrclass= "Dtstart"title= "20060811t0930">09:30</abbr>, discussion ends at<abbrclass= "Dtend"title= "20060812t1630">4:30</abbr>Same day.</P><P>Venue:<spanclass= "Location">Orwell House Independent Theater</span></P>

The above is the simple use of these two formats, what is wrong also please point out, at the same time also hope to be helpful to everyone.

Today's share of the first to go here, and so tomorrow there is time, I will continue to come here to fill the knowledge, so tomorrow I want to share something that we often meet and is also very practical East, please look forward to Oh, come on, ladies and gentlemen!

The semantic semantics of HTML: micro-format and others (two of them are highlighted)