Clique aqui para retornar à coluna do tutorial Wulin.com HTML.
Acima: Linguagem de marcação - ponto de ancoragem
Fonte original Capítulo 8 Vamos falar sobre a lista novamente
Anteriormente, no primeiro capítulo, discutimos várias maneiras de marcar listas, estudando os benefícios de marcá -los como listas desordenadas com <ul> e <li>. Esse método pode identificar a estrutura da lista, verifique se todos os navegadores e dispositivos podem exibir corretamente seu conteúdo e também nos permitir adicionar vários estilos a ele ao CSS.
Em vários ambientes, não é difícil preencher o livro inteiro escrevendo todas as práticas de marcação de listas ao lidar com questões individuais. Não pretendo preencher o livro inteiro, mas planejo discutir várias outras categorias de lista em um capítulo independente, além de listas desordenadas. Pesquise várias situações adequadas para o uso de listas.
As listas de verificação são uma ferramenta poderosa para organizar a estrutura da página, adicionando significado a cada projeto independente, permitindo que você adicione estilos independentes posteriormente no CSS.
Vamos primeiro olhar para a lista de projetos numerados e duas maneiras de marcar essas listas. Talvez você possa ver qual método é mais benéfico de relance, mas ainda explicarei esse exemplo em detalhes novamente para enfatizar a importância da marcação estruturada e usar as ferramentas certas para resolver problemas. Qual é a melhor maneira de marcar uma lista de projetos numerados?
Suponha que você planeje marcar uma lista de etapas, cada projeto tem um número antes, estudaremos dois métodos diferentes que podem atingir esse objetivo e explicar por que um determinado método é mais aplicável. Método A: Ordem no caos
<ul>
<li> 1. Pique as cebolas. </li>
<li> 2. Refogue as cebolas por 3 minutos. </li>
<li> 3. Adicione 3 Clloves de alho. </li>
<li> 4. Cozinhe por mais 3 minutos. </li>
<li> 5. Comer. </li>
</ul>
A lista anterior pode ser uma das piores receitas da história da culinária. Mas é bastante apropriado usá -lo como um exemplo simples, adicionar um pouco de sal e ovos pode ser melhor, ou ... não importa o quê, de volta ao ponto.
Método A Escolhemos marcar essas etapas com uma lista não ordenada para obter todos os benefícios que mencionamos no Capítulo 1, adicionamos estrutura ao conteúdo e sabemos que a maioria dos navegadores, leitores de tela e outros dispositivos podem lidar com essa parte corretamente, e também podemos usar CSS para facilmente estilizá -lo, o que é ótimo! Mas ... jogos digitais
Como essa é uma lista numerada, adicionamos números antes de cada projeto e seguidos por um período para identificar a ordem de cada etapa, mas o que devemos fazer se precisarmos adicionar novas etapas entre as etapas 2 e 3? Agora precisamos renumerar todos os itens após as novas etapas (manualmente). Esta lista não é um aborrecimento, mas se você estiver modificando uma lista de 100 itens, o processo de modificação se tornará muito tedioso. Pequenos símbolos de pontos aparecem
Como marcamos a estrutura neste exemplo com uma lista não ordenada, veremos um pequeno símbolo de ponto antes de cada projeto numerado (como a Figura 8-1). Você pode gostar do pequeno símbolo de ponto. Se você não gosta, é claro que pode removê -lo através do CSS, mas definitivamente verá esses pequenos símbolos de pontos ao navegar nessa lista sem usar o CSS.
Figura 8-1, resultados do navegador Fechar o método de leitura CSS a
Há um método mais simples, mais significativo e mais fácil de manter. Vamos dar uma olhada no método B. Método B: Lista ordenada
<ol>
<li> Pique as cebolas. </li>
<li> refogue as cebolas por 3 minutos. </li>
<li> Adicione 3 clloves de alho. </li>
<li> Cozinhe por mais 3 minutos. </li>
<li> Coma. </li>
</ol>
Tenho certeza de que é isso que a maioria das pessoas escolhe fazer, mas isso não significa que não estamos usando o método A. <ol> por algum motivo para usar a lista ordenada; portanto, semanticamente, usamos os elementos corretos para resolver o problema em nossas mãos. O que há mais especial no método B? Numeração automática
Talvez você ache que não precisamos numerar manualmente cada item da lista. Ao usar <ol>, geraremos automaticamente números em ordem. Se nossa lista de etapas contiver mais de 100 itens e precisamos inserir algumas novas etapas no meio, precisamos simplesmente simplesmente inserir um novo item <li> na posição correta, e o navegador o renumerá automaticamente, assim como a mágica.
Se estiver usando o método A, precisamos corrigir manualmente todos os números ao inserir cada projeto. Eu posso pensar facilmente em qualquer trabalho mais interessante a fazer ...
Figura 8-2, o efeito da décima primeira versão do método de exibição do navegador B adicionou automaticamente um número antes de cada etapa.
Figura 8-2 O Feliz Efeito do Método de Exibição do Navegador B, Parte 2
Outra vantagem do método B é que, quando um item de lista longa é quebrada, ele será recuado após o número gerado, enquanto o método A será dobrado abaixo do número (Figura 8-3)
Figura 8-3 Comparação da lista de novos efeitos de linha do método A e Método B
Embora os estilos de numeração predefinida de uma lista ordenada sejam geralmente números de árabe (1,2,3,4,5, etc.), podemos substituir o estilo de numeração usando o atributo do tipo CSS no estilo da lista. O tipo no estilo de lista pode ser selecionado em um dos seguintes: Decimal: 1,2,3,4, ... (geralmente o valor predefinido) Alpha superior: A, B, C, D ... Lower-Alpha: A, B, C, D ... NÃO ROMOM: II, III, IV ... Lower-Roman: I, II, III, IV ... NÃO ... NOUMO: II, II, III ... IV ... II ...
Assim, por exemplo, se queremos que o método B produza um número romano de capital, podemos alcançar o seguinte CSS:
Ol Li {
Tipo no estilo de lista: alta-romana;
}
A Figura 8-4 é o efeito de exibição do método B com este CSS no navegador. Nossa lista de etapas não é mais algarismos árabes predefinidos, mas é substituído por algarismos romanos. Obviamente, as partes marcadas ainda são exatamente iguais. Você mudou de idéia? Basta fazer algumas alterações pequenas e mudar para outros estilos listados anteriormente, e você pode alterar imediatamente o método de numeração da lista para o que você gosta.
Figura 8-4 Lista ordenada de comutadores para algarismos romanos
Atributo do tipo HTML: Antes, algumas pessoas podem usar o atributo de tipo diretamente na tag <ol>, alterando o método de numeração da lista para algarismos romanos, letras em inglês etc. No entanto, para apoiar as regras CSS mencionadas anteriormente, não é recomendável usar o atributo de tipo como o padrão HTML 4.01. Portanto, você não deve mais usar o atributo de tipo, você deve usar o CSS.
Mais tarde, na extensão da ponta, modelaremos esta lista ordenada com CSS. Mas agora vamos olhar para outro exemplo de tipo de lista.
Página anterior 1 2 3 Próxima página Leia o texto completo