Com a contínua popularização dos padrões WEB na China, conceitos como separação do comportamento de desempenho estrutural, modularização, semântica e degradação elegante também se tornaram itens importantes para avaliar a compreensão dos padrões WEB pela equipe de front-end. Devido ao valor comercial por trás do SEO, a "semanticização" recebeu atenção excepcional. Como um novo funcionário front-end, uma vez simplesmente acreditei que a "semanticização" é um método de organizar a estrutura (x) HTML usando tags que são mais benéficas para o mecanismo de pesquisa. peso.
Depois de ler muitos livros iniciais e muitos artigos de meus antecessores, comecei a perceber a superficialidade da minha consciência e lentamente percebi o valor da “semantização”. O conteúdo a seguir é apenas um resumo da prática pessoal no dia a dia. Ele reúne as opiniões de vários idosos e se apoia nos ombros de gigantes para ver mais longe.
O que é "Semântica"
“Semântica” refere-se à capacidade das máquinas de pesquisar e coletar informações com menos intervenção humana, tornando as páginas da web compreensíveis pelas máquinas e, em última análise, beneficiando os humanos. Especificamente, tomando emprestada uma explicação popular de um internauta no fórum de BI, "Semântica significa não tratar sua namorada como uma amiga comum".
No entanto, através do controle CSS, podemos facilmente exibir "namorada" como "amigos". Se nos concentrarmos apenas na camada de apresentação, o rótulo é apenas um "gancho", que é fornecido para processamento de CSS e JS. ainda enfatizamos a “semantização”, que será discutida em detalhes a seguir.
significado semântico
1. Mecanismo de pesquisa
Em relação à otimização de mecanismos de busca, muitos idosos já deram explicações ricas sobre o peso do Hx, texto oculto, etc., por isso não vou entrar em detalhes aqui Há algum tempo, surgiu um software chamado Wolfram (http://www.wolframalpha). O mecanismo de pesquisa de .com/) atraiu a atenção. Sabemos que o Google classificará os resultados da pesquisa de acordo com o valor de PR de cada site. Outros mecanismos de pesquisa também têm seus próprios algoritmos independentes, e a Wolfram afirma “entender” o conteúdo de entrada do usuário. . Faça um julgamento com base na premissa. Quando digitei "quem é Adrian", Wolfram me deu esse feedback, embora o resultado não tenha sido muito preciso.
Relacionada ao trabalho front-end, a “semântica” que admiramos não consiste apenas em permitir que os computadores entendam nosso conteúdo? Com um exemplo simples como este <acronym title="World Wildlife Fund">WWF</acronym>, o computador pode entender que o WWF merece ser o World Wildlife Fund, e não o Fórum Mundial da Água. Não é realista para o computador fazê-lo completamente. entender nosso conteúdo. Sim, mesmo que mecanismos de busca como o Wolfram possam ter vida curta, a visão que eles buscam, tornando o conhecimento do mundo computável, é de fato digna de nossa busca.
2. Experiência do usuário
Vamos dar um exemplo primeiro. A seguir está o formulário de registro do usuário em Dangdang.com (https://login.dangdang.com/Register.aspx), e parte da estrutura XHTML é interceptada.
Vamos experimentar o que acontecerá se alterarmos <span class="span_n">Set Nickname:</span> para <label class="span_n" for="txtNickName">Set Nickname:</label>.
Quando o mouse clicar em "Definir Apelido", a caixa de entrada de texto com o nome de ID "txtNickName" ganhará automaticamente o foco. A definição do rótulo em si é definir um rótulo (marcador) para o controle (http://www. w3school.com.cn/tags/tag_label.asp), todos os navegadores convencionais têm basicamente o mesmo suporte para rótulo. O controle de formulário do navegador em si é um controle interativo muito maduro. Após o teste por um herói no grupo de floresta CCS, o rótulo rótulo. é muito eficaz para operações de controle de voz. Também é uma experiência muito boa.
O mesmo é Dangdang.com, a lista de produtos na página inicial ainda é um pequeno pedaço de código XHTML
O código interceptado é a parte do preço Independentemente da nomenclatura da classe, vamos experimentar se mudarmos "span class="del grey s10""￥94,00 "/span" para "del class="del grey s10" date=". ” cite=””》￥94,00《/del》《ins》￥46,00《/ins》, não há mudança visual, mas quando corremos nus pela página.
Os resultados são óbvios. Como front-end, também precisamos considerar que a velocidade da Internet do usuário pode ser muito lenta (talvez ele esteja usando Thunder BT), resultando na impossibilidade de carregar CSS, bem como na situação do celular. usuários e escolha o apropriado. O custo das tags é muito baixo. Você só precisa adicionar alguns conhecimentos básicos de HTML. Além disso, o atributo de data e o atributo de citação são muito úteis.
Há também a importância do atributo alt da tag abbr e da tag img para leitores de tela. Como as condições não permitem, não posso experimentar pessoalmente. Do outro lado da costa, já existe algo como a Seção 508 para. proteger as pessoas com deficiência de serem desprezadas pelos sites governamentais.
3. Eficiência de desenvolvimento
A estrutura da página da web rica em semântica tem um efeito significativo no desenvolvimento inicial e na correção de bugs posterior. Especificamente, é como o seguinte código de lista de produtos simples.
Através de tags "semânticas", os "ganchos" na lista de produtos são enriquecidos. Ao adicionar id e nomenclatura de classe à camada pai, o desempenho global na lista de produtos pode ser controlado. Para modificações de estilo, em condições ideais, pode-se evitar alterações. estruturar a página web por meio de desenvolvedores back-end e economizar custos de mão de obra Porém, voltando à realidade e enfrentando as diversas necessidades de produtos e chefes, ainda é irrealista mudar completamente o estilo apenas modificando o CSS em grande escala. necessidades e bugs, a melhor maneira é reservar razoavelmente "ganchos" para a página no estágio inicial de desenvolvimento para facilitar modificações e usos posteriores. Neste momento, tags semânticas ricas são bastante práticas.
Para colaboração em equipe, o ID semântico e a nomenclatura de classe podem tornar a estrutura clara para todos na equipe. Imagine que um rótulo com uma classe vermelha é alterado para azul devido a mudanças nos requisitos, e você pode entender por que a nomenclatura semântica é necessária.
Nas discussões anteriores sobre rasterização e estruturas, levamos a pensar sobre convenções de nomenclatura. O que se segue é apenas uma discussão sobre métodos de nomenclatura e não inclui a influência de outros fatores. Recentemente, entrei em contato com um conjunto completo de layout. especificações. Acho que a maioria deles Quando as pessoas tiveram contato com ele pela primeira vez, todos ficaram tontos com esse tipo de nomenclatura, como "area_01", "layout_01" etc. escala de projetos que a equipe está assumindo agora, então eles não têm certeza se esse método é apropriado, mas uma coisa é certa: isso aumenta o custo de aprendizagem de novas pessoas e, para desenvolvimento futuro, acho que esse método é. também desejável. Afinal, no longo prazo, seu objetivo é também melhorar o desenvolvimento da equipe e reduzir conflitos. Acho que foi assim que o YUI, o Blueprint e o 960 Grid System surgiram. conjectura, e espero que possa ser corroborada no futuro.
4. Padrões da indústria
Existem mil Hamlets para mil pessoas. Da mesma forma, mil front-ends também podem escrever mil páginas com o mesmo desempenho, mas com estruturas diferentes. Essa é exatamente a situação atual na reconstrução de páginas. da página à vontade, mas poucas pessoas prestam atenção à estrutura HTML mais básica. Por um lado, o motivo é a falta de semântica das tags HTML. As novas tags no HTML5 resolvem essa parte do problema até certo ponto. A outra razão, eu acho, é a indiferença do autor aos fundamentos do HTML, como disse Gui Ge: “Um leigo olha para a porta e um especialista olha para a emoção”. quer fazer a diferença nesse setor, a especialização é obrigatória. Ou seja, se você não se considera desenvolvimento, não há necessidade de discutir a questão da “semantização”.
O objetivo da "semantização" é alcançar padrões unificados. A futura Internet "deve ser uma Internet aberta. Não será como agora, onde os dados não podem fluir sem impedimentos e há um grande número de ilhas de informação e pontos cegos de informação". boas práticas, interfaces abertas e conteúdo compartilhado serão discutidos em detalhes abaixo.
prática semântica
No conteúdo acima, a maior parte do conteúdo prático foi intercalado, e aqui está uma introdução resumida.
1. Estrutura do documento
A maneira mais simples de "semantizar" é começar com a estrutura, escolher as tags que melhor correspondem ao significado do conteúdo, revisar novamente o "Guia Autorizado para HTML e XHTML" e pensar mais sobre o significado do conteúdo em vez de apenas fazer julgamentos com base nas renderizações da página. Muitas vezes enfrentaremos tal situação. Para ver um efeito simples, para buscar uma semântica razoável, temos que escolher uma solução que não seja tão fácil de implementar. Acho que esta é também a consciência do trabalhador front-end sobre os padrões da WEB e sua compreensão do trabalho. Como fazer escolhas equilibradas também é um conhecimento muito profundo (http://realazy.org/blog/2009/06). /29/engenheiro-vs-cientista/).
Na fase de pré-produção, você também pode considerar a situação futura e reservar ganchos para a página com base na semântica do conteúdo. É claro que problemas específicos devem ser analisados detalhadamente De acordo com os diferentes requisitos do projeto, o desenvolvimento adotado deve ser flexível e adaptável, por exemplo, para páginas especiais promocionais, uma vez que a necessidade de ajustes posteriores não é grande, sob a premissa básica de atendimento. usabilidade e acessibilidade, o desenvolvimento deve ser adotado. O modo de desenvolvimento rápido concentra-se em restaurar o efeito do rascunho do design, mas para o efeito de grandes sites, os requisitos são obviamente diferentes.
2. Regras de nomenclatura
Esquemas de nomenclatura padrão para ID e Classe aparecem de tempos em tempos na Internet. O princípio geral é nomear de acordo com o significado do conteúdo. As vantagens da nomenclatura semântica são óbvias.
Se você quiser alterar a posição da barra lateral, você só precisa modificar o CSS sem alterar a estrutura da página da web. Para módulos de página que ocorrem com frequência, eu pessoalmente recomendo formar gradualmente sua própria convenção de nomenclatura durante o processo de desenvolvimento, como cabeçalho/rodapé. /main/hd/bd /nav/box/mode, etc., use hífens "-" ou camel case para formar nomes mais complexos, como site-nav/quick-menu/secondaryContent/.
Mas voltando à situação específica, diferentes projetos também devem escolher o método de nomenclatura de acordo com a situação específica. Diferentes regras de nomenclatura devem ser usadas em combinação. Sites grandes, como o Taobao, são mais adequados para usar uma combinação de rasterização e nomenclatura semântica. Para páginas, a modificação de estilo pode fazer os ajustes correspondentes de forma rápida e ágil. Para produção, ela pode ser montada rapidamente. Para a maioria das páginas únicas do tipo declaração, eu pessoalmente recomendo o uso de nomenclatura estruturada. Em vez de gastar muito tempo pensando em nomear,
3. Microformatos
Microformato é um novo método de incorporação de dados estruturados em código XHTML padrão. Simplificando, ele usa um conjunto de padrões de nomenclatura de classe estabelecidos para declarar o conteúdo do documento. A compreensão da maioria das pessoas sobre microformatos começa com hCard. Aqui está um exemplo simples de hCard (http://www.oppenheim.com.au/). Este é o hCard aplicado ao rodapé por James Oppenheim.
Entre eles, vcard url fn nome dado adr localidade região nomes de classe são todos gerados para formatação de microformatos. Você também deve notar que várias tags span são adicionadas para adicionar nomes de classe. Então, qual é o significado dos microformatos? Através do plug-in Operador para Firefox, exportei meu cartão de visita do meu currículo (http://adriancheng.name/resume.html)
Posso importar o vcf exportado para vários clientes de e-mail como informações de contato ou importá-lo para a agenda de endereços do celular (http://tommyfan.com/blog/skill/add_phone_from_hcard/). padrão, você pode É conveniente para vários clientes processar dados em páginas da web. O papel dos microformatos neste momento também é semelhante à API em páginas da web. Claro, os microformatos têm uma visão mais ampla. Para outros padrões de formato, você pode. visite http://microformats.org/ Saiba mais.
Conclusão
A prática da "semantização" é muito simples. Pode-se dizer que é a parte mais básica do front-end, porém, por diversos motivos, foi mal compreendida ou ignorada e não recebeu a atenção que merece. este artigo para resolver meu estágio anterior O acúmulo de aprendizado, espero que possa dar a todos os leitores algumas reflexões sobre os padrões da WEB.