Artigo Introdução de wulin.com (www.vevb.com): Lembro -me de uma experiência horrível. A página foi aninhada com uma dúzia ou dezenas de divs. Isso me fez sentir tonto quando li ... alguns deles podem usar tags de extensão, tags P e divs. Aqueles que podem usar o H1 e o HX também usam tags div. Está realmente sem palavras ... neste momento, espero que o desenvolvedor tenha alguns conceitos e ações de "tags semânticas".
Vejo que alguns requisitos de recrutamento estão familiarizados com a palavra semântica da Web e compreensão/familiarizados com os padrões da Web. A semântica do TAG faz parte dos padrões da Web, então modifiquei um post que eu costumava postar no parque do blog e depois o publiquei ... Espero que os iniciantes do front-end possam saber que existe uma coisa dessas.
Lembro -me de uma experiência aterrorizante. A página foi aninhada com uma dúzia ou dezenas de divs. Isso me fez sentir tonto quando assisti ... alguns deles podem usar tags de extensão, tags P e divs. Aqueles que podem usar o H1 e o HX também usam tags div. Está realmente sem palavras ... neste momento, espero que o desenvolvedor tenha alguns conceitos e ações de tags semânticas ...
1: (Teoria) O que é um rótulo semântico?
As tags semânticas devem tentar usar tags HTML com estruturas correspondentes o máximo possível. Tome a mesa como exemplo:
<tabela>
<tr>
<td> itens de consumo </td>
<td> Valor do consumo </td>
</tr>
<tr>
<td> coma </td>
<Td> 20 yuan </td>
</tr>
</tabela>
Você viu o que há de errado com a tabela acima? Hehe, então olhe para este rótulo semântico
<tabela>
<Legenda> Passe a contabilidade </gention>
<head>
<tr>
<th> itens de consumidor </th>
Valor do consumo <TH> </th>
</tr>
</head>
<Tbody>
<td> coma </td>
<Td> 20 yuan </td>
</tbody>
</tabela>
As tags dessas duas peças de código são diferentes. Os códigos de tag na segunda tabela estão, sem dúvida, mais alinhados com os padrões da Web.
<geption>: título da tabela;
<head>: o cabeçalho de uma mesa;
<th>: Cabeçalho da coluna de uma certa coluna da tabela.
Vamos falar sobre o que estamos acostumados
<title> Introdução ao parque do blog </ititle> <body> O parque de blogs é um parque de tecnologia de desenvolvimento de software. Foi fundada em 2004, aqui ... </body>
Olha, por que sabemos onde está o título quando lemos um artigo? No topo do navegador. Então, por que os mecanismos de pesquisa podem rastrear? É que ele sabe que o título da tag semântica <title> é o artigo. Se não cumprirmos isso, em vez disso:
<man> Introdução ao parque de blogs </span> <span> O parque de blogs é um parque de tecnologia de desenvolvimento de software. Foi fundada em 2004, aqui ... <pan>
Então, como os mecanismos de pesquisa sabem quem é o título e quem é o conteúdo? Como isso depende do título? De fato, a semântica pode não apenas ser a semântica do rótulo, mas também as estender à semântica estrutural. Por exemplo:
#left {float: esquerda; margging-left: 50px;}
#right {float: direita; margin-top: 100px;}
<div id = esquerda> conteúdo .. </div>
<div id = direita> conteúdo .. </div>
Neste exemplo, a nomeação de ID é um pouco exagerada, mas situações semelhantes fazem algumas. Quando queremos colocar o #left div no lado direito da página e alterar a posição com #right, você pode alterar o estilo para isso?
#left {float: direita; margem-esquerda: 50px;}
#right {float: esquerda; margin-top: 100px;}
Seria tão estranho parecer assim, e seria enganar o layout desses dois divs.
Deve ser escrito assim.
<div id = main> conteúdo .. </div>
<div id = barra lateral> Conteúdo .. </div>
Dessa forma, fica claro que o conteúdo é nessas divs e é conveniente modificar os estilos.
2: (Teoria) Que tal rótulos semânticos?
1. Melhor estrutura, mais propício para rastreamento do mecanismo de pesquisa (otimização de SEO) e manutenção do desenvolvedor (manutenção mais alta devido à estrutura clara e fácil de ler).
2. É mais propício à leitura de terminais especiais (telefones celulares, assistentes pessoais, etc.).
3: (Ação) O que fazer com rótulos semânticos?
Tente usar significados estruturais e menos semântica, como <span>, <div> sem sentido, e você não pode dizer o que é, mas não pode ver o que é de uma vez. Você pode dizer que a tag EM é o conteúdo enfatizado e distinguido de diferentes conteúdos.
Então, como determinar se sua página está em conformidade com um dos padrões da Web: tags semânticas? Você pode remover temporariamente o estilo da sua página e ver como a legibilidade é. Se você acha que sua página está muito confusa neste momento, significa que o rótulo semântico da página não é muito bom. Se sua página ainda não estiver confusa depois de remover o estilo, significa que a estrutura da sua página é clara e a etiqueta semântica é melhor.
Esta é apenas a minha opinião. Espero que as pessoas que o leram também expressem suas idéias para que todos possam conhecer suas idéias e melhorar este artigo.