html .next()_HTML6提示或HTML.next

html .next()

HTML6 notion, despite the fact that the HTML5 specification was planned to fully adopt and achieve the broadest possible compatibility in 2014, now began to appear ideas about how this specification of the next generation looks like – HTML.next, as it routinely referred to in the W3C-consortium.

尽管计划在2014年完全采用HTML5规范并实现最大范围的兼容性，但HTML6的概念现在开始浮出水面，人们逐渐想到了有关下一代规范的外观-HTML.next，正如它通常在W3C联盟。

语义学的新要素 (New elements of semantics)

<d？compress> (<d?compress>)

This element is proposed for the integration of files from a ZIP-archive (ZIP format as the main, however others are possible too) directly into a web page. Advantages of this approach: web-browser access to files from ZIP, reduction of requirements for bandwidth (which is especially important for mobile platforms).

建议将该元素用于将ZIP存档(ZIP格式为主要格式，但也可以其他格式)中的文件直接集成到网页中。 这种方法的优点：Web浏览器从ZIP访问文件，减少带宽需求(这对于移动平台尤为重要)。

Example of use:

使用示例：

<decompress href="http://example.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/family.jpg">

<decompress href="http://example.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/family.jpg">

描述标题和作者的语义 (Semantics to describe titles and authors)

It is used to identify the names of books, blog posts, movies, and so on to its associated authors even if the layout applies only for a few paragraphs. This semantics may be implemented as a pseudo-markings and define the relationships between the elements.

即使布局仅适用于少数几个段落，它也可用于为其相关的作者标识书籍，博客文章，电影等的名称。 该语义可以实现为伪标记并定义元素之间的关系。

  [title: The praise of Shadow id:praise by:junichiro]
  is a book written by [author: Junichiro Tanizaki id:junichiro]
  explaining … etc.

  [title: The praise of Shadow id:praise by:junichiro]
  is a book written by [author: Junichiro Tanizaki id:junichiro]
  explaining … etc.

<阳离子> (<l?cation>)

This element (similar to <time />) is used to describe geo-information. It is proposed to use the attributes: lat, long, altitude:

该元素(类似于<time />)用于描述地理信息。 建议使用以下属性：纬度，经度，海拔高度：

<location lat=27.9 long=-71.3 altitude=-100>The Bermuda Triangle</location>

<location lat=27.9 long=-71.3 altitude=-100>The Bermuda Triangle</location>

<t？aser> (<t?aser>)

The element is designed to wrap the content block having a link to a complete block. Such structures we can see everywhere: in the search results on the first page of the blog, resume block with (or without) media resources and so on. In general, it should be a sectional element that can be located in other sectional elements, such as navigation page:

该元素被设计为包装具有链接到完整块的内容块。 我们可以在任何地方看到这样的结构：在博客第一页的搜索结果中，带有(或不带有)媒体资源的简历块等等。 通常，它应该是一个分区元素，可以位于其他分区元素中，例如导航页面：

<nav>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/myFirstPost.html">My First Post</a></h1>
    </header>
    <p>This is my first article on the page, and it's really cool.</p>
    <footer>
      <time>3 Days Ago</time>
      <div><a href="http://www.example.com/myFirstPost.html">http://www.example.com/myFirstPost.html</a></div>
    </footer>
  </teaser>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/mySecondPost.html">My Second Post</a></h1>
    </header>
    <p>This article is on superconducting fields, and is even cooler than my first article.</p>
    <footer>
      <time>1 Days Ago</time>
      <div>
        <a href="http://www.example.com/mySecondPost.html">http://www.example.com/mySecondPost.html</a>
      </div>
    </footer>
   </teaser>
</nav>

<nav>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/myFirstPost.html">My First Post</a></h1>
    </header>
    <p>This is my first article on the page, and it's really cool.</p>
    <footer>
      <time>3 Days Ago</time>
      <div><a href="http://www.example.com/myFirstPost.html">http://www.example.com/myFirstPost.html</a></div>
    </footer>
  </teaser>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/mySecondPost.html">My Second Post</a></h1>
    </header>
    <p>This article is on superconducting fields, and is even cooler than my first article.</p>
    <footer>
      <time>1 Days Ago</time>
      <div>
        <a href="http://www.example.com/mySecondPost.html">http://www.example.com/mySecondPost.html</a>
      </div>
    </footer>
   </teaser>
</nav>

The advantages of using this element:

使用此元素的优点：

• description of the general frequently used structures in HTML
  HTML中常用的常用结构的描述
• helps to optimize search engines and management components, because different widgets can use this structure in different ways
  有助于优化搜索引擎和管理组件，因为不同的小部件可以以不同的方式使用此结构
• it is not necessary to participate in the mechanism of lists numbering
  没有必要参与列表编号的机制
• can be used in conjunction with anchors to create fast ToC
  可以与锚点结合使用以创建快速的ToC
• works well in HTML5 blogs, apparently, taken as a basis for separation of content
  在HTML5博客中，效果很好，显然是作为内容分离的基础

形式 (Forms)

用大写字母自动输入形式的输入 (Automatic writing in input-forms with capital letters)

The semantic description of the type of data to be recorded in the field. This attribute allows the browser to provide the user with a better interface for text entry.

对要在现场记录的数据类型的语义描述。 此属性允许浏览器为用户提供更好的文本输入界面。

  <form>
    Name: <input name="name" autocapitalize="words">
    State: <input name="state" autocapitalize="characters">
  </form>

  <form>
    Name: <input name="name" autocapitalize="words">
    State: <input name="state" autocapitalize="characters">
  </form>

The tag autocapitalize="words" means that each new word is written with a capital letter. This is actual for fields where you need to specify names, eg. “John Doe”. The tag autocapitalize="characters" means that each character will be written with a capital letter. That is actual for abbreviations.

标签autocapitalize =“ words”表示每个新单词都以大写字母书写。 这对于需要指定名称的字段是实际的，例如。 “约翰·杜伊”。 标签autocapitalize =“ characters”表示每个字符将以大写字母书写。 这是缩写的实际情况。

改进的表单身份验证 (Improved forms authentication)

Today, most browsers have heuristics that determine that the page has a form of authentication, password change, and so on. Often these heuristic algorithms does not always work correctly. Adding annotations to forms and fields allows browsers to more accurately handle scenarios and improve communication.

如今，大多数浏览器都具有启发式的功能，可以确定页面具有某种形式的身份验证，密码更改等。 这些启发式算法通常并不总是能正常工作。 在表单和字段中添加注释可以使浏览器更准确地处理场景并改善交流。

控件本地化 (Localization of controls)

Web developers often have a lack of ability to localize the controls, such as: the button «Browse» to fields <input type=’file’ />, controls for setting the date/time

Web开发人员通常缺乏对控件进行本地化的能力，例如：将按钮“ Browse”浏览到字段<input type ='file'/>，用于设置日期/时间的控件

多媒体 (Multimedia)

自适应图像 (Adaptive images)

HTML6 provides possibility to download images of different sizes, depending on the current settings on the client side.

HTML6允许下载不同大小的图像，具体取决于客户端的当前设置。

自适应流 (Adaptive streaming)

There is a number of different adaptive streaming formats (as well as have a number of different progressive media formats for downloading content). In many cases, through streaming we need to transfer some protected content. The current HTML5 media elements support a choice of different formats. Nevertheless, there are certain aspects of adaptive streaming and protected content that require improvements in HTML capabilities for general use. In particular, they include:

有多种不同的自适应流格式(以及用于下载内容的多种不同的渐进媒体格式)。 在许多情况下，我们需要通过流传输来传输一些受保护的内容。 当前HTML5媒体元素支持多种不同的格式。 但是，自适应流和受保护内容的某些方面需要改进HTML功能以供一般使用。 特别是，它们包括：

• additional media element for status, that allows you to display the current status (eg. synchronization of data with the server)
  状态的附加媒体元素，使您可以显示当前状态(例如，与服务器同步数据)
• additional media element for errors (eg. transmission error)
  错误的附加媒体元素(例如，传输错误)
• additional media element for events (eg. change bitrate of a stream)
  事件的其他媒体元素(例如，更改流的比特率)
• additional media item for properties (eg. the current bit rate, which may be associated with other indicators QoS)
  属性的其他媒体项(例如，当前比特率，可能与其他指示符QoS相关联)

音频平衡 (Audio balance)

Adjusting audio balance (right / left channel) with HTML5 for stereo tracks.

使用HTML5调整立体声轨道的音频平衡(左右声道)。

改善影片播放 (Improving video playback)

• fast / slow motion / fast forwarding
  快/慢/快进
• previous / next frame
  上一/下一帧

全屏模式和屏幕截图 (Fullscreen mode and screenshots)

Here is example of how we can handle with fullscreen and obtaining of screenshotes:

这是我们如何全屏处理并获取屏幕截图的示例：

domElement.fullScreen();
domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);

domElement.fullScreen();
domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);

文字编辑 (Text editing)

元素<edit？r> (Element <edit?r>)

This element allows to save the typed text.

此元素允许保存键入的文本。

<t？xtarea type =“所见即所得”> (<t?xtarea type=”wysiwyg”>)

The main objective: WYSIWYG-editor for structured (semantic) text. Intended use: blogs, emails, editing articles of CMS sites, and so on. Estimated list of supported elements:

主要目标：用于结构化(语义)文本的WYSIWYG编辑器。 预期用途：博客，电子邮件，CMS网站的编辑文章等。 支持的元素的估计列表：

• blocks: p, ul/li, ol/li, dl/dt/dd, blockquote, pre

  块 ：p，ul / li，ol / li，dl / dt / dd，blockquote，pre

• spans: strong/em/a/sup/sub/u/code/strike

  跨度 ：强/ em / a / sup / sub / u /代码/ strike

• inline-blocks: img, br

  内联块 ：img，br

• tables: table/tr/th/td
  表格：table / tr / th / td

Features:

特征：

• support copy / paste images from / to the system clipboard (connected by attribute)
  支持将图像从/复制/粘贴到系统剪贴板(按属性连接)
• support copy / paste text and HTML from/in the system clipboard (connected by attribute)
  支持从剪贴板中复制/粘贴文本和HTML(按属性连接)
• should not support inline styles
  不应该支持内联样式
• may have an attribute content-style=«style.css», specifies the style of elements within the editor
  可能具有content-style =«style.css»属性，用于指定编辑器中元素的样式

复制/粘贴功能 (Features of copy / paste)

The list presented on the left side of the table will be rendered as shown in the right part of the table.

表格左侧显示的列表将呈现为表格右侧所示。

<ol> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>sit</li> <li>et cetera</li> </ol>

Lorem Ipsum Dolor sit etc

< ol > < li > Lorem </ li > < li > Ipsum </ li > < li > Dolor </ li > < li > sit </ li > < li > et cetera </ li > </ ol >

洛雷姆 益普森 多洛 坐 等等

If you copy the item ‘Dolor’ and insert it into an ordinary WYSIWYG text editor, instead of a simple recording without the need to get the item number “3. Dolor”.

如果复制项目“ Dolor”并将其插入普通的WYSIWYG文本编辑器中，而不是简单的记录，而无需获取项目号“ 3。 Dolor”。

组件和ECMAScript (Components and ECMAScript)

DOM元素的“行为”或动态子类 («behaviors» or dynamic subclasses of DOM elements)

This function is very useful for the user interface component frameworks and tools

此功能对于用户界面组件框架和工具非常有用

document.behaviors["ul.some>li"] = { // the behavior class:
  attached: function() {...},
  detached: function() {...},
  onmousedown: function() {...},
  onclick: function() {...},
  ...
};

document.behaviors["ul.some>li"] = { // the behavior class:
  attached: function() {...},
  detached: function() {...},
  onmousedown: function() {...},
  onclick: function() {...},
  ...
};

«behaviors» is a set of methods that are assigned to all elements that match the selector in the declaration. When an element receives an event, it invokes the associated function. Likewise proposed to work with CSS. This behavior is similar to the “chain” of events in jQuery.

“行为”是一组方法，这些方法分配给与声明中的选择器匹配的所有元素。 元素接收事件时，将调用关联的函数。 同样建议与CSS一起使用。 这种行为类似于jQuery中事件的“链”。

include('url'); (include(‘url’);)

For many programmers who are used to write in C ++, PHP, etc, did not quite have enough of such a possibility. To preserve modularity are encouraged to use the connection of external files as follows (works similarly to @import url(…) in CSS):

对于许多习惯于使用C ++，PHP等进行编写的程序员而言，这种可能性还远远不够。 为了保持模块化，鼓励使用外部文件的连接，如下所示(与CSS中的@import url(…)相似)：

window.include("url"[,mime/type])

window.include("url"[,mime/type])

JavaScript：名称空间和类 (JavaScript: namespace and classes)

JavaScript-code is becoming more and more complex. On the same page can be used several different libraries and the lack of namespaces (and classes) is becoming increasingly troublesome for web developers.

JavaScript代码变得越来越复杂。 在同一页面上可以使用几个不同的库，并且缺少名称空间(和类)对于Web开发人员来说正变得越来越麻烦。

项目<c？de>的语法突出显示 (Syntax highlighting for items <c?de>)

Given the fact that browsers already have the instruments of parsing HTML, JS and CSS, it would be nice to have the native support for syntax highlighting without having to parse the code on the client side with Javascript. For a start it would be enough all listed above languages, others can be added by connecting the appropriate CSS.

鉴于浏览器已经具有解析HTML，JS和CSS的工具，因此拥有对语法高亮的本机支持而不必在客户端使用Javascript解析代码的做法将是不错的选择。 首先，上面列出的所有语言就足够了，可以通过连接适当CSS添加其他语言。

翻译自: https://www.script-tutorials.com/html-next-or-ideas-for-html6/

html .next()