Simply organize the basic features and syntax of HTML5_html5 tutorial skills

HTML5 Overview HTML5 is the next major version of the HTML standard, replacing HTML 4.01, XHTML 1.0 and XHTML 1.1. HTML5 is also a standard for structuring and presenting content on the World Wide Web.

HTML5 is the product of cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Technology Working Group (WHATWG).

This new standard adds features such as video playback and drag-and-drop, which in the past relied on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight and Google Gears.

Browser support The latest version of Apple Safari, Mozilla FireFox and Opera support most HTML5 features, and IE9 also supports some HTML5 features.

Mobile browsers pre-installed on iPhones, iPads and Android phones all have good support for HTML5.

New Features HTML5 introduces many new elements and attributes to help us build modern websites. Here are the main features introduced by HTML5:

New semantic elements: such as , and .

Forms 2.0: Improvements to HTML web forms, introducing some new attributes for the tag.

Persistent local storage: In order not to be implemented through third-party plug-ins.

WebSocket: The next generation of two-way communication technology for web applications.

Server push events: HTML5 introduces events from the web server to the web browser, also known as server push events (SSE).

Canvas: Supports programmatic 2D drawing using JavaScript.

Audio and Video: Embed audio or video in web pages without resorting to third-party plug-ins.

Geolocation: Users can choose to share their geographical location with our web pages.

Microdata: Allows us to create custom vocabularies outside of HTML5 and extend web pages with custom semantics.

Drag and drop: Drag and drop items on the same web page from one location to another.

Backwards Compatibility HTML5 is designed to be as backwards compatible with existing browsers as possible. New features build on existing features and allow us to provide fallback content for older browsers.

It is recommended to use a small amount of JavaScript code to detect support for individual HTML5 features.

HTML5 syntax

HTML5 has "its own" HTML syntax that is compatible with HTML 4 and XHTML1 documents already published on the web, but is not compatible with the more complex SGML features in HTML 4.

HTML5 does not have the syntax rules in XHTML that require lowercase tag names, quote attributes, attributes must have a value, and all empty elements must be closed.

But HTML5 is more flexible and supports the following forms:

Capitalize tag names. Double quotes for attributes are optional. Attribute value is optional. Closing empty elements is optional. DOCTYPE In old versions of HTML, DOCTYPE is very long because the HTML language is based on SGML and needs to reference a DTD.

HTML5 authors can use a simple syntax to specify a DOCTYPE of the form:

XML/HTML Code Copy content to clipboard > The above syntax is not case sensitive.

Character Encoding HTML5 authors can specify the character encoding using a simple syntax as follows:

XML/HTML Code Copy content to clipboard meta charset = "UTF-8" > The above syntax is not case sensitive.

tag A common approach is to add a type attribute with a value of "text/javascript" to the script element, as shown below:

XML/HTML Code Copy content to clipboard script type = "text/javascript" src = "scriptfile.js" > script > HTML5 removes the extra information required and we can use a simple syntax like this:

XML/HTML Code Copy content to clipboard script src = "scriptfile.js" > script > tag So far we have written like this:

XML/HTML Code Copy content to clipboard link rel = "stylesheet" type = "text/css" href = "stylefile.css" > HTML5 removes the extra information required and we can use a simple syntax like this:

XML/HTML Code Copy content to clipboard link rel = "stylesheet" href = "stylefile.css" > HTML5 element HTML5 element is marked with start and end tags. Tags are qualified using the tag name between angle brackets.

The difference between the start tag and the end tag is that the latter tag name contains a slash before it.

Here is an example of an HTML5 element:

XML/HTML Code Copy content to clipboard p > ... p > HTML5 tag names are not case-sensitive and can be all uppercase or a mixture of them, although the most common convention is to always use lowercase.

Most elements contain some content, for example ...

contains a paragraph. However, some elements cannot contain any content and are called whitespace elements. For example, br, hr, link and meta, etc.

HTML5 documentation In order to get a better structure, the following tags are introduced:

section: This tag represents a general document or application section. It can be used with h1-h6 to represent document structure.

article: This tag represents a separate chunk of document content, such as a blog entry or newspaper article.

aside: This tag represents a block of content that is slightly related to the rest of the page.

header: This tag represents the header of a section.

footer: This tag represents the footnote of a section, which can contain author, copyright and other information.

nav: This tag represents the sections used to navigate the document.

dialog: This tag can be used to mark conversations.

figure: This tag can be used to associate titles with certain embedded content, such as charts and videos. The markup of an HTML5 document looks like this:

XML/HTML Code Copy content to clipboard > html > head > meta charset = "utf- 8" > title > ... title > head > body > header > ... header > nav > ... nav > article > section > … section > article > aside > ... aside > footer > ... footer > body >