Learning html5-page structure (1)

Origin

On October 29, 2014, the World Wide Web Consortium announced that after almost 8 years of hard work, the HTML5 standard specification was finally finalized and released publicly.

The draft version of HTML5 was released in 13. As a quest for a program ape this time to catch a trend to learn about HTML5, and make a note so that later temperature.

Basis

"The gentleman is the Benlee, the Tao is born." ”

What is HTTP?

Hypertext Transfer Protocol (Http,hypertext Transfer Protocol) is one of the most widely used network protocols on the Internet. is a protocol based on TCP.

The definition is somewhat obscure, as we all know, it is difficult for a lot of programmers to really understand the definition if they have not written a socket. In fact, the key to this definition is based on the binary stream of things that are transmitted inside the TCP,TCP. In general, you can get the start tag, end tag, head, body, etc. from this stream. HTTP is TCP-based and typically has these things. The following image is the HTTP request header information that is obtained with Google Chrome.

From the picture you can see that the header information contains the request address, request method, request first-class information. If you want a more in-depth understanding of the HTTP protocol's request header, you can look at this article, "HTTP request header details."

What is that body? The body is HTML text.

What is HTML?

HTML is called Hypertext Markup Language, is one of the standard common markup language, mainly used in the Internet. Every day the programmer writes a page, whether JSP or PHP, will eventually be assembled into a full HTML text to the browser, the browser in accordance with the HTML standard, the text parsing, and then on the page to show the gorgeous content.

Then let's look at what the HTML standard is.

• Hypertext Markup Language (first edition)-published as a working group on Internet Engineering (IETF) in June 1993 (not a standard):
• HTML 2.0--released in November 1995 as RFC 1866, declared obsolete after RFC 2854 was released in June 2000
• HTML 3.2--January 14, 1997, the recommended standard
• HTML 4.0--December 18, 1997, the recommended standard
• HTML 4.01 (minor improvements)--December 24, 1999, the recommended standard
• HTML 5--October 28, 2014, the recommended standard

HTML text in the edit is necessary to allow one of the standards, or browser parsing will be problematic.

HTML text in general is mainly content, you can use CSS to modify these content in order to show a gorgeous effect in the browser.

What is CSS?

CSS is a cascading style sheet (cascading StyleSheet). The use of cascading style sheets in web pages makes it possible to effectively control the layout, font, color, background and other effects of the page.

In fact, this is the result of a design thought, that is, the content and the modification separation. This makes it possible to use different decorations for the same content to achieve different results. CSS is also standard, like HTML, each standard requires browser support to correctly modify the content to show. The newest is CSS3. In general, browsers parsing HTML files that do not have CSS adornments will use the default style adornments.

• CSS 1--December 17, 1996, the recommended standard
• CSS 2--January 11, 1999, the recommended standard
• CSS 3--May 21, 2001

In addition to the CSS can be decorated with HTML text, there are page scripting language can make HTML and CSS dynamic modification, the common scripting language has JavaScript.

What is JavaScript?

JavaScript is a literal-translation scripting language, which is a dynamic type, a weak type, a prototype-based language, and a built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a scripting language for the client, and is used in HTML (an application under the standard Universal Markup Language) to add dynamic functionality to an HTML Web page. A framework implemented by Javescript node. JS has started to support server-side programming. Javescript is also the same as the previous HTML, need browser support, otherwise it will not run up. Currently the browser is also widely supported by the JavaScript1.5 version. The latest JavaScript is version 1.8.5, Firefox 4, IE9, and OPERA11 are already supported.

• JavaScript 1.0 March 1996
• JavaScript 1.1 August 1996
• JavaScript 1.2 June 1997
• JavaScript 1.3 October 1998
• JavaScript 1.4
• JavaScript 1.5 November 2000
• JavaScript 1.6 November 2005
• JavaScript 1.7 October 2006
• JavaScript 1.8 June 2008
• JavaScript 1.8.1
• JavaScript 1.8.2 June 22, 2009
• JavaScript 1.8.5 July 27, 2010

HTML5 page Structure

Having written so much, you can finally start knocking on the code.

DOCTYPE statement

DOCTYPE is a shorthand for document type. It is used primarily to illustrate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (document type definition) you doctype define. HTML4, that's the way it's usually written.

1 <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd " >

Indicates that the current page is a HTML4 page. The primary purpose of the transition type is to be compatible with browsers that do not support cascading style sheets (CSS). In the same way, there are strict and frame-type DOCTYPE declarations.

1 <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 strict//en" "Http://www.w3.org/TR/html4/strict.dtd " >

Use this strict declaration if you need clean markup to avoid the clutter of the presentation layer. This type needs to be used in conjunction with cascading style sheets (CSS), and some older browsers may not be able to render the effect you want, so this type is generally not used.

1 <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "Http://www.w3.org/TR/html4/frameset.dtd " >

The frame type is mainly used to divide into different areas by using frameset labels and other speaking pages. This statement is better supported by IE browsers. The index.html file in the Java language-generated Javadoc is the declaration.

Relatively html4 DOCTYPE,HTML5 is much simpler, the following is the DOCTYPE statement of HTML5.

1 <! DOCTYPE HTML >

Too simple, simple even 5 no, a kind of HTML will not give 6 feeling.

Declaration of character encoding

Html4 used to be like this.

1 <  http-equiv= "Content-type"  Content= "text/html; charset=utf-8"  >

Now, this is the case in HTML5.

1 <  charset= "UTF-8">

Labels for layouts

Previously in HTML4, we generally used div to lay out the content of the page. In HTML5, a number of labels have been added specifically for layout.

A section can completely replace a div to represent a region.

Article is used to mark a post, comment.

Aside is used to mark a marginal note.

Headers are used to mark the head of a page, such as the logo's information in this column.

Footer is used to mark the end of a page, such as a copyright notice in this column.

Hgroup is usually used behind the header to mark the title group, meaning that the main title and subtitle of the article are marked as a whole.

Nav is used to mark the navigation bar of a website.

Of course, Div is still supported in HTML5, but using the new structure tag can be more friendly to search engines, and page developers are also easy to read the role of tags. Let's take a look at a complete example of using these tags.

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Hello HTML5</title>6 </Head>7 <Body>8     <Header>9         <H1>Rook Rabbit</H1>Ten         <HR> One     </Header> A     <nav> -         <ahref="#">Home</a>| -         <ahref="#">Essay</a>| the         <ahref="#">New Essays</a>| -         <ahref="#">Contact</a>| -         <ahref="#">Subscription</a>| -         <ahref="#">Management</a> +     </nav> -     <article> +         <Hgroupdraggable= "true"> A             <H1>Learning HTML5</H1> at             <H3>Page Structure label</H3> -         </Hgroup> -         <aside -             style= "Font-size:larger; font-style:italic; color:blue; float:right; width:120px;"> -This article is mainly used to describe the page structure and structure tags of HTML5</aside> -         < Section> in             <P>On October 29, 2014, the World Wide Web Consortium announced that after almost 8 years of hard work, the HTML5 standard specification was finally finalized and released publicly.</P> -             <P> toThe draft version of HTML5 was released in 13. As a quest for a program ape this time to catch a trend to learn about HTML5, and make a note so that later temperature.</P> +         </ Section> -     </article> the     <Footer> &copy;2015-Speed Rabbit studio All rights reserved</Footer> * </Body> $ </HTML>

Page effects such as

Learning html5-page structure (1)