The front end of the basics --html5 follow the five principles of design

In front of the words

In fact, html5 not directly developed by the w3c, w3c direction is xhtml2, instead of html5. When xhtml2 divorced from reality, can not be put into practice, w3c working group will examine only the direction of the steering html5. Why xhtml2 never implemented? Because it violates the principle of a design, this design principle is the famous Perth Tal rule - Be conservative when sending; To open reception. And follow a set of principles in the design process html5, html5 makes to rapid promotion. This article will introduce five design principles to follow html5

Avoid unnecessary complexity

html4

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "[网页链接](http://www.w3.org/TR/html4/strict.dtd%22%3E)

html5

<!DOCTYPE html>

html4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5

<meta charset="utf-8">

Support for existing content

The following four sections of code, only the first stage in xhtml is correct; while in html5, all are correct

<img src="foo" alt="bar" />
<p class="foo">Hello world</p>

<img src="foo" alt="bar">
<p class="foo">Hello world 
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>

<img src=foo alt=bar>
<p class=foo>Hello world</p>

Solve the problem of reality

In html4, even if two elements have the same block-level elements of the link address, it must be written separately, because the inline element can not contain block elements

<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

In the html5, since the content model, the element may comprise a block-level element

<a href="/path/to/resource">
    <h2>Headline text</h2>
    <p>Paragraph text.</p>
</a>

Content Model

html5 added a number of elements, including: section, article, aside and nav, they represent a new content model - to the contents of the partition. In the past people have been to organize content page with div, but as with other similar elements, div itself is not semantics. However, section, article, aside and nav is in fact clearly tell you - this one is like another document in the same document. Nothing located in these elements, can have its own summary, title, his feet.

Graceful degradation

Browser in the face of type value is not recognized, the value will be interpreted as a type of text

input type="number"input type="search"input type="range"input type="email"input type="date"input type="url"


Finally, I recommend a push in the front-end learning advanced exchange group 685,910,553 ( front-end data sharing )

Novice receive a free learning materials to see how proudly forward predecessors is constantly updated with the latest tutorials and learning methods (detailed front-end project combat instructional videos) in the programming world,

There are web front end want to learn, or change jobs, or college students, as well as work want to upgrade their skills, are learning little friends are welcome to join
(within the group will provide regular collection of some of the main group of free learning materials free books and finishing good interview questions and answers document!)

Guess you like

Origin blog.csdn.net/ITFENGHUOLUN/article/details/90523672