Simple HTML5 introductory tutorial

Time:2021-11-25

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

HTML5 is the next generation of HTML.
HTML5 will become a new standard for HTML, XHTML and HTML DOM. The goal is to replace the existing html4.01 and XHTML 1.0 standards. It hopes to reduce the dependence of Internet rich applications (RIA) on flash, Silverlight, JavaFX, etc
And provide more APIs that can effectively enhance network applications.
The last version of HTML was born in 1999. Since then, the web world has undergone great changes.
HTML5 is still improving. However, most modern browsers already have some HTML5 support.
HTML5 is the result of the cooperation between W3C and whatwg.
Whatwg focuses on web forms and applications, while W3C focuses on XHTML 2.0. In 2006, the two sides decided to cooperate 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 tags to replace scripts
HTML5 should be device independent
The development process should be transparent to the public

The simplest HTML5 document

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <title>A Tiny HTML Document</title>  
  3. <p>Let’s rock the browser, HTML5 style.</p>  

An ultra simple HTML5 document that contains only one line of text. Its effect in the browser is as follows:

The more common structure is divided into blocks with < head > and < body >, which separates the information of the page from the actual content of the page, and encapsulates the whole document with < HTML >

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.   <title>A Tiny HTML Document</title>  
  5. </head>  
  6. <body>  
  7.   <p>Let’s rock the browser, HTML5 style.</p>  
  8. </body>  
  9. </html>  

<html>, < head > and < body > HTML5 do not require these elements, but this writing style is better.

HTML5 document type

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  

The first line must be a specific document type declaration that tells subsequent document tags which standard to follow. HTML5’s document type declaration is extremely simple.

Character encoding

Now most websites use UTF-8 coding, which is simple, fast conversion, and supports any non English characters you want.

It is easy to add character encoding information in HTML5. Add < meta > elements in < head >, as follows:

XML/HTML CodeCopy contents to clipboard
  1. <head>  
  2.   <meta charset=“utf-8”>  
  3.   <title>A Tiny HTML Document</title>  
  4. </head>  

Dreamweaver design tool will automatically add this meta information when creating a new web page, and will also save the file in UTF encoding format. If you use the simplest text editor, remember to select the correct encoding (UTF-8) when saving.

Page language

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

Adding a language description to the entire page is to specify the lang attribute for the < HTML > element, as shown in the following code:

XML/HTML CodeCopy contents to clipboard
  1. <html lang=“zh-CN”>  

If the page contains text in multiple languages, this information detail is also useful for screen readers.

Add style sheet

As long as it is a specially designed professional website, style sheets will be used. When specifying the CSS style sheet to be used, you need to add the < link > element in < head >, as follows:

XML/HTML CodeCopy contents to clipboard
  1. <head>  
  2.   <meta charset=“utf-8”>  
  3.   <title>A Tiny HTML Document</title>  
  4.   <link rel=“stylesheet” href=“TinyHTML5.css”>  
  5. </head>  

Add JavaScript

Adding JavaScript to HTML5 is similar to adding JavaScript to traditional pages, for example:

XML/HTML CodeCopy contents to clipboard
  1. <head>  
  2.   <meta charset=“utf-8”>  
  3.   <title>A Tiny HTML Document</title>  
  4.   <link rel=“stylesheet” href=“TinyHTML5.css”>  
  5.   <script src=“TinyHTML5.js”></script>  
  6. </head>  

It is not necessary to add the language = “JavaScript” attribute. The browser assumes that you want to use JavaScript.

Special attention:

If you want to spend a lot of time testing pages containing JavaScript in ie, you should also add a special comment called web flag (saved from url =), which should be placed after the specified character encoding element, as follows:

XML/HTML CodeCopy contents to clipboard
  1. <head>  
  2.   <meta charset=“utf-8”>  
  3.   <!– saved from url=(0014)about:internet –>  
  4.   <title>A Tiny HTML Document</title>  

This note tells ie to treat the page as downloaded from a remote website. Otherwise, ie will switch to a special locking mode and pop up a security warning. JavaScript code will not be executed until you click the “allow blocked content” button.

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

final result

A complete and beautiful HTML5 code is finally as follows:

XML/HTML CodeCopy contents to clipboard
  1. <!doctype html>  
  2. <html lang=“zh-CN”>  
  3. <head>  
  4.   <meta charset=“utf-8”>  
  5.   <!– saved from url=(0014)about:internet –>  
  6.   <title>A Tiny HTML Document</title>  
  7.   <link rel=“stylesheet” href=“TinyHTML5.css”>  
  8.   <script src=“TinyHTML5.js”></script>  
  9. </head>  
  10.   
  11. <body>  
  12.   <p>Let’s rock the browser, HTML5 style.</p>  
  13. </body>  
  14. </html>  

Recommended Today

Seven solutions for distributed transactions

1、 What is distributed transaction Distributed transaction means that transaction participants, transaction supporting servers, resource servers and transaction managers are located on different nodes of different distributed systems. A large operation is completed by more than n small operations. These small operations are distributed on different services. For these operations, either all of them are […]