Introduction to HTML 5 design principles-H5 Tutorial-php.cn

Introduction to HTML 5 design principles

王林

Release： 2021-02-01 14:14:57

forward

2733 people have browsed it

Introduction to HTML 5 design principles

Introduction:

HTML5 is a language description method for constructing Web content. HTML5 is the next generation standard of the Internet and a language method for constructing and presenting Internet content. It is considered to be one of the core technologies of the Internet. HTML was created in 1990, and HTML4 became an Internet standard in 1997 and is widely used in the development of Internet applications.

Actually, html5 is not directly formulated by w3c. The direction of w3c is xhtml2, not html5. When xhtml2 was out of touch with reality and could not be put into practice, the w3c working group turned its research direction to html5. Why did xhtml2 never materialize? Because it violates a design principle, which is the famous Burstahl's law - be conservative when sending; be open when receiving. A series of principles were followed in the html5 design process, which enabled html5 to be promoted quickly. This article will introduce the 5 design principles followed by html5

Avoid unnecessary complexity

html4

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

Copy after login

html5

<!DOCTYPE html>

Copy after login

html4

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

Copy after login

Support existing content

The following four pieces of code, in xhtml only the first paragraph is correct; in html5, all of them 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>

Copy after login

(Learning video sharing: html video tutorial)

Solve real-life problems

In HTML4, even if two block-level elements have the same link address, It must also be written separately, because inline elements cannot contain block-level elements

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

Copy after login

And in html5, due to the use of the content model, elements can also contain block-level elements

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

Copy after login

Content model

html5 adds a number of new elements, including: section, article, aside and nav, which represent a new content model - partitioning content. People have been using divs to organize content on pages in the past, but like other similar elements, divs themselves have no semantics. But section, article, aside, and nav are actually telling you clearly that this section is like another document within the document. Any content located within these elements can have its own summary, its own title, its own footer.

Smooth degradation

When the browser encounters an unrecognized type value, it will interpret the value of type as text

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

Copy after login

Related recommendations: html5 tutorial

The above is the detailed content of Introduction to HTML 5 design principles. For more information, please follow other related articles on the PHP Chinese website!