Introduction to html5

Author：Eve Cole Update Time：2025-03-06 01:48:01

HTML (Hypertext Markup Language, super -text mark language) was born in the early 1990s. It is used to specify the elements of web pages. Most of these elements are used to describe the content of web pages, such as title, paragraphs, lists, and point to other web pages. Links, etc. HTML5 is the latest version of HTML. Most of its content can be compatible with new and old browsers, and a large number of new features are added. HTML5 also introduces native audio and video playback functions.

You can view the latest specifications of HTML through the following URL:

1) html5: http://www.w3.org/tr/html5//

2) html5.1: http://www.w3.org/tr/html51/

Introduction to html5

HTML5 is actually a series of related technologies used to make modern wealth web content. The most important of which are the core specifications of HTML5, CSS (Cascading Style Sheets, layered style tables) and JavaScript.

1) HTML5 core specification defines elements used to mark the content, and clarify its meaning.

2) CSS is used to control the appearance of the tagged in front of the user.

3) JavaScript is used to manipulate the content of the HTML document and respond to the user's operation.

At the same time, HTML5 introduces native multimedia support and introduces programmable content (Canvas element, which must use JavaScript) and semantic web.

Browser's support for HTML5

Browser functional verification

Whether the function of HTML5 can be used is whether the browser supports. There are many browsers now, and each browser has many versions. As a web developer, it is difficult to completely test whether a certain version of each browser supports a function. Essence However, there is a website http://caniuse.com/ to help you. This website lists the support of each mainstream browser for HTML5 in detail.

Browser use status

If you need to judge whether you need to support a certain browser, or a version of the browser (usually IE), then http://gs.statcounter.com/ Browser use status.

Detect the browser function

If you want to use some new features of some HTML5, but some users' browsers do not support these features, and do not have to worry. You can use Modernizr. It is a small and continuous updated tool. Many HTML5 and related functions support.

The method of use is as follows:

Go to the download page of Modernizr, as follows:

Select the features you want to detect on this page (click on the corresponding features), and click Build after selecting, and you can get:

Then download the results of the build (Modernizr-Custom.js) and add it to your HTML document;

 <head> <meta charset = UTF-8> <Title> Title </Title> <Script SRC = Modernizr-custom.js> </Script> ... </Head>

In this way, after the page is loaded, the Modernizr script can run. It can detect many new features within milliseconds, and then create a JavaScript object named Modernizr, which is stored in this object. By detecting the attributes of this object, you can determine what features the browser supports. For example:

 <body> <p>The verdict is ...<span id=result></span></p> <script> Modernizr.on('flash', function( result ) { if (result) { document.getElementById (Result) .innerhtml = Rejoice! Your Brower has flash.;}); </script> </body>

If your browser supports Flash, the webpage will printed Rejoice! Your Brower Has Flash. For more Modernizr functions, please refer to the documentation of Modernizr.

Basic structure of html documentation

The HTML document is a description of a document. It has a fixed structure, which is divided into many parts, and each part contains one or more elements. Some elements are used to describe the basic information of the document, and some describe the document structure. Below is the structure of a basic HTML document:

 <! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8/> <Title> Your Page Title </Title> </Head> </Body> </html>

The HTML document describes a blank page that determines the outline of the HTML document and the initial environment of the browser.

DOCTYPE element

Doctype elements can be omitted. Most browsers can still display the content of the document correctly, but this performance that relies on the browser is not a good habit. This element tells the browser two things:

1) It is handled by HTML document;

2) The version of the HTML used to mark the content of the document, the writing above indicates that the HTML5 is used.

HTML element

The HTML element is the root element that indicates the beginning of the html part in the document. The default language of LANG attribute specifies the content of the page, such as: EN means English, ES represents Spanish, etc.

Head element

The HEAD element contains the metadata of the document, provides information about the content of the document and the information of the browser, and can also include a reference to the script and external resources (such as the CSS style table).

Body element

The document body contains the content that the visitors can see.

With this basic structure, we can gradually add other elements of HTML later to continuously enrich the document and finally get the page we want.