HTML5 Introduction to the design principle of the detailed

HTML5 and CSS3 era, the new version of 2011 Taobao home page has all used HTML5, embrace change is kingly. For the notes translation is very good, read it again, feel a lot of understanding, strongly recommend other do the development of children's shoes especially front also to see.
Not only did I get a sense of the relationship between html4,xhtml1.0, xhtml2.0, HTML5, but also the reason why there would be HTML5, and at the same time, stepping up the application of HTML5 in the project.

--------------------------------------------------------------------------------
The famous three principles of Asimov's Robot:
Robots must not harm humans, or stand idly by while humans are hurt.
The robot must obey the human order unless the order violates the first law.
Robots must defend themselves, as long as they do not violate the first and second laws.

--------------------------------------------------------------------------------
xhtml1.0 and html4.0 the same point:
The contents of two specifications are the same;
The glossary is the same;
All the elements are the same;
All attributes are the same;
xhtml1.0 and html4.0 only different points:
XHTML 1.0 requires the use of XML syntax (strict coding style)
All properties must use lowercase letters;
All elements must also use lowercase letters;
All attribute values must be quoted;
You also have to remember to use the end tag and remember to use the auto end tag for IMG and Br.
XHTML 1.1 and xhtml1.0 only changes:
Mark a document as an XML document
Error handling model FOR XML: Parser stops parsing if it encounters an error.
Unable to understand the XML browser, the user can not see the page directly.
XHTML 2 Features (this specification is not complete):
Still using the XML error-handling model, you must be sure to send the document as an XML document type;
Developers and browser vendors will never support each version of an existing HTML that is intentionally no longer backwards compatible.
A truly widely applied design principle:
Be conservative when sending, and open when receiving.
As a professional, when sending documents, we try to be as conservative as possible, using best practices as much as possible to ensure that the document is well-formed.
But from a browser's point of view, they must receive any document in an open gesture.

--------------------------------------------------------------------------------
HTML5
1, 2004 set up the Web Hypertext applications Technology Working Group (web Hypertext Technology Workgroup, WHATWG), completely out of the consortium.
2. In 2007, the consortium established the HTML5 Working Group to continue its work on the basis of the results of WHATWG work.

--------------------------------------------------------------------------------
HTML5 design principle One: avoid unnecessary complexity

The code is as follows	Copy Code
First, the DOCTYPE of the wording: HTML 4.01: <! DOCTYPE HTML PUBLIC "-//w3c/dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > XHTML 1.0: <! DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > HTML5: <! DOCTYPE html>//

This style of writing triggers the browser's standard mode. Note: DOCTYPE it is not addressed to the browser, DOCTYPE is written to the validator to see. Have the validator validate My Documents according to the DOCTYPE.
Second, the specified document's character encoding:

The code is as follows	Copy Code
HTML 4.01: <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> XHTML 1.0: <?xml version= "1.0" encoding= "UTF-8"?> HTML5: <meta charset= "Utf-8"/>

Note: This short writing, it is not only for the latest version of the browser, as long as the browser is still in use today is equally valid.
HTML5 Other Concise wording:

code is as follows	copy code
<link href= "#" rel= "stylesheet"/> //No More writing type= "Text/css", otherwise it would be to repeat yourself <script></script> // No need to write the scripting language used type= "Text/javascript" HTML5 design principle two: Support existing content <p class= "foo" > Hello world</p> <p class= "foo" >hello World <p class=" foo ">hello world</p> <p class= Foo>hello world</p>

Remark: HTML5 supports the various kinds of imprecise writing that already exist.
In JavaScript, you can add semicolons at the end of each statement, but not necessarily, because JavaScript inserts semicolons automatically ... JSLint is really a great tool to standardize the JavaScript coding style and is very useful in team projects.

--------------------------------------------------------------------------------
HTML5 design principle Three: solve the real problem
Add a link to an entire piece of content (including multiple block-level elements)

The code is as follows	Copy Code
HTML 4.01 XHTML 1.0: <p><a href= "/path/to/resource" >paragraph text.</a></p> HTML5: <a href= "/path/to/resource" > <p>paragraph text.</p>

</a> Note: This type of writing has long been in the browser, but it has not been written in the past, and now we have changed the standard to allow you to write.

--------------------------------------------------------------------------------
HTML5 Design principle Four: Pragmatic
The new semantic elements involve the header (header), the Foot (footer), the partition (section), the article (article) ...

code is as follows	copy code
//html 4.01 XHTML 1.0: <div id= "header" >...</div> <div id= "navigation" >...</DIV> <div Id= "main" >...</div> <div id= "sidebar" >...</DIV> <div id= "Footer" >...</div </body> //HTML5: <body> <nav>...< /nav> <div id= "main" >...</DIV> <aside>...</aside> <footer>...</ Footer> </body>

Note: The new elements section, article, aside, and Nav represent a new content model, an unprecedented content model in HTML--for content partitioning. The
makes new elements more valuable as substitutes for classes, because they can be used more than once in a page, and can be used more than once, and can be nested. The most common section in the
is the one that is most relevant to the content. and article is a special section. Aside, is a special section. Finally, NAV is also a special section.
/

code is as follows	copy code
/html 4.01 XHTML 1.0: <div class= "item" <div class= "meta" >...</DIV> <div class= "Content" ... </div> <div class= "links" >...</div> </div> //HTML5: <section class = "item" <footer class= "meta" >...</ Footer> <div class= "Content" ... </div> <nav class= "links" >...</nav>

</section> Note: In HTML5, as long as you create a new block of content, whether using section, article, aside, NAV, or other elements, you can use the H1, Without having to worry about what level the headline should be in the entire page; H2, H3, no problem.

--------------------------------------------------------------------------------
HTML5 Design principle V: smooth degradation
The other side of progressive enhancement is smooth degeneration.
Use the Type property to enhance the form:

The code is as follows	Copy Code
Input type= "number" Input type= "Search" Input type= "range" Input type= "Email" Input type= "Date" Input type= "url"

Note:
Existing browsers cannot understand these new type values, but when they see a type value they do not understand, the value of type is interpreted as text.
HTML5 also adds new attributes to the input element, such as placeholder (placeholder), which is used to put some text in a text box beforehand. No need for JavaScript to implement, it's perfect.

--------------------------------------------------------------------------------
HTML5 Video on Flash Video (visual Element):

The code is as follows	Copy Code
<video> <source src= "Movie.mp4" > <source src= "MOVIE.OGV" > <object data= "movie.swf" > <a href= "Movie.mp4" >download</a> </object> </video>

Note: Both should be balanced, whether HTML5 or flash:
If the browser supports the video element, also supports H264, there is nothing to say, with the first one.
If the browser supports the video element and supports OGG, then use the second one.
If the browser does not support the video element, try the Flash movie.
If the browser does not support the video element or flash, I also have the download link. The
follows another design principle, the Metcalfe law (Metcalfe ' laws):