HTML5入門總結 HTML5API

時間 2019-11-26

標籤 html5 html 入門總結 html5api api 欄目 HTML5 简体版

原文原文鏈接

HTML5

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

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.html5

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>.java

Using HTML5 audio and video

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

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.web

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.canvas

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 s ubtitles 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 the navigator.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:

Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
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