HTML5 Programming Notes (i)

HTML5 Overview

1. HTML5 history

1993 HTML was first published in the form of an Internet draft.

In the 1990s, HTML developed significantly, from version 2.0 to version 3.2 and 4.0. Finally to the 4.01 edition of 1999.

With the development of HTML, the system has mastered the control over the HTML specification.

After a quick release of four versions, the Web Standard focus began to shift to XML and XHTML while the industry was already dead for HTML. HTML is placed in a secondary location.

Committed to elevating the Web platform to a new height, a small group of people set up WHATWG in 2004, they created the HTML5 specification, and started to turn to new features for Web application development. and invented the Web 2.0 term.

2006, the Internet re-access HTML, published in 2008 HTML5 work draft.

The XHTML2 Working Group ceased work in 2009.

2010, because HTML5 can solve very practical problems, so in the specification for the final, the major browser manufacturers have been unable to withstand, began to upgrade their products to support HTML5 new features. In this way, thanks to the experimental feedback from the browser, the HTML5 specification has been continuously perfected, and HTML5 is quickly incorporated into the substantive improvements to the Web platform.

2. About the myth of the 2022

About HTML5 release key points of time:

2012, the target released the candidate recommendation version.

2022, the target release plan recommended edition.

　　

3. Who is developing HTML5

WHATWG: Made up of people from Apple, Mozilla, Google, opera and other browser makers. Established in 2004. WHATWG develops HTML and Web application APIs, while providing developer collaboration for song browser vendors and other interested organizations.

The HTML Working group under W3C:W3C is currently responsible for publishing the HTML5 specification.

IETF (Internet Engineering Task Force, Internet Tasks Group): This task group is responsible for the Internet protocol such as HTTP and other teams. A new API (WebSocket API) defined by HTML5 relies on the new WebSocket protocol, which is being developed by the Iete workgroup.

4. New understanding

Compatibility

Practicability

Interoperability

Universal accessibility

　　4.1 Compatibility and presence is reasonable

In fact, one of the core concepts of HTML5 is to maintain a smooth transition of a new feature.

HTML5 researchers have spent a lot of time studying general behavior. For example, Google analyzed the page of hundreds of kings, from which the generic ID name of the div tag was analyzed, and the repetition was found to be large. For example, many developers use div id= "header" to mark the header area. In turn, add

Although some features of the HTML5 standard are very revolutionary, HTML5 is designed to evolve rather than to revolution.

　　4.2 Efficiency and User priority

HTML5 specification is based on user priority guidelines written, its purpose is "user first", means that in the encounter can not resolve the conflict, the specification will put the user first, followed by the page author, again is the implementation (browser), then the rule-makers (W3C/WHATWG), the final consideration of the purity of the theory.

The following example can be identified in HTML5:

Id= "PROHTML5"

Id=prohtml5

Id= "PROHTML5"

Here is not to justify the strict syntax, only care about a bottom line, that is, the end user does not really care about the code to write. PS: It is not recommended that beginners write code that is not rigorous at first. After all, the victim is the end user, and if the page fault is not displayed properly due to the developer's cause, the end user will be tortured.

HTML5 also derives XHTML5 (valid HTML5 code can be generated through XML tools). HTML and XHTML Two versions of code that are serialized should produce nearly the same DOM tree. It is clear that XHTML has a much stricter validation rule. The following two lines of code in the example just now cannot be validated.

1. Design of safety mechanism

HTML5 is safe enough. A new source-based security model is introduced. This model is not only easy to use, but also common to a variety of different APIs. There is no need to use any so-called smart, creative but insecure hack to cross-domain security conversations.

2. Separation of performance and content

The HTML5 specification already does not support most of the performance features of older versions of HTML. But thanks to the previously mentioned HTML5 compatibility design concept, which features are still available. Clear separation of performance and content is more important, or there will be the following drawbacks:

Poor accessibility

Unnecessary complexity (all style codes are placed on the page with poor code readability)

File size (the more style content, the larger the file), the result is that page loading slows

　　4.3 Simplification of the complex

HTML5 's slogan is "Simplicity is paramount, as simple as possible". Therefore, the following improvements are available:

Replace complex JavaScript code with browser-native capabilities

The new simplified DOCTYPE

New simplified Character Set declaration

Simple and powerful HTML5 API

In addition, the HTML5 specification is more detailed than any forgotten version in order to avoid misunderstanding.

Based on multiple improved and powerful error handling schemes, HTML5 has a good error handling mechanism. HTML5 advocates a smooth recovery of major mistakes, once again putting the interests of the end user first. For example, if there is an error in the page, it may have affected the display of the entire page in the past, but HTML5 does not, instead of displaying the "broken" tag in a standard way, thanks to the precisely defined error recovery mechanism in HTML5.

　　4.4 General access

Accessibility: In the consideration of users with disabilities. HTML5 is tightly assembled with WAI and aria, and the screen reader-based elements in Wai-aria have been added to the HTML.

Media neutrality: If possible, HTML5 's functionality should work on all the different devices and platforms.

Support for all languages: input, new <ruby> elements support Ruby annotations that will be used in East Asian page layouts.

5. No plug-in paradigm

In the past, many of the features were implemented only through plugins or complex hack (local drawing APIs, local sockets, etc.), but native support for these features was provided in HTML5.

There are a number of problems with plug-in methods:

Plug-in installation may fail

Plugins can be disabled or blocked (for example, Applie ipad does not support Flash plugins)

The plug-in itself becomes the object being attacked

Plugins are not easy to integrate with other parts of the HTML document (because of plug-in boundaries, clipping, and transparency issues)

Although some plug-ins have high installation rates, they are often blocked in tightly controlled internal network environments. In addition, because plugins often bring annoying ads to users, some users will also choose to block such plugins. This way, once a user disables the plugin, it means that the content that the dependency plugin displays is not displayed.

In a page that has been designed, it is difficult to integrate the plugin display with other elements on the page, as it can cause clipping and transparency to be problematic. Plug-ins use their own rendering model, which is not the same as normal web pages, so it can be particularly troublesome when pop-up menus or other visual elements overlap with plugins. In contrast, HTML5 can control the layout of the page directly using CSS and JavaScript.

　　HTML5 includes: Canvas (2D, 3D), cross-document messaging, geoocation, audio and video, Forms, MathML, microdata, Server-sent Events, Scalable Vector Graphics (SVG), WebSocket APIs and protocols, Web Origin Concept, Web Storage, index database, reference cache (offline Web App), Web Workers, drag-and-drop, XMLHttpRequest Level 2

Www.caniuse.com -Provides detailed support for HTML5 features in accordance with the browser version

www.html5test.com--the site will directly show the user's browser support for the HTML5 specification

modernizr--a JavaScript library that provides very cash-HTML5 and CSS3 detection capabilities, which is the best tool for detecting whether a browser supports certain features

6, the new function of HTML5

6.1 New DOCTYPE and character sets

<! DOCTYPE html>

<meta charset= "Utf-8" >

Using HTML5 's DOCTYPE triggers the browser to display the page in standard compatibility mode.

It is well known that Web pages have multiple display modes, such as quirks, near-standard, and standard modes. The standard mode is also a non-bizarre mode. Depending on the east type, the browser identifies which mode to use and what rules are used to validate the page. In the weird mode, the browser will try not to interrupt the display of the page, even if it is not completely verified by the display. HTML5 introduces new markup elements and other mechanisms, so if you persist with deprecated elements, the page will fail validation.

6.2 New elements and old elements

Content Types for HTML5

Inline: Add other types of content to your document, such as audio, video, and IFRAME

Flow: Elements used in the body of documents and apps, such as form, H1, and small

Title: Paragraph headings, such as H1, H2, and Hgroup

Interaction: Content that interacts with the user, such as audio and video controls, button, textarea, etc.

Metadata: Usually appears in the head of the page, setting the performance and behavior of other parts of the page, such as script, style, title, etc.

Phrases: Text and text markup elements such as Mark, KBD, Sub, and SUP

Fragments: Elements of a user-defined fragment in a document, such as article, aside, title, and so on

All of these types of elements can be styled using CSS.

However, it is important to note that HTML5 removes many markup elements that are inline in style, such as big, center, font, and Basefont, to encourage developers to use CSS

6.3 Semantic Markers

Header: Mark the contents of the header area (for an entire page or an area of the page)

Footer: Mark the contents of the foot area (for an entire page or an area of the page)

Section:web a piece of area in a page

Article: Independent article content

Aside: related content or citations

Nav: Navigation-class-assisted content

All of the above elements can be styled with CSS (the concept of separation of performance and content is respected)