HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 235717
  • Created:
  • Creator: vigia122
  • Is current revision? Não
  • コメント 22 words added, 20 words removed

Revision Content

O HTML5 é a última evolução no padrão que define o HTML. Enquanto a  especificação do HTML5 (en) não está finalizada e ainda está sujeita a mudanças, a Mozilla e outros fornecedores de navegadores começaram a impementar algumas partes disto. Os artigos aqui vinculados descrevem partes do HTML5 que já são suportadas pela motor Gecko da Mozilla, usado pelo Firefox e muitos outros produtos (en).

(Aqui está uma outra classificação dos artigos de HTML5 (en).)

Introdução ao HTML5

Introdução ao HTML5
Este artigo introduz como usar o HTML5 em seu web design ou aplicação web.

Elementos do HTML5

Usando áudio e vídeo {{ gecko_minversion_inline("1.9.2") }}
O Firefox 3.5 adicionou supporte para os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} do HTML5.
Forms no HTML5 {{ gecko_minversion_inline("2.0") }}
Uma visão das melhoras aos formulários web em HTML5: a restrição de validação da API, muitos novos atributos, novos valores para o atributo {{ HTMLElement("input") }}, {{ htmlattrxref("type", "input") }} e o novo elemento {{ HTMLElement("output") }}.
Sections and outlines in HTML5 {{ gecko_minversion_inline("2.0") }}
Uma visão dos novos elementos de delineação e seccionamento do HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} e {{ HTMLElement("hgroup") }}.
O elemento {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}
O elemento mark é usado para destacar textos de relevância especial.
Os elementos {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}
Estes elementos permitem adicionar figuras e ilustrações, com uma eventual legenda, fracamente acoplada ao texto principal.

Suporte ao Canvas

Drawing Graphics with Canvas {{ gecko_minversion_inline("1.8.1") }}
Aprendendo sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
HTML5 text API for <canvas> elements {{ gecko_minversion_inline("1.9.1") }}
A API de texto do HTML5 é agora suportada pelos elementos {{ HTMLElement("canvas") }}.

Características de aplicações web

Recursos offline no Firefox {{ gecko_minversion_inline("1.9.1") }}
O Firefox suporta totalmente a especificação de recursos offline do HTML5.
Eventos online e offline {{ gecko_minversion_inline("1.9") }}
O Firefox 3 suporta eventos WHATWG online e offline, o que permite às aplicações e extensões detectarem quando há uma conexão com a internet ou não, assim como detectar quando a conexão cai ou volta.
Sessão WHATWG do lado do cliente e armazenamento persistente (aka Armazenamento DOM) {{ gecko_minversion_inline("1.8.1") }}
A sessão do lado do cliente e o armazenamento contínuo, permitem às aplicações web, armazenar dados estruturados no lado do cliente.
Usando arquivos de aplicações web {{ gecko_minversion_inline("1.9.2") }}
Foi adicionado ao Gecko o suporte à nova API File do HTML5, possibilitando às aplicações web acessarem arquivos locais selecionados pelo usuário. Isto inclui o suporte à seleção de múltiplos arquivos usando o elemento {{ HTMLElement("input") }} do type file do novo atributo multiple do HTML.

Características do DOM

getElementsByClassName {{ fx_minversion_inline("3") }}
Os métodos getElementsByClassName são suportados nos nós Documento e Elemento. Estes métodos permitem encontrar elementos com uma classe dada ou com uma lista de classes dadas.
Arrastar e soltar {{ fx_minversion_inline("3") }}
A API de arrastar e soltar (drag and drop) do HTML5 permite o suporte para itens arrastáveis dentro e entre web sites. É também fornecido uma API simples para o uso de extensões e aplicações baseadas na Mozilla.
Foco na gestão de HTML {{ fx_minversion_inline("3") }}
Os novos atributos activeElement e hasFocus do HTML5 são suportados.
Manipuladores de protocolo web {{ fx_minversion_inline("3") }}
Você pode registrar aplicações web como manipuladores de protocolos usando o método navigator.registerProtocolHandler().

Analisador HTML (HTML parser)

O analisador complacente de HTML5 do Gecko — o qual transforma os bytes de um documento HTML em um DOM — foi habilitado por padrão desde maio de 2010. (Observe que a versão do analisador HTML5 lançado com o Gecko 1.9.2 / Firefox 3.6 tem muitos bugs e não é recomendada para uso atualmente.) {{ fx_minversion_inline("4") }}

Mudanças adicionais

  • localName e namespaceURI em documentos HTML agora funciona como em documentos XML: localName retorna em minúsculas e namespaceURI para elementos HTML é "http://www.w3.org/1999/xhtml" {{ fx_minversion_inline("3") }}
  • Quando o identificador de fragmento do documento da página URI (a parte depois do caractere "#" (hash)) muda, um novo eveno hashchange é enviado para a página. Veja window.onhashchange para mais informações. {{ fx_minversion_inline("3") }}
  • Suporte a element.classList para permitir ligar facilmente do atributo de classe. {{ fx_minversion_inline("3") }}
  • O evento de prontidão do documento document.onreadystatechange {{ fx_minversion_inline("4") }} e a propriedade document.readyState {{ fx_minversion_inline("3") }} são suportados.
  • Cores em atributos de apresentação são interpretados de acordo com o HTML5. {{ fx_minversion_inline("4") }}

Tecnologias regularmente chamadas como parte do HTML5, que não são

Veja também

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5"} ) }}

Revision Source

<p>O HTML5 é a última evolução no padrão que define o HTML. Enquanto a  <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">especificação do HTML5</a> (en) não está finalizada e ainda está sujeita a mudanças, a Mozilla e outros fornecedores de navegadores começaram a impementar algumas partes disto. Os artigos aqui vinculados descrevem partes do HTML5 que já são suportadas pela motor <a href="/pt/Gecko" title="pt/Gecko">Gecko</a> da Mozilla, usado pelo <a class="external" href="http://www.mozilla.com/pt-BR/firefox/" title="http://www.mozilla.com/pt-BR/firefox/">Firefox</a> e <a href="/En/List_of_Mozilla-Based_Applications" title="En/List of Mozilla-Based Applications">muitos outros produtos</a> (en).</p>
<p>(Aqui está uma <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">outra classificação dos artigos de HTML5</a> (en).)</p>
<h2>Introdução ao HTML5</h2>
<dl> <dt><a href="/pt/HTML/HTML5/Introdução_ao_HTML5" title="pt/HTML/HTML5/Introdução ao HTML5"><strong>Introdução ao HTML5<br> </strong></a></dt> <dd>Este artigo introduz como usar o HTML5 em seu web design ou aplicação web.</dd>
</dl>
<h2>Elementos do HTML5</h2>
<dl> <dt><a href="/Pt/Usando_áudio_e_vídeo_no_Firefox" title="Pt/Usando áudio e vídeo no Firefox">Usando áudio e vídeo</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>O Firefox 3.5 adicionou supporte para os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} do HTML5.</dd> <dt><a href="/pt/HTML/HTML5/Forms_no_HTML5" title="pt/HTML/HTML5/Forms no HTML5">Forms no HTML5</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>Uma visão das melhoras aos formulários web em HTML5: a restrição de validação da API, muitos novos atributos, novos valores para o atributo {{ HTMLElement("input") }}, {{ htmlattrxref("type", "input") }} e o novo elemento {{ HTMLElement("output") }}.</dd> <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>Uma visão dos novos elementos de delineação e seccionamento do HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} e {{ HTMLElement("hgroup") }}.</dd> <dt>O elemento {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt> <dd>O elemento <code>mark</code> é usado para destacar textos de relevância especial.</dd> <dt>Os elementos {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}</dt> <dd>Estes elementos permitem adicionar figuras e ilustrações, com uma eventual legenda, fracamente acoplada ao texto principal.</dd>
</dl>
<h3>Suporte ao Canvas</h3>
<dl> <dt><a href="/en/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>Aprendendo sobre o novo elemento <code>{{ HTMLElement("canvas") }}</code> e como desenhar gráficos e outros objetos no Firefox.</dd> <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">HTML5 text API for <code>&lt;canvas&gt;</code> elements</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>A API de texto do HTML5 é agora suportada pelos elementos {{ HTMLElement("canvas") }}.</dd>
</dl>
<h2>Características de aplicações web</h2>
<dl> <dt><a href="/Pt/Recursos_offline_no_Firefox" title="Pt/Recursos offline no Firefox">Recursos offline no Firefox</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>O Firefox suporta totalmente a especificação de recursos <em>offline</em> do HTML5.</dd> <dt><a href="/pt/Eventos_online_e_offline" title="pt/Eventos online e offline">Eventos online e offline</a> {{ gecko_minversion_inline("1.9") }}</dt> <dd>O Firefox 3 suporta eventos WHATWG <em>online</em> e <em>offline</em>, o que permite às aplicações e extensões detectarem quando há uma conexão com a internet ou não, assim como detectar quando a conexão cai ou volta.</dd> <dt><a href="/en/DOM/Storage" title="en/DOM/Storage"><span id="result_box" lang="pt"><span class="hps">Sessão WHATWG</span> <span class="hps">do lado do cliente</span> <span class="hps">e</span> <span class="hps">armazenamento persistente</span></span> (aka Armazenamento DOM)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>A sessão do lado do cliente e o armazenamento contínuo, permitem às aplicações web, armazenar dados estruturados no lado do cliente.</dd> <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications"><span class="short_text" id="result_box" lang="pt"><span class="hps">Usando arquivos</span> <span class="hps">de</span> <span class="hps">aplicações web</span></span></a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Foi adicionado ao Gecko o suporte à nova API File do HTML5, possibilitando às aplicações web acessarem arquivos locais selecionados pelo usuário. Isto inclui o suporte à seleção de múltiplos arquivos usando o elemento <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> do <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: Courier New;">file</span> do novo atributo <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> do HTML.</dd>
</dl>
<h2>Características do DOM</h2>
<dl> <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline("3") }}</dt> <dd>Os métodos getElementsByClassName são suportados nos nós Documento e Elemento. Estes métodos permitem encontrar elementos com uma classe dada ou com uma lista de classes dadas.</dd> <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastar e soltar</a> {{ fx_minversion_inline("3") }}</dt> <dd>A API de arrastar e soltar (drag and drop) do HTML5 permite o suporte para itens arrastáveis dentro e entre web sites. É também fornecido uma API simples para o uso de extensões e aplicações baseadas na Mozilla.</dd> <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML"><span class="short_text" id="result_box" lang="pt"><span class="hps">Foco</span> <span class="hps">na</span> <span class="hps">gestão de</span> <span class="hps">HTML</span></span></a> {{ fx_minversion_inline("3") }}</dt> <dd>Os novos atributos <code>activeElement</code> e <code>hasFocus</code> do HTML5 são suportados.</dd> <dt><a href="/pt/Manipuladores_de_protocolo_web" title="pt/Manipuladores de protocolo web">Manipuladores de protocolo web</a> {{ fx_minversion_inline("3") }}</dt> <dd>Você pode registrar aplicações web como manipuladores de protocolos usando o método <code>navigator.registerProtocolHandler()</code>.</dd>
</dl>
<h2>Analisador HTML (HTML parser)</h2>
<p>O analisador complacente de HTML5 do Gecko — o qual transforma os bytes de um documento HTML em um DOM — foi habilitado por padrão desde maio de 2010. (Observe que a versão do analisador HTML5 lançado com o Gecko 1.9.2 / Firefox 3.6 tem muitos bugs e não é recomendada para uso atualmente.) {{ fx_minversion_inline("4") }}</p>
<h2>Mudanças adicionais</h2>
<ul> <li><code>localName</code> e <code>namespaceURI</code> em documentos HTML agora funciona como em documentos XML: <code>localName</code> retorna em minúsculas e <code>namespaceURI</code> para elementos HTML é <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" target="_blank" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code>{{ fx_minversion_inline("3") }}</li> <li>Quando o identificador de fragmento do documento da página URI (a parte depois do caractere "#" (hash)) muda, um novo eveno <code>hashchange</code> é enviado para a página. Veja <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para mais informações. {{ fx_minversion_inline("3") }}</li> <li>Suporte a <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> para permitir ligar facilmente do atributo de classe. {{ fx_minversion_inline("3") }}</li> <li>O evento de prontidão do documento <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline("4") }} e a propriedade <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline("3") }} são suportados.</li> <li>Cores em atributos de apresentação são interpretados de acordo com o HTML5. {{ fx_minversion_inline("4") }}</li>
</ul>
<h2>Tecnologias regularmente chamadas como parte do HTML5, que não são</h2>
<ul> <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li> <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> <li><a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> <li>CSS3</li> <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> <li>Web Sockets</li> <li>Faster JavaScript</li>
</ul>
<h2>Veja também</h2>
<ul> <li><a href="/pt/Firefox_4_para_desenvolvedores" rel="internal" title="pt/Firefox 4 para desenvolvedores">Firefox 4 para desenvolvedores<br> </a></li> <li><a href="/pt/Firefox_3.6_para_desenvolvedores" title="pt/Firefox 3.6 para desenvolvedores">Firefox 3.6 para desenvolvedores<br> </a></li> <li><a href="/Pt/Firefox_3.5_para_desenvolvedores" title="pt/Firefox 3.5 para desenvolvedores">Firefox 3.5 para desenvolvedores</a></li> <li><a href="/pt/Firefox_3_para_desenvolvedores" title="pt/Firefox 3 para desenvolvedores">Firefox 3 para desenvolvedores</a></li> <li><a href="/pt/Firefox_2_para_desenvolvedores" title="pt/Firefox 2 para desenvolvedores">Firefox 2 para desenvolvedores</a></li> <li><a href="/pt/Firefox_1.5_para_Desenvolvedores" title="pt/Firefox 1.5 para desenvolvedores">Firefox 1.5 para desenvolvedores<br> </a></li>
</ul>
<div class="noinclude"> <p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5"} ) }}</p>
</div>
Revert to this revision