Learn HTML5-Page Structure (1)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Origin

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

The draft version of HTML5 was released in 2013. As an aspiring programmer, I want to catch up with the trend and learn HTML5 this time, and take notes for future review.

Basics

"A gentleman should stick to his roots, and the Tao will come from his roots."

What is HTTP?

Hypertext Transfer Protocol (HTTP, HyperText Transfer Protocol) is the most widely used network protocol on the Internet. It is a protocol based on TCP.

The definition is a bit obscure. Everyone knows this. In fact, it is difficult for many programmers to truly understand this definition if they have never written sockets. In fact, the key to this definition is based on TCP. What is transmitted in TCP is a binary stream. Generally, the start tag, end tag, header, body, etc. can be obtained from this stream. HTTP is based on TCP and generally has these things. The picture below is the HTTP request header information obtained using Google Chrome.

As you can see from the picture, the header information includes the request address, request method, request header and other information. If you want to have a deeper understanding of the request headers of the http protocol, you can read this article "Detailed Explanation of HTTP Request Headers".

What is that body? The body is HTML text.

What is HTML?

HTML is called Hypertext Markup Language, which is one of the standard universal markup languages and is mainly used on the Internet. The pages programmers write every day, whether it is jsp or php, will eventually be assembled into a complete HTML text and passed to the browser. The browser parses the text according to HTML standards, and then displays gorgeous content on the page.

Then let’s take a look at what HTML standards are.

Hypertext Markup Language (first edition) Published as an Internet Engineering Task Force (IETF) working draft (not a standard) in June 1993:

HTML 2.0 1995 Published in November as RFC 1866, it was declared obsolete following the publication of RFC 2854 in June 2000

HTML 3.2?? January 14, 1997, W3C Recommendation

HTML 4.0? ?December 18, 1997, W3C Recommendation

HTML 4.01 (minor improvements)??December 24, 1999, W3C Recommendation

HTML 5??October 28, 2014 On the same day, W3C recommended standards

HTML text must be edited to allow one of the standards, otherwise there will be problems with browser parsing.

HTML text generally contains content, which can be modified with CSS to display gorgeous effects in the browser.

What is CSS?

CSS is Cascading StyleSheet. Using cascading style sheet technology when making web pages can effectively achieve more precise control over the layout, fonts, colors, backgrounds and other effects of the page.

In fact, this is the result of a design idea, that is, the separation of content and decoration. In this way, different modifications can be used to achieve different presentation effects for the same content. CSS also has standards, just like HTML. Each standard requires browser support to correctly modify the content for display. The latest is CSS3. Generally, when browsers parse HTML files without CSS modifications, they will use default style modifications.

CSS 1--December 17, 1996, W3C Recommendation

CSS 2--January 11, 1999, W3C Recommendation

CSS 3-- May 21, 2001

In addition to CSS that can modify HTML text, there are also page script languages that can dynamically modify HTML and CSS. Common script languages include javascript.

What is JavaScript?

JavaScript is a literal scripting language. It is a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called the JavaScript engine, which is part of the browser and is widely used in client-side scripting languages. It was first used on HTML (an application under Standard Universal Markup Language) web pages to add dynamic functions to HTML web pages. . Node.js, a framework implemented by JaveScript, has already begun to support server-side programming. JaveScript, like the previous HTML, requires browser support, otherwise it will not run. Currently, browsers still widely support JavaScript version 1.5. The latest JavaScript is version 1.8.5, which is already supported by Firefox 4, IE9 and Opera11.

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 After writing so much about the page structure

, I can finally start typing the code.

DOCTYPE declaration

DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (Document Type Definition) defined by your DOCTYPE. HTML4 is generally written like this

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

Copy after login

indicates that the current page is a transitional page of HTML4. The main purpose of transitional styles is to be compatible with browsers that do not support Cascading Style Sheets (CSS). The same goes for strict and framed DOCTYPE declarations.

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

Copy after login

Use this strict declaration if you need clean markup without presentation clutter. This type needs to be used with Cascading Style Sheets (CSS), and some old 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">

Copy after login

The frame type is mainly used to divide the page into different areas using the frameset tag. This statement is better supported by IE browser. The index.html file in the javaDoc generated by the java language is this statement.

Compared with the DOCTYPE of html4, the DOCTYPE of html5 is much simpler. The following is the DOCTYPE declaration of html5.

1 <!DOCTYPE html>

Copy after login

It’s too simple, it doesn’t even have 5, it feels like html can’t produce 6.

Declaration of character encoding

This is how it used to be in html4

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

Copy after login

This is how it is now in html5

1 <meta charset="UTF-8">

Copy after login

Tags used for layout

In the past in html4, we generally used divs to layout page content. In HTML5, some tags specifically used for layout have been added.

section can completely replace div to represent an area.

article is used to mark an article or comment.

aside is used to mark a side note.

Header is used to mark the head of the page. For example, the logo information is in this column.

Footer is used to mark the end of the page. For example, the copyright statement is in this column.

hgroup is generally used after the header to mark the title group, which means that the main title and subtitle of the article are marked as a whole.

nav is used to mark the navigation bar of the website.

Of course, div is still supported in HTML5, but using new structural tags can be more friendly to search engines. In addition, page developers can easily understand the role of tags. Let's look at a complete example using these tags.

 1 <!DOCTYPE html> 2  3  4  5 hello html5 6  7  8      9         飞车兔
10         
11     
12     13         首页|14         随笔|15         新随笔|16         联系|17         订阅|18         管理19     
20     21         22             学习html5
23             页面结构标签
24         25         27             这篇文章主要用来介绍html5的页面结构和结构标签28         29             2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
30             31                 而HTML5的草稿版本在13年就已经放出。作为一个有追求的程序猿这次想赶一次潮流学习一下HTML5，并作一次笔记以便日后温故。
32         
33     
34      ©2015-飞车兔工作室版权所有
35 36

Copy after login

The page effect is as shown below