Um novo rascunho HTML 5 (Working Draft) foi lançado em 10 de junho. O editor leu brevemente a documentação da nova versão fornecida por ele e fez algumas anotações: 
O rascunho do HTML 5 não se torna um padrão oficial
A publicação como um rascunho de trabalho não implica o endosso dos membros do W3C.
A publicação como um "Rascunho" não implica endosso (apoio) por parte dos membros do W3C.
A especificação HTML 5 não será considerada concluída antes que haja pelo menos duas implementações completas da especificação.
A especificação HTML 5 não será finalizada até que pelo menos dois softwares a tenham implementado.
O XHTML 1 foi lançado em 1999. Demorou dois ou três anos até que fosse totalmente suportado, e só recentemente, quase dez anos depois, é que foi totalmente promovido. Portanto, levará algum tempo até que o HTML 5 seja suportado (especialmente por navegadores "não convencionais"). De acordo com o cronograma do Grupo de Trabalho HTML do W3C, não haverá finalização formal até 2010.
O XHTML 1 foi lançado em 1999. Demorou dois ou três anos até que fosse totalmente suportado, e só recentemente, quase dez anos depois, é que foi totalmente promovido. Portanto, levará algum tempo até que o HTML 5 seja suportado (especialmente por navegadores "não convencionais"). De acordo com o cronograma do Grupo de Trabalho HTML do W3C, não haverá finalização formal até 2010.
Uma declaração DOCTYPE surpreendentemente simples
É simples assim, ha. Além disso, não há distinção entre maiúsculas e minúsculas. Vale ressaltar que a especificação exige que se este DOCTYPE for declarado, possa ser utilizada a chamada "sintaxe HTML 'customizada' (sintaxe HTML customizada, não sei por que é chamada assim)", que é o anterior tipo que não requer tags HTML fechadas. Ao mesmo tempo, ainda permite sintaxe de formato XML como XHTML, de modo que o DOCTYPE do documento xml precisa ser declarado em vez do acima.
Compatibilidade futura
A especificação HTML 5 não possui elementos "obsoletos". A razão é que, por um lado, exige que os designers não experimentem certos elementos, mas, por outro lado, exige que os navegadores suportem esses elementos. Neste caso, na minha intuição, pretende-se suportar todas as páginas web anteriores escritas em HTML ou XHTML. Isto é uma bênção para os designers. Finalmente, eles não precisam mais ficar restritos à sintaxe estrita do XHTML.
elemento excluído
Claro, esses elementos são relativos ao HTML 4, mas também pode ser visto que o HTML 5 não é uma simples regressão ao HTML 4. Ele ainda adere a alguns espíritos importantes do XHTML, como elementos de apresentação de interface pura devem ser abandonados, enquanto usando CSS, etc.
Os seguintes elementos são descartados "porque seu efeito é puramente de apresentação e, portanto, melhor tratado por CSS" porque são elementos puramente de apresentação e devem ser substituídos por CSS:
basefont/big/center/font/s/strike/tt/u
|
Os seguintes elementos foram descartados "porque seu uso afetou negativamente a usabilidade e acessibilidade para o usuário final":
| quadro/conjunto de quadros/noframes |
Os seguintes elementos foram descartados “porque não foram usados com frequência, criaram confusão ou podem ser manipulados por outros elementos”:
| acrônimo/applet/isindex/dir |
Documento de teste HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento de teste HTML</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<corpo>
<h1>Documento de teste HTML</h1>
<ul>
<li>Versão: 1.1</li>
<li>DTD: transição XHTML 1.0</li>
<li>Codificação: UTF-8</li>
<li>Atualizado: 12/06/2008</li>
</ul>
<hr />
<h1><h1> representa o título número um</h1>
<h2><h2> representa o título número dois</h2>
<h3><h3> representa o título três</h3>
<h4><h4> representa o título número quatro</h4>
<h5><h5> representa o título nº 5</h5>
<h6><h6> representa o título nº 6</h6>
<p>Este parágrafo está entre <p>. <p> representa um parágrafo e é o formato de fluxo de texto mais comumente usado. Podemos usar várias tags de texto embutidas em fluxos de texto. Os mais comumente usados são:
<strong> <strong>Agravado</strong>,
<em><em>
<ins><ins>
<del><del>
<sub><sub>
<sup><sup>
<cite><cite> citar</cite>, <big><big>aumentar</big>, <small><small>reduzir</small>. </p>
<pre> Este é um fluxo de texto contido em <pre>.
Os espaços, tabulações, retornos de carro, etc. nele contidos podem ser exibidos diretamente na página da web e não serão agrupados automaticamente pelo navegador. Você pode usá-lo para exibir o código do programa.
O padrão pré-formatado é usar uma fonte de largura fixa. </pré>
<p>Também podemos usar essas tags in-line para exibir trechos de código no fluxo de texto:
<código><código>código</code>,
<kbd><kbd>Entrada do teclado</kbd>,
<var><var>Variável</var>,
<samp><samp>exemplo de exemplo</samp>.
</p>
<p>Além disso, duas tags também são importantes:</p>
<ul>
<li><abbr>: Por exemplo, <abbr title="Mister">Sr.</abbr> é a abreviatura de Senhor. Mas esta tag parece ser inválida no IE. </li>
<li><acronym><acronym title=""></acronym>: Por exemplo, <acronym title="Hyper Text Markup Language">HTML</acronym> é o acrônimo para Hyper Text Markup Language (o chinês também pode be Use esta tag, como: "<acronym title="República Popular da China">China</acronym>" é a abreviatura de "República Popular da China"). </li>
</ul>
<blockquote cite="#">
Este parágrafo é <blockquote>. Lembre-se de usar o atributo cite em <blockquote>.
</blockquote>
<endereço>
Esta seção é contida por <endereço>, que pode ser usado para exibir um endereço de e-mail ou um endereço real. Observe que é um elemento em nível de bloco, mas não possui margem ou preenchimento por padrão.
</endereço>
A seção <div> está contida em <div>. é um elemento de nível de bloco e não possui nenhum estilo por padrão. Outro elemento com status equivalente é <span><span>inline field</span>, que também não possui estilo por padrão. <br />
Há um <br> antes desta frase, que é usado para quebras de linha dentro do parágrafo. </div> <hr />
<p>A linha horizontal acima é a tag <hr> </p>
<p><a id="a"></a>Esta frase é precedida por uma tag âncora implementada pela tag <a> </p>
<p><a href="http:///"><a>Também significa link</a>. Observe que ele possui quatro pseudoclasses: :link é <a href="http:///">link não visitado</a>, :visited é <a href="#">link visitado</a>, : pairar é <a href="http:///">link quando o mouse passa</a>, :active<a href="http:///">link quando o clique do mouse é ativado</a> . </p>
<p><img width="100" height="100" alt="<img> tag" /> A imagem é inline por padrão, mas também podemos defini-la como bloco. E defina uma classe .inline especificamente para img <img width="100" height="30" alt="img.inline" class="inline" />. Além disso, o estilo de <img> no link é diferente <a href="#"><img width="60" height="60" alt="<img>" em <a> </a>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
Há também uma tag <object> para inserir mídia e uma tag <param> </p>
<hr />
<ul>
<li>A camada externa da lista não ordenada é<ul></li>
<li>Cada item da lista consiste em <li></li>
<li>Observe que a tag <ul> só pode conter diretamente a tag <li>
<ul>
<li>Esta é uma lista aninhada de segundo nível e deve ser colocada em um <li></li>
<li>Observe que os estilos dos itens da lista de segundo nível aninhados podem ser diferentes daqueles da lista de primeiro nível
<ul>
<li>Este é o terceiro nível e seu estilo é diferente do segundo nível</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>A camada externa da lista ordenada é <ol></li>
<li>Cada item da lista consiste em <li></li>
<li>Observe que a tag <ol> só pode conter diretamente a tag <li>
<ol>
<li>Esta é uma lista aninhada de segundo nível e deve ser colocada em um <li></li>
<li>Observe que os estilos dos itens da lista de segundo nível aninhados podem ser diferentes daqueles da lista de primeiro nível
<ol>
<li>Este é o terceiro nível e seu estilo é diferente do segundo nível</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>Esta linha é<dt></dt>
A linha <dd> é <dd>. A lista de definições externas é <dl>. </dd>
<dt>Nota<dt>só pode conter elementos de nível in-line</dt>
<dd>E <dd> pode conter elementos embutidos ou em nível de bloco</dd>
</dl> <hr />
<p>Modelo de tabela padrão. A largura da coluna é controlada por <colgroup> </p>
<tabela>
<legenda>
Esta é <legenda>
</caption>
<colgrupo>
<col largura="30%" />
<col largura="50%" />
<col largura="20%" />
</colgroup>
<thead>
<tr>
<th>Esta linha é<thead></th>
<th><thead> pode ser usado com <th>
<th>Aqui usamos <th></th>
</tr>
</thead>
<pé>
<tr>
<td>A última linha é <tfoot></td>
<td><tfoot>Não importa onde seja colocado, sempre será exibido no final</td>
<td></td>
</tr>
</tfoot>
<corpo>
<tr>
<td>As três linhas a seguir são<tbody>
<td>Você pode colocar qualquer número de<tr></td>
<td>O que é usado aqui é<td></td>
</tr>
<tr>
<td>Use <col> para representar colunas</td>
<td>A célula mais à direita desta linha é uma célula vazia da tabela sem conteúdo</td>
<td></td>
</tr>
<tr>
<td>Use <tr> para representar linhas</td>
<td>A célula mais à direita da linha tem um&nbsp;</td>
<td> </td>
</tr>
</tbody>
</tabela>
<hr />
<form action="">
<p>Os rótulos<form> não podem conter vários rótulos de controle diretamente. Você pode usar <label><label></label> para conter componentes de formulário,</p>.
<conjunto de campos>
<legend>Você também pode usar as tags <fieldset> </legenda>
<p>Para o método de definição CSS da tag de entrada: use o valor do atributo type como o nome da classe, para que diferentes controles de entrada possam ser distinguidos. </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield caixa de texto de linha única" />
<input type="text" class="text" size="20" id="text_d" value="Caixa de texto de linha única do campo de texto desabilitada" desabilitada="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="senha caixa de senha" />
<input type="password" class="text" size="20" id="password_d" value="Caixa de senha desativada" desabilitada="disabled" />
<label for="senha"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="enviar botão de envio" />
<input type="submit" class="submit" id="submit_d" value="Botão de envio desativado" disabled="disabled" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="redefinir botão de reinicialização" />
<input type="reset" class="button" id="reset_d" value="Botão de reinicialização desabilitado" desabilitado="disabled" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="button" class="button" id="button" value="botão botão comum" />
<input type="button" class="button" id="button_d" value="Botão desativado botão normal" desativado="desativado" />
<label for="button"> input.button </label>
</p>
<p>
<input type="image" class="image" size="20" id="image" />
<label for="image"> input.image </label>
</p>
<p>
<input type="image" class="image" size="20" id="image_d" desativado="disabled" />
<label for="image_d"> input.image desativado</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1"checked="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>input.radio</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d"checked="checked" disabled="disabled" />
<input name="radio" type="radio" class="radio" id="radio2_d" desativado="disabled" />
<label> input.radio desabilitado </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" verificado="marcado" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d"checked="checked" desativado="disabled" />
<input type="checkbox" class="checkbox" id="checkbox2_d" desativado="disabled" />
<label for="checkbox_d"> input.checkbox desabilitado </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="seletor de arquivo seletor de arquivo" />
<label for="arquivo"> arquivo de entrada </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="seletor de arquivo seletor de arquivo" desativado="disabled" />
<label for="file_d"> input.file desabilitado </label>
</p>
<p>
<button><img /><tag de botão</button>
<button disabled="disabled"><img />Tag<button> desativada</button>
</p>
<p>
<label for="textarea"><textarea>O padrão é o alinhamento inferior</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">caixa de texto textarea multilinhas.
Também é semelhante a um pré-formato internamente e pode exibir todos os retornos de carro e caracteres de tabulação</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" disabled="disabled">Caixa de texto multilinha de área de texto desativada</textarea>
</p>
<p>
<selecione nome="textarea">
<option>seletor suspenso seletor suspenso</option>
<optgroup label="Este é o primeiro grupo">
<option>As opções podem ser agrupadas usando <optgroup></option>
<option>E especifique o nome do grupo pelo seu atributo label</option>
</optgroup>
<optgroup label="Este é o segundo grupo">
<option>O nome do grupo é apenas um texto de prompt, não uma opção</option>
</optgroup>
</selecionar>
<select multiple="multiple" name="textarea">
<option>Quando o atributo de tamanho de <select> for maior que 1 ou o atributo múltiplo for especificado</option>
<option>Será uma caixa de seleção multilinha como esta</option>
</selecionar>
<select name="textarea" desabilitado="desabilitado">
<option>Caixa suspensa desativada</option>
<option>Será uma caixa de seleção multilinha como esta</option>
</selecionar>
</p>
</fieldset>
</form> </body>
</html>
|
