Estrutura de página HTML5

Introdução do elemento semântico

O padrão HTML5 adiciona muitos novos elementos semânticos.

Aqui, apresentamos principalmente novos elementos na estrutura da página.

O que é um elemento semântico

Em termos simples, os elementos semânticos devem dar algum significado ao elemento (etiqueta).

Como <weader> representando o cabeçalho, <Footh> para indicar o rodapé.

Característica

① Manutenção fácil: o uso de elementos semânticos terá informações de estrutura de página mais claras, que são fáceis de manter a manutenção de seguir -up da página. Não há necessidade de visualizar o código novamente: Encontre a divisão antes de encontrar o nome de classe específico.

② Gabinete -Free: Ajuda a ler o leitor de tela e outras ferramentas auxiliares.

③ Otimização otimizada do mecanismo de pesquisa: depois de verificar alguns elementos semânticos do HTML5, os robôs de pesquisa podem coletar informações em sua página de índice.

Layout original da interface

No layout da página, <div> é um elemento muito comum.

Para facilitar a manutenção, os designers geralmente dão a esses <div> ClassName (categoria de estilo) ou ID com nomes especiais.

Por exemplo, um elemento <div> que representa o cabeçalho, seu nome de classe ou id pode ser cabeçalho de página, cabeçalho, etc.

Exemplo:

Estrutura de página elemento semântico

ilustrar

Os elementos semânticos da estrutura da página são usados ​​principalmente para o layout geral da página.

E não tem estilo especial, ainda precisa ser usado com CSS.

Introdução detalhada

<header>: defina a área principal da página ou artigo da Web. Ele pode conter logotipo, navegação, barra de pesquisa e assim por diante.

A versão mais baixa do navegador: ou seja, 9, Chrome 5

Instruções para uso:

① Quando é usado para rotular a página da Web, pode incluir informações como logotipo, navegação e barra de pesquisa.

② Quando o título é usado para marcar o conteúdo, somente quando o título também é anexado a outras informações, o <Header> é considerado.

<Main>: Defina o conteúdo principal da página da web.

A versão mais baixa do navegador: ou seja, não suporta, Chrome 35

<Footer>: Defina a área da cauda da página ou artigo da Web. Pode incluir direitos autorais e arquivamento.

A versão mais baixa do navegador: ou seja, 9, Chrome 5

Instruções para uso:

① Como página da Web, geralmente inclui direitos autorais do site, restrições legais e links.

② Como nota de rodapé do artigo, geralmente contém as informações relevantes do autor.

<Nand>: marque o link de navegação da página. Contém várias áreas sobrepostas.

A versão mais baixa do navegador: ou seja, 9, Chrome 5

Instruções para uso:

① Uma página pode conter vários elementos <VN>, como navegação e recomendação de artigos relacionados.

Information As informações de contato e as informações de certificação na área <Foother> não precisam ser incluídas no elemento <VN>.

<Section>: Geralmente é marcado como uma área independente na página da web.

A versão mais baixa do navegador: ou seja, 9, Chrome 5

Instruções para uso:

① Pode ser usado como uma área independente na página da web, como uma seção no artigo.

<Artticle>: Blocos de conteúdo completo e independente; Como notícias, artigos de blog e outros conteúdos independentes (excluindo comentários ou perfis de autor).

A versão mais baixa do navegador: ou seja, 9, Chrome 5

<osper>: Defina os bloqueios de conteúdo fora do conteúdo principal do circuito. Como: anotação.

A versão mais baixa do navegador: ou seja, 9, Chrome 5

<Figura>: Representa uma seção de conteúdo independente e é frequentemente usado com <FigCaption> (representa), que pode ser usado para imagens, ilustrações, formulários, segmentos de código etc. no artigo.

A versão mais baixa do navegador: ou seja, 9, Chrome 8 <FigCaption>: Defina o título do elemento <Figura>.

A versão mais baixa do navegador: ou seja, 9, Chrome 8

Exemplo de diagrama

Versão antiga do suporte do navegador

Ie8 acima

O navegador será usado como um elemento interno para elementos que não sabem. Os elementos semânticos relacionados à página são elementos de nível de bloco, portanto, você só precisa definir os navegadores que não suportam esses elementos para exibi -los como elementos de nível de bloco.

Adicione o seguinte código ao estilo:

 Artigo, além, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, main, navegação, seção, resumo {display: block;}

IE8 e IE8 abaixo

Os navegadores abaixo do IE8 e IE8 não suportam o estilo de aplicativo de elemento útil que não pode ser reconhecido.

Portanto, crie esses elementos semânticos através do JS e adicione estilos básicos.

Tome o cabeçalho como um exemplo

 <Cript> document.createElement ('cabeçalho');

Aplicação Arquivo Externo

Essas criações tediosas já escreveram Lei Feng, acabaram de carregar na versão antiga do IE.

 <! - [se LT ie9]> <script src = // cdn.bootcss.com/html5shiv/html5