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ânticoEm 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 interfaceNo 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 ilustrarOs 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 acimaO 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 abaixoOs 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 ExternoEssas 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