Esta seção aprende os elementos da lista no HTML. O formulário da lista é responsável por uma proporção relativamente grande do design do site, e as informações de exibição são muito arrumadas e intuitivas, o que é fácil para os usuários entenderem. O papel avançado dos elementos da lista será amplamente utilizado no aprendizado do estilo CSS subsequente.
Listas para organizar dadosDepois de aprender tantas tags HTML que controlam a exibição de páginas da web, os leitores podem criar inicialmente páginas de artigo puro. Esta seção aprende os elementos da lista no HTML. O formulário da lista é responsável por uma proporção relativamente grande do design do site, e as informações de exibição são muito arrumadas e intuitivas, o que é fácil para os usuários entenderem. O papel avançado dos elementos da lista será amplamente utilizado no aprendizado do estilo CSS subsequente.
4.4.1 Composição estrutural da listaO elemento da lista de HTML é uma estrutura envolvida por uma tag de lista, e os itens da lista contidos são compostos de <li> </li>. A estrutura específica é mostrada na Figura 4.17.
4.4.2 Fazendo uma lista não ordenadaComo o nome sugere, uma lista não ordenada é um formulário de lista no qual os itens da lista na estrutura da lista não têm pedido. A maioria dos aplicativos da Web usa listas não ordenadas e suas tags de lista são <ul> </ul>. O método de escrita é o seguinte:
<ul>
<li> Lista Item 1 </li>
<li> Lista Item 2 </li>
<li> Lista Item 3 </li>
<li> Lista Item 4 </li>
<li> Lista Item 5 </li>
</ul>
4.4.3 Faça uma lista ordenadaComo o nome sugere, uma lista ordenada significa que os itens da lista na estrutura da lista têm uma sequência de listas. De cima para baixo, pode haver vários números de sequência, como 1, 2, 3 ou A, B, C, etc. Crie um arquivo de página da web no D:/ Web/ Diretório, chamado ul_ol.htm, e escreva o código como mostrado no código 4.17.
Código 4.17 Configurações da lista: ul_ol.htm
<html>
<head>
<title> Configurações da lista </title>
</head>
<Body>
<Tamanho da fonte = 5>
Tecnologia da recepção da web
<ul>
<li> html </li>
<li> CSS </li>
<li> JavaScript </li>
<li> Flash </li>
</ul>
Aprendizagem de fundo da web
<ol>
<li> Asp </li>
<li> Asp.net </li>
<li> php </li>
<li> CGI </li>
<li> Ruby </li>
<li> Python </li>
</ol>
</font>
</body>
</html>
Digite http: //localhost/ul_ol.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.18.
Figura 4.18 Configurações da lista