HTML5入门总结 HTML5API

w3cshools  MDN英文  MDN中文

HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

• It is a new version of the language HTML, with new elements, attributes, and behaviors,
• and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.

• Semantics(语义化): allowing you to describe more precisely what your content is.
• Connectivity(连通性): allowing you to communicate with the server in new and innovative ways.
• Offline and storage(离线&存储): allowing webpages to store data on the client-side locally and operate offline more efficiently.
• Multimedia(多媒体): making video and audio first-class citizens in the Open Web.
• 2D/3D graphics  and effects(2D 3D绘图和效果): allowing a much more diverse range of presentation options.
• Performance and integration(性能 集合): providing greater speed optimization and better usage of computer hardware.
• Device access(设备访问): allowing for the usage of various input and output devices.
• Styling(样式设计): letting authors write more sophisticated themes.

SEMANTICS(语义化)

Sections and outlines in HTML5

A look at the new outlining and sectioning elements in HTML5: <section>, <article>,<nav>, <header>, <footer> and <aside>.

Using HTML5 audio and video

The <audio> and <video> elements embed and allow the manipulation of new multimedia content.

Forms in HTML5

A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the <input> attribute type and the new <output>element.

New semantic elements()

语义化的元素 Beside sections, media and forms elements, there are numerous new elements, like<mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter>and <main>, increasing the amount of valid HTML5 elements.

Improvement in <iframe>

Using the sandbox, seamless, and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.

MathML

Allows directly embedding mathematical formulas.

数学标记语言（Mathematical Markup Language，MathML），是一种基于XML的标准，用来描述数学符号和公式。它的目标是把数学公式集成到万维网和其他文档中。从2015年开始，MathML成为了HTML5的一部分和ISO标准。

HTML5-compliant parser

The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.

CONNECTIVITY(连通性)

Web Sockets

Allows creating a permanent connection(持久连接) between the page and the server and to exchange non-HTML data through that means.

Server-sent events

Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.(传统的请求/相应)

服务器端产生的数据变化不能及时地通知浏览器，而是需要等到下次请求发出时才能被浏览器获取。对于某些对数据实时性要求很高的应用来说，这种延迟是不能接受的。为了满足这类应用的需求，就需要有某种方式能够从服务器端推送数据给浏览器，以保证服务器端的数据变化可以在第一时间通知客户。

WebRTC

This technology, where RTC stands for Real-Time Communication(实时通信), allows connecting to other people and controlling videoconferencing directly in the browser, without(不需要插件或扩展) the need for a plugin or an external application.

支持在浏览器客户端之间语音/视频交流和数据分享的技术

 

OFFLINE & STORAGE(离线&存储)

Offline resources: The application cache

Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.

Online and offline events

Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.

WHATWG client-side session and persistent storage (aka DOM storage)

Client-side session and persistent storage allows web applications to store structured data on the client side.

IndexedDB

IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.

Using files from web applications

Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <input> of type file HTML element's new multipleattribute. There also is FileReader.

MULTIMEDIA(多媒体)

Using HTML5 audio and video

The <audio> and <video> elements embed and allow the manipulation of new multimedia content.

WebRTC

This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.

Using the Camera API

Allows using, manipulating, and storing an image from the computer's camera.允许使用，操作计算机摄像头，并从中存储图像

Track and WebVTT

The <track> element allows subtitles and chapters.(字幕和章节) WebVTT is a text track format.

 WebVTT is a format(一种格式) for displaying timed text tracks (e.g. subtitles or captions) with the <track> element. The primary purpose of WebVTT files is to add text overlays to a <video>. WebVTT is a text based format, which must be encoded in UTF-8 format. Where you can use spaces you can also use tabs.

3D GRAPHICS AND EFFECTS(3D, 图像 & 效果)

Canvas tutorial

Learn about the new <canvas> element and how to draw graphs and other objects in Firefox.

HTML5 Text API for <canvas> elements

The HTML5 text API is now supported by <canvas> elements.

WebGL

WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

WebGL是一项利用JavaScript API渲染交互式3D电脑图形和2D图形的技术，可兼容任何的网页浏览器，无需加装插件

SVG

An XML-based format of vectorial images that can directly be embedded(嵌入) in the HTML.

PERFORMANCE AND INTEGRATION

Web Workers

Allows delegation of JavaScript evaluation to background threads(后台的线程), allowing these activities to prevent slowing down interactive events.

能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest level 2

Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.

JIT-compiling JavaScript engines

The new generation of JavaScript engines is much more powerful, leading to greater performance.

新一代的 JavaScript 引擎功能更强大，性能更杰出

History API

Allows the manipulation of the browser history(浏览器的历史). This is especially useful for pages loading interactively new information.

The contentEditable Attribute: Transform your website to a wiki!

HTML5 has standardized the contentEditable attribute. Learn more about this feature.

在HTML5中,任何元素都是可编辑的. 这项特性在很久以前就已经被提出,不过直到现在才被WHATWG (Web Hypertext Application Technology Working Group，缩写：WHATWG当前HTML标准)组织标准化.

通过一些javascript事件处理函数,你可以把自己的网页转换成完整快速的富文本编辑器.

只要将HTML元素的contenteditable 属性值设置 true, 几乎所有的元素都可以激活编辑模式

Drag and drop

The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.

Focus management in HTML

The new HTML5 activeElement and hasFocus attributes are supported.

Web-based protocol handlers

You can now register web applications as protocol handlers using thenavigator.registerProtocolHandler() method.

requestAnimationFrame

Allows control of animations rendering to obtain optimal performance.

允许控制动画渲染以获得更优性能

Fullscreen API

Controls the usage of the whole screen(全屏) for a Web page or application, without the browser UI displayed.

Pointer Lock API

Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.

应用程序在指针到达窗口限制时也不会失去焦点

Online and offline events

In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.

DEVICE ACCESS(设备访问)

Using the Camera API

Allows using, manipulating, and storing an image from the computer's camera.

Touch events

Handlers to react to events created by a user pressing touch screens.(对触屏事件的反应)

Using geolocation

Let browsers locate the position of the user(定位用户的位置) using geolocation.

Detecting device orientation

Get the information when the device on which the browser runs changes orientation.(横屏或竖屏) This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).

Pointer Lock API

Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.

STYLING

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

New background styling features

It is now possible to put a shadow to a box, using box-shadow and multiple backgroundscan be set.

More fancy borders

Not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radiusproperty.

Animating your style

Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.

Typography improvement

Authors have better control to reach better typography. They can control text-overflowand hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new @font-face at-rule.

New presentational layouts

In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layouts and CSS flexible box layout.

HTML5API

web storage

Before HTML5, application data had to be stored in cookies, included in every server request(每次请求都会发送). Local storage is more secure, and large amounts of data can be stored locally(本地存储), without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Local storage is per origin (per domain and protocol). All pages, from one origin(一个“域”下面的网页), can store and access the same data.

HTML Local Storage Objects

HTML本地存储提供了两个对象：window.localStorage和window.sessionStorage（两个都是“本地存储”）

HTML local storage provides two objects for storing data on the client:

• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session(一次会话). The data is deleted when the user closes the specific browser tab.

本地存储的方法 

我们主要用到的

length：本地存储数据的个数
setItem(key,value)：向key字段写入value数据
getItem(key)：获取key字段的数据
removeItem(key)：移除key字段
clear()：清空该域下的所有数据
key(i)：获取第i个数据的key

我们还可以像操作一个Object一样操作localStorage

本地存储只能存字符串数据，所有数据在写入的时候会被隐式调用toString方法转为字符串

HTML5 Application Cache

 With application cache it is easy to make an offline version(离线版本) of a web application, by creating a cache manifest file. (mainfest // 清单)

应用缓存：缓存应用本身的文件

To enable application cache, include the manifest attribute in the document's <html> 

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection(离线也可以使用).

Application cache gives an application three advantages:

1. Offline browsing - users can use the application when they're offline
2. Speed - cached resources load faster
3. Reduced server load - the browser will only download updated/changed resources from the server

The Manifest File

The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).

The manifest file has three sections:

• CACHE MANIFEST - Files listed under this header will be cached(缓存) after they are downloaded for the first time
• NETWORK - Files listed under this header require a connection to the server, and will never be cached(不缓存)
• FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

Web Socket

HTTP协议是一种无状态协议，服务器端本身不具有识别客户端的能力，必须借助外部机制，比如session和cookie，才能与特定客户端保持对话。

socket  // 本意为：插座 把…装入插座; 给…配插座;

WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. 

In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.

在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

The WebSocket Protocol is an independent TCP-based protocol. Its only relationship to HTTP is that its handshake(握手) is interpreted by HTTP servers as an Upgrade request(“升级”版的request). 

The WebSocket protocol makes more interaction between a browser and a web server possible, facilitating the real-time data transfer from and to the server

socket.io

Socket.IO 是一个面向实时 web 应用的 JavaScript 库。它使得服务器和客户端之间实时双向的通信成为可能。他有两个部分：在浏览器中运行的客户端库，和一个面向Node.js的服务端库。两者有着几乎一样的API。像Node.js一样，它也是事件驱动的.

不管是服务器还是客户端，socket.io提供两个核心方法：emit方法用于发送消息，on方法用于监听对方发送的消息。