Inovação HTML5: a beleza da estrutura

Autor：Eve Cole Data da Última Atualização：2025-03-27 16:00:04

O HTML 5 é como uma revolução e está em pleno andamento na era pós-Web2.0.

O que é HTML 5, não preciso entrar em detalhes aqui. De acordo com o meu entendimento, a inovação do HTML 5 pode ser resumida como um sistema de etiqueta semântica, um suporte simplificado e rico em mídia, uma tecnologia mágica de armazenamento de dados local, uma rica animação (tela) que não requer plug-ins e um poderoso suporte à API. Em resumo, o HTML 5 torna a interação do computador e a interação da rede humana mais confortável e se encaixa nos usuários. A falta anterior de apoio a aplicativos de mídia rica e esse armazenamento não é mais uma dor para os navegadores. A intenção original da revolução HTML 5 é promover a Web de uma plataforma de conteúdo para uma plataforma de aplicativo padronizada e unificar os padrões de cada campo de plataforma.

Este artigo explica uma das inovações do HTML 5: uma estrutura mais clara e concisa.

Comece do início

Um código de cabeçalho XHTML padrão deve ficar assim:

<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<head>

</head>

Você consegue se lembrar? Você vai memorizar por Rote? Claro que não! Precisamos apenas de cópias e colar mecânicas.

Vamos dar uma olhada em como é um cabeçalho HTML 5 padrão:

<! doctype html>

Não preciso dizer qual é mais complicado e qual é simples. Sim, o cabeçalho HTML 5 pode ser tão simples que pode ser lembrado facilmente! Além disso, o caso, cita e retrocesso antes que o último suporte de ângulo possa ser ignorado.

Por que pode ser tão solto? De fato, se o XHTML for enviado como texto/html, o navegador também poderá analisá -lo bem e o navegador não se importa com a sintaxe do código. Portanto, o HTML 5 é metafísico, pode quebrar alguns dos padrões originais, mas ainda pode ter um bom desempenho no navegador.

Obviamente, para a conveniência da assistência da equipe e da manutenção subsequente, ainda devemos unificar o estilo de escrita que você gosta, como:

<! doctype html>

<html>

<head>

...

</head>

<Body>

...

</body>

</html>

Além disso, embora o HTML 5 atualmente não seja suportado por todos os navegadores, esse cabeçalho que pode economizar mais de 100 bytes (para sites com níveis diários de PV ou acima de um milhão, ele pode economizar muito tráfego). Se você pesquisou no modo de resolução do navegador, deve saber que as páginas desencadearão o modo estranho sem definir o Doctype e, desde que o navegador <!

Novo sistema de rotulagem semântica

A codificação semântica é uma habilidade necessária para desenvolvedores de front-end qualificados, mas, à medida que as páginas da web se tornam cada vez mais ricas, é óbvio que elas não conseguem fazê-lo simplesmente usando a tag XHTML original para desanimar. Deus disse: deve haver luz! Então há luz. Portanto, o HTML 5 fornece uma série de novas tags e atributos correspondentes para refletir a semântica típica dos sites modernos. Prática para produzir a verdade. Vamos escrever um exemplo:

<H1> Título do site </h1>

<H1> Legenda do site </h1>

</div>

<ul>

<li> JavaScript </li>

</ul>

</div>

<!-// End de cabeçalho->

<p> Este é um artigo sobre as novas tags de estrutura HTML 5. </p>

</div>

<p> Este também é um artigo sobre as novas tags de estrutura HTML 5. </p>

</div>

<!-// extremidade esquerda->

<H1> Perfil do autor </h1>

<p> Sr. THINK, uma pessoa comum que se concentra na tecnologia de front-end da Web. </p>

</div>

<!-// Fim lateral->

A parte inferior da página

</div>

<!-// ROONS END->

Acima está uma página simples da página do blog HTML, consistindo no cabeçalho, na área de exibição do artigo, na coluna do lado direito e no fundo. A codificação é limpa e está em conformidade com a semântica do XHTML, que pode ser executada bem mesmo em HTML 5. Mas, para o navegador, este é um pedaço de código que não distingue entre pesos, em vez de uma etiqueta que permite que a máquina entenda a semântica para definir o bloco correspondente. Por exemplo, navegadores padrão (como Firefox, Chrome e até a nova versão do IE) têm uma chave de atalho que pode levar os clientes a pular diretamente para a navegação da página, mas o problema é que todos os blocos são definidos pelo DIV e o valor de identificação da DIV é determinado pelo desenvolvedor, para que o navegador não saiba qual bloco deve ser o bloco que a navegação é localizada. O surgimento de novas tags HTML 5 apenas compensa essa falha. Então, se o código acima for substituído pelo HTML 5, você poderá escrever assim:

<H1> Título do site </h1>

<H1> Legenda do site </h1>

</hgroup>

<MAV>

<ul>

<li> JavaScript </li>

</ul>

</Arn>

</header>

<p> Este é um artigo sobre as novas tags de estrutura HTML 5. </p>

</artigo>

<p> Este também é um artigo sobre as novas tags de estrutura HTML 5. </p>

</artigo>

</div>

<oswer>

<H1> Perfil do autor </h1>

<p> Sr. THINK, uma pessoa comum que se concentra na tecnologia de front-end da Web. </p>

</fast>

<wower>

A parte inferior da página

</rodapé>

Acontece que a estrutura da página HTML pode ser tão bonita que pode ser vista rapidamente sem comentários. Para os navegadores, você não ficará mais perdido ao encontrar o bloco correspondente.

Como estruturar elementos com html 5 novas tags:

Através do exemplo acima, entendemos as inovações de novas tags HTML 5 para estrutura, mas ao mudar para o uso real, como podemos usá -las adequadamente? Eu acho que essa também é uma pergunta que muitos alunos do HTML 5 desejam fazer. Assim como a semântica XHTML, o uso de tags semânticas HTML 5 também deve ser seguido: cada tag tem seu significado específico e a semântica significa que usamos tags apropriadas no lugar certo para melhorar pessoas e máquinas (as máquinas podem ser entendidas como navegadores podem ser conhecidos como mecanismos de pesquisa). Por exemplo, a tag de cabeçalho geralmente é o primeiro elemento de bloco da página (a etiqueta do cabeçalho também pode ser usada no elemento cabeçalho do tipo, como o título do bloco de artigos), que contém as informações do tópico da página; A etiqueta NAV é geralmente usada para envolver informações de navegação; O rodapé é geralmente usado para envolver as informações inferiores da página; e assim por diante.

Abaixo está as diretrizes semânticas de explicação e uso para novas tags comuns para classes estruturais listadas no manual HTML 5:

Tag <header>

Definição manual: define o cabeçalho da seção ou documento.

Diretrizes de uso: geralmente é usado para incluir cabeçalhos de página e também pode ser usado para outros cabeçalhos da área, como cabeçalhos de artigo:

<H1> Título do site </h1>

<H1> Legenda do site </h1>

</hgroup>

</header>

<Hgroup> Tag

Definição manual: usado para combinar os títulos de uma página ou seção da web.

Diretrizes para uso: Usado para combinações de classes de título, como o título e a legenda de um artigo:

<H1> Este é um artigo que apresenta tags de estrutura HTML 5 </h1>

<H2> html 5 inovação </h2>

</hgroup>

TAG <Nav>

Definição manual: defina a parte que define o link de navegação.

Diretrizes para uso: Seção de navegação para definir páginas:

<MAV>

<ul>

<li> JavaScript </li>

</ul>

</Arn>

<fast> tag

Defina conteúdo diferente do artigo. O conteúdo do lado deve estar relacionado ao conteúdo do artigo.

Diretrizes de uso: Usado para conteúdo seccionado, uma nova seção será iniciada no fluxo de documentos, que geralmente é usado nas barras laterais relacionadas ao conteúdo do artigo:

<oswer>

<H1> Perfil do autor </h1>

<p> Sr. THINK, uma pessoa comum que se concentra na tecnologia de front-end da Web. </p>

</fast>

Tag <section>

Definição manual: defina seções no documento. Por exemplo, capítulos, cabeçalhos, rodapés ou outras partes do documento.

Diretrizes de uso: o conteúdo usado para seções iniciará uma nova seção no fluxo de documentos:

O que é <h1> seção? </h1>

<H2> Um novo capítulo </h2>

<H2> Sobre a seção </h1>

<p> Seção Introdução </p>

...

</artigo>

</seção>

<wower> tag

Definição manual: define o rodapé da seção ou documento. Normalmente, ele conterá o nome do criador, a data de criação do documento e/ou informações de contato.

Diretrizes de uso: geralmente é usado para envolver a página inteira com um fundo geral e também pode ser usado no fundo de outras áreas, como a parte inferior do artigo:

<wower>

[email protected]

</rodapé>

<Artigo> Tag

Definição manual: defina conteúdo externo. Por exemplo, um novo artigo de um provedor de notícias externo, de um blog ou de um fórum. Ou vem de outras fontes externas.

Diretrizes para uso: como o nome indica, geralmente é usado em blocos de artigos:

<H1> Este é um artigo que apresenta tags de estrutura HTML 5 </h1>

<H2> html 5 inovação </h2>

</hgroup>

</header>

<p> Detalhes do conteúdo do artigo </p>

</artigo>

<Figura> Tag

Definição manual: usado para combinar elementos.

Diretrizes de uso: usada principalmente para combinar fotos e descrições de imagens:

<FigCaption> Esta é a descrição das informações da imagem </figcaption>

</figura>

Tag <pune>

Definição manual: defina a lista de menus. Use esta tag quando deseja listar os controles do formulário.

Guia de uso: usado em blocos de aula de menu, usados para definir listas de menus ou opções de menu:

<pune>

<li> JavaScript </li>

</menu>

Outras novas tags no HTML 5 não serão explicadas uma a uma. Por favor, verifique você mesmo o manual.

De fato, essas coisas são como a div, H1, INPU e outras tags no XHTML. Enquanto você praticar mais na vida cotidiana, é fácil usá -los livremente.

Sobre compatibilidade

Se você é uma pessoa que gosta de estudar e prestar atenção ao front-end, deve saber que as novas tags HTML 5 foram usadas na estrutura da página de Taobao. Então, o que eu quero dizer é que, desde que você se atreva a tentar, a compatibilidade não é um problema. Existem muitos métodos de compatibilidade on -line (este artigo é sobre estrutura, ha ~).

Histórias posteriores

Qualquer nova tecnologia requer um processo de adaptação. Se você está pronto para ser um excelente desenvolvedor de front-end da Web, deve continuar tentando e aceitando a mais recente tecnologia de front-end.

Sun Wen disse uma vez que, se você quiser fazer a felicidade da civilização, deve fazer a dor da civilização. Isso é verdade para a revolução da humanidade, assim como a revolução do HTML 5. O declínio gradual do IE permitiu que os principais fabricantes de navegadores entrassem no período dos estados em guerra e competissem entre si. Quanto aos desenvolvedores, esperamos apenas que os principais fabricantes de navegadores sigam o mesmo padrão o máximo possível, em vez de dividir os jogadores após a competição. Porque, apresentação eficiente e perfeita do mesmo aplicativo para todos os tipos de usuários é nosso objetivo final.

Dessa forma, este artigo começa a partir do doctype da página, para usar as novas tags HTML 5 para criar uma estrutura de página mais semanticizada e, em seguida, explica as novas tags relacionadas à estrutura da página. Acredito que todo mundo tem um novo entendimento das novas etiquetas estruturais do HTML 5. Se você estiver interessado, abra seu IDE, escreva um código construído pelas novas tags do HTML 5 e depois use o CSS para descrever seu Grand Blueprint!