O bom código HTML é a base de um belo site. Quando ensino os outros CSS, sempre digo a eles primeiro: o bom CSS existe apenas em boas tags HTML. É como se uma casa precisasse de uma base sólida, certo? As tags HTML arrumadas e semânticas têm muitas vantagens, mas ainda existem muitos sites que usam redação de tags hostis.
Vejamos algumas tags HTML não escritas e discuti -las para aprender a escrever tags HTML arrumadas e padrão.
Wulin.com Nota : Chris Cyier usa dois documentos aqui para explicar o código deste artigo: Código ruim e bom código. Consulte esses dois documentos quando você estuda.Para fazer isso, só precisamos seguir as etapas corretas. Não há necessidade de discutir se deve usar o HTML 4.01 ou o XHTML 1.0, os quais colocam requisitos rigorosos em nossa redação do código correto.
Mas não importa o que aconteça, nosso código não deve usar nenhuma tabela de tabelas para layout, portanto, não há necessidade de usar o Doctype de transição.
Recursos relacionados:Em nossa seção <head>, a primeira coisa é declarar o conjunto de personagens. Usamos o UTF-8, mas coloque-o atrás do <título>. Vamos mover a declaração de definir o personagem para o topo, porque queremos que o navegador saiba qual o personagem definido para lidar com isso antes de ler qualquer coisa.
Além da posição da declaração do conjunto de caracteres, os personagens estranhos que aparecem no <title> também são questões que precisam receber atenção. Por exemplo, os caracteres mais comumente usados devem ser substituídos pela entidade de caracteres & amp ;.
Recursos relacionados:Ao escrever o código, o recuo não afeta a aparência da página da web, mas o uso de indentação apropriado pode tornar o código mais legível. O método padrão de indentação é recuperar um bit de guia (ou alguns espaços) quando você inicia um novo elemento. Além disso, lembre -se de que o rótulo do elemento fechado está alinhado com o rótulo inicial.
Wulin.com NOTA : Alguns amigos acham que é mais problemático recuperar ao escrever código. Se você está apenas lendo este código, pode não haver problema. Apenas pense que está tudo bem. Mas se for colaboração ou seu trabalho for publicado e compartilhado publicamente, é necessário escrever um código bonito e mais legível. Recursos relacionados:Temos algum código CSS que foi estendido à nossa seção <head>. Isso é uma falta séria, porque só pode funcionar em uma única página HTML. Manter um arquivo CSS independente significa que as páginas futuras da Web podem vincular -las e usar o mesmo código. O mesmo vale para JavaScript.
Wulin.com Nota : Obviamente, esse problema pode não ser tão sério. Por exemplo, como um tema WordPress, o código escrito em <head> é usado em todas as páginas do WordPress. Mas escrever CSS em <head> ainda é um hábito muito ruim.No título do nosso site, usamos <H1> como a tag de título do site, que é perfeita. E um link para a página inicial foi adicionado, mas o erro foi que o link foi colocado do lado de fora <H1> e o link cercado <H1>. Esse erro de nidificação simples é bem tratado pela maioria dos navegadores, mas tecnicamente, não funciona.
Um link de âncora é um elemento embutido e o título <H1> é um elemento de bloco, e o elemento de bloco não deve ser colocado no elemento embutido.
Não sei quem o inventou primeiro, mas gosto da palavra Divite, que se refere ao uso excessivo de divs em tags HTML. Em um certo estágio de aprendizado da web design, aprendemos a usar uma div para envolver muitos outros elementos para obter um layout e estilo convenientes. Isso leva ao abuso de elementos div. Usamos as áreas necessárias e as áreas completamente desnecessárias.
No exemplo mostrado acima, usamos uma div (Topnav) para conter a lista UL (BigBarnAvigation). No entanto, o DIV e o UL são elementos de bloco, portanto, não há necessidade de usar o DIV para embrulhar o elemento UL.
Recursos relacionados:Agora vamos falar sobre nomeação de gerenciamento. No exemplo mencionado no artigo anterior, nosso UL usa o nome de ID BigBarnAvigation. A navegação explica muito bem o conteúdo do bloco, mas o Big e o Bar descrevem o design e não o conteúdo. Pode estar dizendo que este menu é uma grande barra de ferramentas, mas se o design deste menu se tornar vertical, o nome parecerá confuso e irrelevante.
Nomes amigáveis de classe e identificação como Mainnav, Subnav, Barra lateral, rodapé, metadados, que descrevem o que está incluído. Os nomes ruins de classe e IDs descrevem o design, como BigBoldHeader, esquerda e RoundEdBox.
Wulin.com Nota : Chris enfatiza se deve nomeá -lo por conteúdo ou design. Pessoalmente, gostaria de adicionar aos nomes de identificação e classe para capitalizar ou minúsculas ou capitalizar a letra inicial da palavra . Primeiro de tudo, palavras completamente capitalizadas não são propícias à leitura e excluídas. Quanto a usar letras minúsculas ou maiúsculas da primeira letra da palavra, depende de seus hábitos pessoais. É importante que, independentemente da regra, seja consistente . Não seja puramente minúsculo e capitalizado na primeira letra de cada vez, será muito confuso.Além disso, o que estou pessoalmente confuso é sublinhar, ou hífen, ou não usar nomes mais longos. Ou talvez eu ache que é muito complicado. É bom usar qualquer tipo e não há problema em mantê -lo consistente.
Página anterior 1 2 Próxima página Leia o texto completo