HTML5 follow the five principles of design

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

Avoid unnecessary complexity
[html4]

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【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, <a>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

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"

Published 237 original articles · won praise 8 · views 5160

Guess you like

Origin blog.csdn.net/weixin_45761317/article/details/103898782