HTML5 Fast Learning A

Attention to HTML5 for some time, has not been systematic to learn.

For the understanding of HTML5, before staying in some new tags, some API can accomplish some of the things that JS accomplishes, that's all.

The previous period of time HTML5 finalized, read some of this report, carried on the systematic study, HTML5 can do far more than you think.

It's time to start learning.

This series of contents mainly refer to "HTML5 Advanced Program Design" and W3school.

This article is the first article in the series: HTML5 First Glimpse.

article outline

• Overview
• HTML5 History & Design Concept
• HTML5 New Features Quick preview
• Summarize

Overview

With the gradual popularization of the future of desktop mobility, the technology architecture used by mobile devices and desktop devices will inevitably converge, and HTML5 is the only cross-platform language for the main platforms of PC, Mac, IPhone, IPad, Android, Windows Phone, etc. It's time to build a new web App with Html5+css3+js.

As a next-generation Web language, HTML5 is no longer just a markup language, it provides a new framework and platform for next-generation Web, including plug-in audio video, image animation, local storage, and more cool features that make the Web easy to implement native experience.

HTML5 History & Design Concept

HTML5 history

I have summed up the history of HTML5 three sentences, the details are interested in their own inspection, I will not say more.

The 1993 HTML was first published in the form of an Internet draft, from the 2.0,3.2,4.0 to the 1999 version 4.01, which began to stagnate after 4.01, with the control of the HTML specification.

A group of people founded the Whatwa (WEB Hypertext Application Technology Working Group) in 2004, and they created the HTML5 specification, while developing new features for Web applications. (Web 2.0 was invented by this time)

In 2006, the HTML5 re-intervened in HTML, and in 2008 published a draft of the work, which was formally finalized last month.

HTML5 Design Concept

1. Compatibility

Support existing documents and maintain a smooth transition.

For example, Google analyzed millions of pages, analyzing the generic ID name of the div tag, and found that there was a large number of repetitions, many developers like to use Div id= "header" to mark the header area. HTML5 then directly defines a

2. Practicality (efficiency and user preference)

HTML5 specification is based on user priority guidelines, the purpose of which is "user first", which means that when encountering an unresolved conflict, the specification will put the user first, followed by the page author, again is the realization (browser), the final consideration of the pure theory.

3. Simplify the complex

The following improvements are mainly made:

Replace complex JS code with browser-native capability;

New simplification of the DOCTYPE;

A new simplified character set declaration;

Simple and powerful HTML5 API;

4. Universal access

This principle consists of three concepts.

Accessibility: HTML5 and Wai (Web accessibility Initiative) and aria (Accessible Rich Internet applications) are tightly coupled for people with disabilities, A screen reader-based element in Wai-aria has 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: for example, the new <ruby> element supports Ruby annotations that are used in East Asian page layouts.

Note

<ruby> Definition and Usage:

<ruby> tags define ruby annotations (Chinese phonetic notation or characters).

Used in East Asia, the pronunciation of East Asian characters is displayed.

Use with <ruby> and <rt> tags:

A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.

HTML5 new features Quick previewNew DOCTYPE and character sets

The DOCTYPE of Web pages has been greatly simplified according to the HTML5 design guidelines mentioned above.

HTML4 DOCTYPE

<! DOCTYPE HTML Public "-//W3C//DTD HTML 4. transitional//en" "http://www.w3.org/TR/ html4/loose.dtd "> <! DOCTYPE >

Who can remember?

Please look at HTML5 DOCTYPE

<! DOCTYPE html>

Like DOCTYPE, the declaration of a character set is simplified.

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

It's now.

<meta Charset=utf-8 "/>

new elements and old elements

HTML5 tag elements are divided into 7 categories depending on the content type:

inline

Add other types of content like documents, such as audio, video, canvas, 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 button and textarea

Meta data

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

Fragment

Elements used to define fragments in a document, such as article, aside, and title

Semantic Markup

HTML5 new Fragment class element introduction

Header

Mark the contents of the head 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

A piece of area in a Web page

Article

Independent article content

Aside

Related content or citations

Nav

Navigation class Auxiliary content

The following is a label position

using the selectors API to simplify the selection operation

In addition to the semantic elements, HTML5 introduces a shortcut for finding page DOM elements.

HTML5 to find the elements before the JS example:

Function: getElementById ()

Example: <div id= "foo" > getElementById ("foo")

HTML5 has a new selectors API that allows you to specify the elements you want to get in a more precise way, without having to iterate through the standard DOM. It works like a selection rule used in CSS. Example:

function 1:queryselector ()

Description: Returns the first matching element found on a page, based on a specified selection rule

Example: Queryselector ("Input.error")

Result: Returns a text selection box with the first CSS class named "Error"

------------

function 2:queryselectorall ()

Description: Returns all matching elements in the page according to the specified rule

Example: Queryselectorall ("#results TD")

Result: Returns all cells under an element with an ID value of results

Note

1. You can specify multiple rules for the Selector API function at the same time, for example

Select the first element in a document named Highclass or Lowclass

var x= document.queryselector (". Highclass", ". Lowclass");

2. The selectors API is more than just a convenience, while traversing the DOM,

The selectors API is usually faster than the previous traversal search, and the browser is highly optimized for selector matching.

window. JSON

JSON is a subset of the JS syntax that represents the data as an object literal.

Because of its simple syntax and inherent compatibility in JS programming, JSON becomes the de facto standard for internal data exchange in HTML5 applications.

A typical JSON API consists of two functions, Parse () and stringify (), which are used to serialize a string into a DOM object and convert the DOM object to a string.

If the old browser uses JSON, the JS library is required.

In JS, the efficiency of parsing and serialization is often not high, so in order to improve execution speed, the new browser natively extended the support of JSON, you can directly through the JS to call JSON.

Summary

This paper first introduces some important features of HTML5, the history and design idea of HTML.

Finally, a quick preview of the new features of the HTML5 is made.

Take time to learn HTML5!

All right, here we go today.

Welcome everyone to comment, let the next article better:)

HTML5 Fast Learning A