Uma breve discussão sobre tags novas e abandonadas em HTML5

Os seguintes elementos do HTML 4.01 foram excluídos do HTML5. Embora os navegadores ainda suportem essas tags por motivos de compatibilidade, é recomendado o uso de novas tags alternativas. Paradoxalmente, os navegadores antigos não suportam novas tags o suficiente.

Esses elementos incluem basefont, big, center, font, s, strike, tt, u. Esses elementos são puramente para exibição da página e o conteúdo exibido deve ser preenchido por CSS.

Esses elementos incluem conjunto de quadros, quadro e noframes. HTML5 não oferece suporte a frames, mas apenas a frames iframe, ou use um formato do lado do servidor composto de várias páginas que estejam em conformidade com a página e exclua as três tags acima.

Esses elementos incluem applet, bgsound, blink, marquee e outras tags.

Abolir rb, usar ruby ​​​​para substituir o acrônimo Use abbr para substituir abolition dir Use ul para substituir isindex Use uma combinação de formulário e entrada para substituir listagem Use pre para substituir xmp Use código para substituir abolition nextid Use guias para abolir plaintex Use text/ plian (corpo não formatado) substituição de tipo MIME

No HTML4.01, os divs são amplamente usados ​​em vários ambientes de layout sem uma definição clara. O HTML5 semantiza os divs para SEO, e as tags estruturais recém-adicionadas são as seguintes:

a), o elemento de seção representa um bloco de conteúdo na página, como um capítulo, cabeçalho, rodapé ou outra parte da página. Pode ser usado em combinação com h1, h2... e outros elementos para representar a estrutura do documento. Exemplo: <section>……</section> em HTML5; <div>……</div> em HTML4.

b) O elemento article representa um conteúdo independente da página que não está relacionado ao contexto. Por exemplo, um artigo.

c), o elemento aparte representa informações auxiliares relacionadas ao conteúdo do elemento artigo que não seja o conteúdo do elemento artigo.

d). O elemento header representa um bloco de conteúdo na página ou o título de toda a página.

e) O elemento hgroup representa uma combinação dos títulos da página inteira ou de um bloco de conteúdo da página.

f), o elemento footer representa a nota de rodapé de toda a página ou um bloco de conteúdo da página. Normalmente, incluirá o nome do criador, a data em que foi criado e as informações de contato do criador.

g). O elemento nav representa a parte do link de navegação da página.

h). O elemento figure representa uma parte independente do conteúdo do fluxo, geralmente representando uma unidade independente no conteúdo do fluxo principal do documento. Use o elemento figcaption para adicionar uma legenda a um grupo de elementos de figura. Por exemplo:

 <figure> ​<figcaption>RPC</figcaption> ​<p>A República Popular da China nasceu em 1949</p></figure>

Escrita comum em HTML4

 <dl> ​<h1>prc</h1> ​<p>A República Popular da China nasceu em 1949</p> ​</dl>

Resultados em execução:

2.1.

Representa um valor dentro de um intervalo específico, que pode ser usado para salários, quantidades, porcentagens, etc. max representa o valor máximo, min representa o valor mínimo e value representa o valor atual.

 <metro max=100 min=0 valor=60 estilo=largura: 300px;></metro>

Você pode usar js para controlá-lo de 0 a 100.

tempo. Representa um valor de tempo O atributo datetime enfatiza o horário da conferência: <time>2015-10-6</time>.

 <hora>6/10/2015</hora>

Começamos as aulas todas as manhãs às <time>8h30</time>. Tenho um encontro no <time datetime=2017-02-14>Dia dos Namorados</time>.

Como esta tag é uma tag semântica, ela não tem nenhum efeito especial quando visualizada em um navegador. É basicamente o mesmo efeito que se a tag não estivesse definida.

Usado para representar uma barra de progresso

 <h3>progresso</h3><progress value=75 max=100></progress>

max: valor máximo, valor na conclusão

valor: valor atual

Esta tag define uma lista de dados opcionais. Usado em conjunto com o elemento input, você pode criar uma lista suspensa de valores de entrada.

Quando combinado com a entrada, tanto a seleção quanto a entrada podem ser concluídas.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=Estados Unidos></option> <option value=Japão></option></datalist >

É utilizado principalmente para apresentar visualmente ao usuário o texto que precisa ser destacado ou destacado. As palavras-chave de pesquisa são destacadas nos resultados típicos de pesquisa de aplicativos. HTML5<mark></mark>;HTML4 <span></span>.

Defina comentários em Ruby (pinyin ou caracteres chineses). Usado com as tags <ruby> e <rt>. O elemento ruby ​​consiste em um ou mais caracteres (exigindo uma explicação/pronúncia), um elemento rt que fornece essa informação e um elemento rp opcional que define o conteúdo a ser exibido quando o navegador não suporta o elemento ruby.

Define a interpretação ou pronúncia de um caractere (fonético ou caractere fonético chinês).

Usado em comentários Ruby para definir o que é exibido por navegadores que não suportam elementos Ruby.

Representa uma quebra de linha suave. A diferença com o elemento br: o elemento br indica que uma quebra de linha deve ser feita aqui; wbr indica que quando a janela do navegador ou o elemento pai for largo (quando não há necessidade de quebra de linha), a linha não será; quebrado, mas quando a largura não for suficiente, a linha será automaticamente quebrada aqui.

Defina gráficos, como gráficos e outras imagens. O elemento <canvas> é apenas um contêiner gráfico (canvas), e você deve usar scripts para desenhar gráficos.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); ;ctx.fillRect(0, 0, 80, 100);</script>

Representa um botão de comando, como um botão de opção, uma caixa de seleção ou um botão. O elemento de comando só será visível se estiver dentro de um elemento de menu. Caso contrário, este elemento não será exibido, mas poderá ser usado para especificar atalhos de teclado.

 <menu> ​<command onclick=alert('Hello World')> ​Clique em mim!</command> ​</menu>

Usado para descrever detalhes de um documento ou parte de um documento. Pode ser usado em conjunto com a tag de resumo, que pode definir títulos para detalhes. O título fica visível e quando o usuário clica nele, os detalhes são exibidos. resumo deve ser o primeiro elemento filho de detalhes.

Defina uma lista de opções. Use este elemento em conjunto com o elemento input para definir os valores possíveis da entrada. O datalist e suas opções não são exibidos, é apenas uma lista de valores de entrada válidos. Use o atributo list do elemento input para vincular o datalist.

Defina diferentes tipos de saída, como saída de script.

 <form action=form_action.asp method=get name=sumform> ​<output name=sum></output> ​</form>

Definir lista de menu. Use este rótulo quando quiser listar controles de formulário. Observe que a diferença do menu de navegação é usado especificamente para controles de formulário.

Se você precisar reproduzir áudio e vídeo na página, os métodos que usamos com frequência são:

a)、incorporar

 <incorporar src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' permitirFullScreen='true' qualidade='alta' largura='480' altura='400' alinhar=' meio'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b) Usar flash player

Como alguns plug-ins de terceiros, flowplayer602

Os componentes multimídia HTML5 referem-se a componentes de vídeo (vídeo) e componentes de áudio (áudio). Os componentes multimídia HTML5 podem incorporar componentes multimídia diretamente em suas páginas da web sem a ajuda de plug-ins de terceiros, como o Flash Player. A nova capacidade dos navegadores de oferecer suporte nativo para vídeo torna mais fácil para os desenvolvedores web adicionar componentes de vídeo aos seus sites sem depender da disponibilidade de plug-ins externos. Devido às limitações da tecnologia Flash atualmente utilizada pela Apple no iPhone e no iPad, as capacidades dos componentes multimídia HTML5 são particularmente importantes.

Usado para reproduzir vídeos, filmes

A fórmula básica do rótulo é a seguinte:

 <largura do vídeo=800 altura=600 controles=controles poster=content/1.jpg> <fonte src=content/iceage4.mp4 type=video/mp4></source> <fonte src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> O navegador atual não suporta reprodução direta de vídeo Clique aqui para baixar o vídeo: <a href=a.mp4>Baixar. vídeo</ a></video>

Fonte é a fonte de vídeo, que pode ser de vários tipos. Quando uma falha, a próxima será selecionada. Existem três tipos principais:

Ogg = arquivo Ogg com codificação de vídeo Theora e codificação de áudio Vorbis MPEG4 = arquivo MPEG 4 com codificação de vídeo H.264 e codificação de áudio AAC WebM = arquivo WebM com codificação de vídeo VP8 e codificação de áudio Vorbis

Perceber:

 <video src=img/a.mp4 controles=controls poster=img/1.jpg>Seu navegador é muito antigo, atualize, baixe o vídeo <a href=#>Endereço</a></video>

O conteúdo innerHTML da maioria das tags HTML5 é o conteúdo exibido quando o navegador não oferece suporte à tag.

A diferença entre vinculação de eventos e escuta:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>A diferença entre vinculação de eventos e monitoramento</title> </head>​ <body> <button id=btnA>Botão A </button> <button id=btnB>Botão B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { alert(você clicou } btnA.onclick = function() { alert(você clicou novamente } btnB.addEventListener(click, function(event)); { alert(você clicou },false); alert(você clicou novamente },false); </script> </body>​</html>

Após vincular um evento usando o nome do evento on, a vinculação substituirá o evento vinculado anteriormente, ou seja, o último evento vinculado entrará em vigor;

Usar addEventListener para vincular eventos não será sobrescrito e vários eventos idênticos podem ser vinculados a um elemento ao mesmo tempo.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Tag de vídeo</title> </head> <body> <video id=videoIce width=800 height=600 controles=controles pôster =content/1.jpg> <fonte src=content/iceage4.mp4 type=video/mp4></source> <fonte src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> O navegador atual não suporta reprodução direta de vídeo Clique aqui para baixar o vídeo: <a href=content/a.mp4>Baixar vídeo</a>. </video> <h2> <button onclick=play()>Reproduzir</button> <button onclick=pause()>Pausar</button> <span id=msg></span> </h2> <tipo de script =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body>​</html>;

O áudio pode realizar a função de reproduzir som e música.

 <audio src=http://baidu/demo/test.mp3 controles >Seu navegador não suporta o elemento de áudio</autio><audio src=content/a.mp3 controles=controls autoplay=autoplay></audio>

Muitos dos atributos da tag de áudio são iguais aos do vídeo:

autoplay: true|false, se verdadeiro, o áudio será reproduzido assim que estiver pronto. controles: true|false Se verdadeiro, exibe controles, como um botão de reprodução, para o usuário. end: valor numérico define onde no fluxo de áudio o player para de tocar. Por padrão, o som será reproduzido até o fim. loopend: valor numérico define a posição onde a reprodução do loop para no fluxo de áudio. O padrão é o valor do atributo final. loopstart: valor numérico define a posição inicial da reprodução do loop no fluxo de áudio. O padrão é o valor do atributo inicial. playcount: valor numérico define quantas vezes o clipe de áudio é reproduzido. O padrão é 1. src: url O URL do áudio que está sendo reproduzido. start: valor numérico define a posição no stream de áudio onde o player começa a tocar. Por padrão, o som é reproduzido no início.

Exemplo de uso do elemento fonte como subtag de um elemento multimídia:

 <áudio>​<fonte src='test.mp3 ' type='audio/mpeg'/>​<fonte src='test.ogg ' type='audio/ogg'/>​<fonte src='test.spx ' type='audio/ogg'/>​</audio>

Usando o elemento source, o navegador pesquisa sequencialmente na lista até encontrar um formato de arquivo que possa reproduzir. Uma vez encontrado, ele reproduz o arquivo e ignora outros elementos que se seguem.

A API do áudio é basicamente a mesma do vídeo. Aqui está um exemplo de personalização do volume:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>tag de áudio</title> </head> <body> <h2>tag de áudio</h2> <audio src=content/ fcml.mp3 controles=controls autoplay=autoplay id=mp3> <marquee><h2>Troque o navegador, é muito antigo</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01 } < /script> </body></html>

O volume está apenas entre 0-1.

Usado para incorporar conteúdo (incluindo diversas mídias). O formato pode ser Midi, Wav, AIFF, AU, MP3, flash, etc.

Exemplo: <embed src=flash.swf /> Exemplo de código em HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.