Extensão do elemento HTML do HTML5 (Parte 1) - Elementos recém -adicionados e visão geral do uso

Autor：Eve Cole Data da Última Atualização：2025-04-17 23:32:03

Considere nosso processo de desenvolvimento de uma página :

1. Projete a estrutura da página - html: esse processo é usar vários elementos HTML para criar a estrutura da página da web.

2. Projete a aparência da página - CSS: esse processo é usar CSS para melhorar a aparência da página da web.

3. Comportamento da página de design - JavaScript: Este processo é para dar certo comportamento aos elementos da página da web.

Além do CSS, o HTML5 foi expandido em graus variados em dois outros aspectos. Esta série está focada no primeiro aspecto. Na seção anterior, aprendemos os complexos elementos de tela e SVG, e os capítulos a seguir resumirão outros elementos adicionados ao HTML5.

Elementos estruturais

O HTML5 adicionou novos elementos estruturais, como cabeçalho, rodapé, navegação Nav, artigo de conteúdo, seção de capítulo etc. O significado é mostrado na figura abaixo:

Além dos elementos estruturais de toda a página, o HTML5 também adiciona elementos semânticos no nível do bloco, como elementos auxiliares à parte, elementos da imagem figuram, detalhes detalhados da descrição dos elementos, etc. Além de exibir melhor o significado do layout da página, esses elementos não são diferentes dos divs comuns e ainda precisam contar com o CSS para exibir esses elementos. Aqui está um breve exemplo:

<html>

<head>

<título> blog dxy </ititle>

</head>

<Body>

</header>

<H2> <a href = "http://www.vevb.com/dxy1982/"> artigo 1 </a> </h2>

<p> Introdução </p>

</artigo>

<H2> <a href = "http://www.vevb.com/dxy1982/"> artigo 2 </a> </h2>

<p> Introdução </p>

</artigo>

<MAV>

</Arn>

</seção>

<MAV>

<ul>

<li> <h2> Informações </h2>

<ul>

<li> <a href = "http://www.vevb.com/dxy1982/"> política </a> </li>

</ul> </li>

<li> <h2> artigo </h2>

<ul>

<li> <a href = '/blog/2007/04/'> janeiro </a> </li>

<li> <a href = '/blog/2007/03/'> fevereiro </a> </li>

</ul>

</li>

</ul>

</Arn>

<wower>

</rodapé>

</body>

</html>

Embora esses elementos sejam relativamente simples de usar, ainda há alguns pontos a serem observados :

1. Não use a seção como substituto para a div

A seção não é um contêiner de estilo. O elemento da seção representa a parte semântica do conteúdo usado para ajudar a criar um resumo do documento. Deve conter um cabeçalho. Geralmente existe como o mais artigo (é claro, também é possível para o artigo como sua). Se você deseja encontrar um elemento usado como contêiner de página ou precisar de um contêiner de estilo adicional, continue usando o DIV.

2. Use apenas o cabeçalho e o HGroup quando necessário

Não faz sentido escrever rótulos que não precisam ser escritos. Os cenários de uso do cabeçalho e do HGROUP são geralmente os seguintes:

• O elemento do cabeçalho representa um conjunto de texto auxiliar introdutório ou de navegação, geralmente usado como cabeçalho da seção.

• Quando a cabeça possui uma estrutura de várias camadas, como subtítulos, legendas, vários textos do logotipo etc., use o HGROUP para combinar elementos H1-H6 como cabeça da seção.

Aqui, se o cabeçalho ou o HGroup tiver apenas alguns elementos da cabeça, é melhor remover essas duas tags inúteis, por exemplo:

<H1> minha melhor postagem no blog </h1>

</header>

<!-conteúdo do artigo->

</artigo>

Modificar diretamente para:

<H1> minha melhor postagem no blog </h1>

<!-conteúdo do artigo->

</artigo>

O mesmo vale para:

<H1> minha melhor postagem no blog </h1>

</hgroup>

<p> por Rich Clark </p>

</header>

Altere diretamente para:

<H1> minha melhor postagem no blog </h1>

<p> por Rich Clark </p>

</header>

3. Não se abuse de navegação

O elemento NAV representa um bloco na página que vincula outras páginas ou outras partes desta página; um bloco que contém links de navegação.

Mas nem todos os links na página precisam ser colocados no elemento NAV - esse elemento deve ser usado como o principal bloco de navegação. Para dar um exemplo específico, muitas vezes existem muitos links no rodapé, como termos de serviço, página inicial, página de aviso de direitos autorais etc. O elemento de rodapé em si é suficiente para lidar com essas situações. Embora o elemento NAV também possa ser usado aqui, geralmente é considerado desnecessário.

4. Não abuse da figura

A figura deve ser algum teor de fluido e, às vezes, haverá uma descrição do título contida nele. Geralmente, será referenciado como uma unidade independente no fluxo de documentos. Este é o melhor cenário para a Figura - ele pode ser movido da página de conteúdo principal para a barra lateral sem afetar o fluxo do documento. A figura deve ser referenciada apenas no documento ou cercada por elementos da seção.

Se você é puramente para a renderização da imagem (como o logotipo), não citado em outras partes do documento, e não há necessidade de mover o local, não use a Figura.

5. Não use atributos do tipo desnecessário

No HTML5, os elementos de script e estilo não exigem mais atributos de tipo. É claro que não há problema em escrever, mas da perspectiva das melhores práticas, não há necessidade de escrever.

Elementos de áudio

Os elementos de áudio são usados para identificar conteúdo sólido, como música ou qualquer outro fluxo de áudio. Os formatos suportados por este elemento são mostrados na tabela a seguir:

	Ou seja, 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
Mp3	√			√	√
WAV		√	√		√

A tag de áudio possui alguns atributos usados para controlar o conteúdo, quando e como o áudio é reproduzido, etc. Esses atributos são: src (nome do arquivo), pré -carga (carregue quando a página for carregada), controles (controle de exibição), loop (loop) e autoplay (autoPlay). No exemplo a seguir, a página será reproduzida assim que o áudio for carregado e continuará a jogar. Os controles fornecidos podem permitir que o usuário pare ou reinicie a reprodução do áudio:

Seu navegador não suporta elementos de áudio.

</udio>

Se o navegador não suportar o elemento, as informações de texto do elemento serão exibidas.

Se o elemento AutoPlay estiver definido, a propriedade de pré -carga será automaticamente ignorada. Se a pré -carga = automática estiver definida, o áudio será carregado após a carga da página.

O elemento de áudio permite especificar vários elementos de origem para serem compatíveis com o navegador. O elemento de origem pode vincular diferentes arquivos de áudio. O navegador usará o primeiro formato reconhecível:

<udio>

Seu navegador não suporta elementos de áudio.

</udio>

Elementos de vídeo

O elemento de vídeo permite jogar videoclipes ou transmitir mídia visual. Os formatos suportados por este elemento são mostrados na tabela a seguir:

Formatar	Ou seja	Firefox	Ópera	Cromo	Safári
Ogg	Não	3.5+	10.5+	5.0+	Não
MPEG 4	9.0+	Não	Não	5.0+	3.0+
WebM	Não	4.0+	10.6+	6.0+	Não

Possui todos os atributos do elemento de áudio, mais: silenciado, pôster (esperando por imagem), largura e altura. Escusado será dizer que os dois últimos significados. Quando o vídeo está carregando ou o vídeo está em um estado sem carregamento, o atributo do pôster (especificando um URL absoluto ou relativo) permite encontrar uma imagem para lidar com ele primeiro; Mudado significa abafado.

O vídeo também suporta o uso de elementos de origem para resolver problemas de compatibilidade. Veja um pequeno exemplo:

Seu navegador não suporta elementos de vídeo.

</video>

Se você não quiser reproduzir o som do vídeo, defina silenciado = silenciado.

Além disso, o elemento de vídeo também fornece alguns métodos, propriedades e eventos para apoiar o processo de controle da reprodução nas operações DOM. Por exemplo, chamando elementos para reproduzir, pausar, carregar e outros métodos. Também existem propriedades como volume e tempo de reprodução que podem ser lidos ou definidos diretamente. Além disso, existem eventos que iniciam a reprodução, pausa, fim, etc. que podem ser usados. Veja o seguinte exemplo:

<! Doctype html>

<html>

<Body>

<button onclick = "playpause ()"> play/pause </botão>

<button onclick = "makeMall ()"> pequeno </button>

<button onclick = "makenormal ()"> normal </botão>

Seu navegador não suporta elementos de vídeo.

</video>

</div>

var myvideo = document.getElementById ("video1");

função playpause ()

{

if (myVideo.Paused)

myVideo.Play ();

outro

myVideo.Pause ();

}

função makebig ()

{

myVideo.Width = 560;

}

função makemall ()

{

myvideo.width = 320;

}

função makenormal ()

{

myvideo.width = 420;

}

</script>

</body>

</html>

De fato, precisamos prestar atenção a uma nova maneira de escrever: no exemplo acima, escrevemos elementos de áudio como este:

Seu navegador não suporta elementos de áudio.

</udio>

De fato, muitos controles de itens, AutoPlay e Loop são introduzidos no HTML5. Essas propriedades são boas para você escrevê -las como acima, mas a maneira recomendada é escrevê -las da seguinte maneira:

Seu navegador não suporta elementos de áudio.

</udio>

Como o navegador encontra essas propriedades, isso significa que essas propriedades estão ativadas. Ou seja, se você escrever essas propriedades e definir com força como false, o efeito ainda é equivalente a verdadeiro, por isso é geralmente recomendado para escrever apenas o nome do atributo.

Este problema de escrita também existe em forma. Muitas novas propriedades de forma e entrada são propriedades booleanas, e o método de escrita recomendado deve ser usado.

Elementos indicando a métrica

Nem todo navegador suporta os seguintes elementos, mas você pode basicamente ver os efeitos no Chrome.

Elemento da barra de progresso

Use este elemento para exibir a barra de progresso baixada, com apenas dois atributos: Value e Max, o que é muito simples. Chrome e Firefox são suportados.

<p> Download Progress:

</p>

Elementos métricos

Use este elemento para exibir o valor fornecido na classe de intervalo padrão, indicando o diagrama de indicação, e os valores dentro de diferentes faixas mostrarão cores diferentes. Alguns sites usam isso para exibir o valor atual da experiência do usuário. Quando o navegador não suporta esse elemento, o texto no meio do elemento será exibido diretamente. Chrome é atualmente suportado.

<p> Sua pontuação é:

<Valor do medidor = "88,7" min = "0" max = "100" lOW = "65" High = "96" Optimum = "100"> B+</METER>.

</p>

Execute-o e você verá uma coisa amarela de barra de rolagem; Se você alterar o valor para 50, descobrirá que a cor da barra indicadora está programada vermelha.

Existem tantas novas introduções de elemento. Para obter mais descrições de elementos, consulte a lista de tags completa no W3C.

Referência prática:

W3C Tutorial: http://www.w3schools.com/html5/default.asp

Orientação oficial do HTML5: http://dev.w3.org/html5/html-author/

Um bom site de guia: http://html5doctor.com/

HTML5 Tutorial chinês: http://www.html5china.com/

Um bom blog de front-end: http://www.pjhome.net/default.asp?cateid=1