HTML5

Posted 2020-07-30 One Place

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.