Acredito que todo mundo conhece HTML e CSS, conhece a separação da estrutura HTML e o desempenho do CSS e conhece a semântica do HTML. Essas são as palavras -chave populares nos últimos anos. O HTML semântico foi procurado apenas um ano ou dois na China. Veja a estrutura HTML que está sendo discutida no grupo agora. As perguntas da entrevista sobre a estrutura HTML, o HTML semântico é responsável por uma grande parte. Então, por que usar HTML semântico? Quais são os benefícios do HTML semântico?
O HTML fornece a estrutura de contexto e o significado do conteúdo do documento da página da web; O próprio HTML não o expressa. Vemos que, por exemplo, <h1> é ousado, o tamanho da fonte é 2em, em negrito; <strong> é ousado, não pense que esta é a manifestação de HTML. Na verdade, esse é o estilo CSS padrão de HTML em ação; portanto, primeiro precisamos saber que o HTML não tem nada a ver com o desempenho da página, essas são a questão do CSS. O papel do HTML em uma página é a estrutura e o significado. Em termos leigos, é dividir o conteúdo. O que é colocado aqui e o que colocamos.
A estrutura HTML semântica deve primeiro enfatizar a estrutura HTMLA estrutura HTML é o esqueleto de uma página. Uma página é como uma casa. A estrutura HTML é uma parede de concreto armado de aço. Se uma casa não tiver uma parede de concreto reforçado de aço, será um monte de tijolos e não poderá viver em pessoas ou trabalhar. O CSS é um material decorativo, um piso de madeira, um mármore, uma tinta e é usado para decorar a casa. Não há necessidade de dizer mais sobre o poder do CSS. Se o CSS não tiver uma estrutura HTML, será uma pilha de placas de madeira, pintada juntas, sem o valor de uso real. O CSS depende inteiramente de documentos HTML (x) que o fazem referência. Se você deseja obter o poder total do CSS ao máximo, é muito necessário fornecer um HTML com conteúdo limpo e estruturado. HTML é o termo comum para publicar hipertexto na internet ... o HTML usa tags para estruturar o texto ( http://www.w3.org/markup/ ).
Como escrever uma estrutura HTML semântica?HTML é um método de suplementar a estrutura e o significado do conteúdo de texto (ou semântica). Ele nos dirá: esta linha é um título e essas linhas formam um parágrafo. Esses textos são listas de itens e esses textos são hiperlinks que vinculam a outro arquivo na Internet. Vale a pena notar que o HTML não deve nos dizer: esses textos são azuis e esses textos são vermelhos. Esta parte do conteúdo é a coluna mais certa, e essa linha está em itálico. Essas informações relacionadas ao desempenho são o trabalho do CSS. Ao fazer o desenvolvimento do front-end, lembre-se: o HTML nos diz como é uma peça de conteúdo (ou seu significado), não o que parece. Quando mencionamos tags semânticas, o que chamamos de HTML deve ser completamente separado das informações de apresentação, e as tags nela devem definir semanticamente a estrutura do documento.
A estrutura HTML semântica é realmente muito simples. Primeiro, domine a semântica de cada tag em HTML. <div> é um contêiner; <strong> é uma ênfase; <ul> <li> É uma lista não ordenada, etc. Quando você vê o conteúdo, pense sobre quais tags podem descrevê -la melhor e use quaisquer tags.
Quais são os benefícios das estruturas semânticas de HTML?Sabemos que as tags recém -adicionadas de HTML5, como <weweler> e <weeber>, o HTML está se desenvolvendo para uma estrutura HTML semântica mais robusta. O XHTML2 não é tão avançado quanto o HTML5 a esse respeito, que também é um motivo para a morte de XHTML2. Isso também mostra que a estrutura semântica de HTML é a tendência de desenvolvimento do HTML.
1. Quando a página é removida ou o estilo é perdido, ela pode dar à página uma estrutura clara:O próprio HTML não se expressa. Vemos que, por exemplo, <h1> é ousado, com um tamanho de fonte de 2em, negrito; <strong> é ousado, não pense que esta é a manifestação de HTML. Na verdade, esses são os estilos CSS padrão de HTML em ação; portanto, remover ou perder estilos pode fazer com que a página apresente uma estrutura clara não é a vantagem da estrutura HTML semântica, mas os navegadores têm estilos padrão. O objetivo do estilo padrão também é expressar melhor a semântica do HTML. Pode -se dizer que o estilo padrão do navegador e a estrutura HTML semântica são inseparáveis.
2. Os leitores de tela (se o visitante estiver com deficiência visual) lerão suas páginas da web completamente com base na sua marcação .Por exemplo, se você usar marcadores semânticos, o leitor de tela soletrará suas palavras uma a uma, em vez de tentar pronunciá -las integralmente.
3. PDA, telefone celular e outros dispositivos podem não ser capazes de renderizar páginas da Web, como navegadores de computador comuns (geralmente porque esses dispositivos têm suporte fraco para CSS).O uso de marcação semântica garante que esses dispositivos renderizam páginas da Web de maneira significativa. Idealmente, a tarefa de assistir a um dispositivo é renderizar as páginas da web de acordo com as condições do próprio dispositivo.
A marcação semântica fornece ao dispositivo as informações relevantes de que precisa, eliminando -se para considerar todas as situações possíveis de exibição (incluindo dispositivos novos ou existentes no futuro). Por exemplo, um telefone pode optar por fazer um parágrafo de texto marcado com um título em negrito. O computador portátil pode exibi -lo em uma fonte maior. De qualquer forma, depois de marcar o texto como um título, você pode ter certeza de que o leitor exibirá a página adequadamente com base em suas próprias condições.
4. Os rastreadores do mecanismo de pesquisa também dependem de tags para determinar o contexto e os pesos das palavras -chave individuais.No passado, você pode não ter considerado que os rastreadores de mecanismos de pesquisa também são visitantes de sites, mas agora eles são usuários extremamente valiosos. Sem eles, os mecanismos de pesquisa não poderão indexar seu site e, em seguida, o usuário médio será muito difícil de visitar.
5. Se sua página é fácil de entender para os rastreadores, porque os rastreadores ignoram amplamente os marcadores usados para representação e se concentrarão apenas em marcadores semânticos.Portanto, se o título do arquivo de página estiver marcado em vez de, a página poderá estar na posição mais baixa dos resultados da pesquisa. Além de melhorar a facilidade de uso, a marcação semântica é propícia ao uso correto de CSS e JavaScript, porque ele próprio fornece muitos ganchos para aplicar o estilo e o comportamento da página.
O SEO depende principalmente do conteúdo e links externos do seu site.
6. Fácil para o desenvolvimento e manutenção de equipesO W3C define um bom padrão para nós. Todos na equipe seguem esse padrão, o que pode reduzir muitas coisas diferenciadas, facilitar o desenvolvimento e manutenção, melhorar a eficiência do desenvolvimento e até perceber o desenvolvimento modular .
Se você tiver opiniões diferentes, adicione -as. Por favor, deixe uma mensagem para discutir.
Graças a GUI GE, Milk Tea, Xiaozhi, Roubing Rice, Caspar e CSS Forest Group para discussão