Simple HTML5 preliminary introductory tutorial_html5 tutorial skills

HTML5 represents the future; W3C (World Wide Web Consortium, World Wide Web Consortium) has abandoned XHTML, making HTML5 an official standard and recognized.

HTML5 is the next generation of HTML.
HTML5 will become the new standard for HTML, XHTML and HTML DOM, with the goal of replacing the existing HTML4.01 and XHTML1.0 standards. It hopes to reduce the dependence of Rich Internet Applications (RIA) on Flash, Silverlight, JavaFX, etc., and provide more APIs that can effectively enhance network applications.
The last version of HTML was created in 1999. The world of the Web has changed dramatically since then.
HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support.
HTML5 is the result of a collaboration between the W3C and the WHATWG.
WHATWG works on web forms and applications, while W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.
Some rules established for HTML5:
New features should be based on HTML, CSS, DOM and JavaScript.
Reduce the need for external plug-ins (such as Flash)
Better error handling
More markup to replace scripts
HTML5 should be device independent
The development process should be transparent to the public

The simplest HTML5 document

XML/HTML CodeCopy content to clipboard

1. span>>
2. title>A Tiny HTML Documenttitle>
3. p>Let's rock the browser, HTML5 style.< ;/p> 

A super simple HTML5 document containing only one line of text. It looks like this in the browser:

The more common structure uses

and to separate the information of the page from the actual content of the page, and uses to encapsulate the entire document , the current document looks like this:

XML/HTML CodeCopy content to clipboard

1. span>>
2. html>
3. head>
4. title>A Tiny HTML Documenttitle>
5. head>
6. body>
7. p>Let's rock the browser, HTML5 style.< ;/p> 
8. body>
9. html>

,

and HTML5 does not require these elements, but this writing style is better.

HTML5 Document Type

XML/HTML CodeCopy content to clipboard

1. /span>>

The first line must be a specific document type declaration, which is used to tell which standard the subsequent document markup follows. HTML5's document type declaration is extremely simple.

Character encoding

Most websites now use UTF-8 encoding, which is concise, fast to convert, and supports any non-English characters you want.

It is very simple to add character encoding information in HTML5. Add the element in

, as follows:

XML/HTML CodeCopy content to clipboard

1. head>
2. meta charset="utf- 8"> 
3. title>A Tiny HTML Documenttitle>
4. head>

The Dreamweaver design tool automatically adds this metainformation when creating a new web page and also saves the file in UTF encoding. If you are using the simplest text editor, remember to select the correct encoding (UTF-8) when saving.

Page Language

It is a good practice to indicate the natural language used in web pages. To specify a language for content, use the lang attribute on any element.

To add language description to the entire page, you need to specify the lang attribute for the element, as shown in the following code:

XML/HTML CodeCopy content to clipboard

1. html lang="zh-CN"> 

This information detail is also useful for screen readers if the page contains text in multiple languages.

Add style sheet

As long as it is a professionally designed website, it will definitely use style sheets. When specifying the CSS style sheet to be used, you need to add the element in

, as follows:

XML/HTML CodeCopy content to clipboard

1. head>
2. meta charset="utf- 8"> 
3. title>A Tiny HTML Documenttitle>
4. link rel="stylesheet" href="TinyHTML5.css">
5. head>

Add JavaScript

Adding JavaScript in HTML5 is similar to adding it to a traditional page, for example:

XML/HTML CodeCopy content to clipboard

1. head>
2. meta charset="utf- 8"> 
3. title>A Tiny HTML Documenttitle>
4. link rel="stylesheet" href="TinyHTML5.css">
5. script src="TinyHTML5. js">script>
6. head>

There is no need to add the language="JavaScript" attribute. The browser assumes you want to use JavaScript.

Special Note:

If you want to spend a lot of time testing pages containing JavaScript in IE, you should also add a special comment called Web mark (saved from url=). This line of comment should be placed after the specified character encoding element, as follows :

XML/HTML CodeCopy content to clipboard

1. head>
2. meta charset="utf- 8"> 
4. title>A Tiny HTML Documenttitle>

This comment tells IE to treat the page as downloaded from the remote website. Otherwise, IE will switch to a special lock mode and pop up a security warning after you click "Allow blocked content" The JavaScript code will not be executed until after the button is pressed.

(0014) refers to the length of the about:internet string.

Final result

A complete and beautiful HTML5 code finally looks like this:

XML/HTML CodeCopy content to clipboard

1. /span>>
2. html lang="zh- CN"> 
3. head>
4. meta charset="utf- 8"> 
6. title>A Tiny HTML Documenttitle>
7. link rel="stylesheet" href="TinyHTML5.css">
8. script src="TinyHTML5. js">script>
9. head>
11. body>
12. p>Let's rock the browser, HTML5 style.< ;/p> 
13. body>
14. html>